diff --git a/src/components/Button/Button.stories.mdx b/src/components/Button/Button.stories.mdx index d934ad293..70a68bcae 100644 --- a/src/components/Button/Button.stories.mdx +++ b/src/components/Button/Button.stories.mdx @@ -1,6 +1,7 @@ import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; import Button, { ButtonAppearance } from "./Button"; +import Tooltip from "../Tooltip"; + + + diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx index 8b61e4249..0861f6e01 100644 --- a/src/components/Button/Button.test.tsx +++ b/src/components/Button/Button.test.tsx @@ -37,21 +37,14 @@ describe("Button ", () => { const onClick = jest.fn(); render(); const button = screen.getByRole("button"); - expect(button).toBeDisabled(); - expect(button).not.toHaveAttribute("aria-disabled"); - expect(button).not.toHaveClass("is-disabled"); + // The button should be disabled but not have the disabled attribute to allow for focus and displaying the tooltip + expect(button).not.toBeDisabled(); + expect(button).toHaveAttribute("aria-disabled"); + expect(button).toHaveClass("is-disabled"); await userEvent.click(button); expect(onClick).not.toHaveBeenCalled(); }); - it("does not prevent default when disabling a button", async () => { - render(); - const button = screen.getByRole("button"); - const clickEvent = createEvent.click(button); - fireEvent(button, clickEvent); - expect(clickEvent.defaultPrevented).toBe(false); - }); - it("correctly disables a link", async () => { const onClick = jest.fn(); render( diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 6db834be2..64f2b5b29 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -88,21 +88,19 @@ const Button =
({
{
"has-icon": hasIcon,
"is-dense": dense,
- "is-disabled": Component !== "button" && disabled,
+ "is-disabled": disabled,
"is-inline": inline,
"is-small": small,
},
className
);
const onClickDisabled = (e: MouseEvent) => e.preventDefault();
- const disabledProp =
- Component === "button" ? { disabled } : { "aria-disabled": disabled };
return (