diff --git a/src/button-dropdown/__tests__/button-dropdown.test.tsx b/src/button-dropdown/__tests__/button-dropdown.test.tsx index 1f8cad6af5..666c8f0c79 100644 --- a/src/button-dropdown/__tests__/button-dropdown.test.tsx +++ b/src/button-dropdown/__tests__/button-dropdown.test.tsx @@ -100,42 +100,63 @@ const items: ButtonDropdownProps.Items = [ expect(renderedItems.length).toEqual(0); expect(wrapper.findOpenDropdown()).toBe(null); }); + }); + }); + + (['normal', 'primary'] as Array).forEach(variant => { + describe(`"${variant}" variant 'disabled with reason`, () => { + const props = { expandToViewport, variant }; + + // disabledReason behavior is already tested for button component, which acts as the trigger for this component + // here we need to check the basic logic without diving deep into details + test('open tooltip on mouseenter', () => { + const wrapper = renderButtonDropdown({ + ...props, + items, + disabled: true, + disabledReason: 'disabled reason', + }); + + fireEvent.mouseEnter(wrapper.findTriggerButton()!.getElement()); + + expect(wrapper.findTriggerButton()!.findDisabledReason()).not.toBeNull(); + expect(wrapper.findTriggerButton()!.findDisabledReason()!.getElement()).toHaveTextContent('reason'); + }); - describe('disabled with reason', () => { - // disabledReason behavior is already tested for button component, which acts as the trigger for this component - // here we need to check the basic logic without diving deep into details - test('open tooltip on mouseenter', () => { - const wrapper = renderButtonDropdown({ - ...props, - items, - disabled: true, - disabledReason: 'disabled reason', - }); - - fireEvent.mouseEnter(wrapper.findTriggerButton()!.getElement()); - - expect(wrapper.findTriggerButton()!.findDisabledReason()).not.toBeNull(); - expect(wrapper.findTriggerButton()!.findDisabledReason()!.getElement()).toHaveTextContent('reason'); + test('close tooltip on mouseleave', () => { + const wrapper = renderButtonDropdown({ + ...props, + items, + disabled: true, + disabledReason: 'disabled reason', }); - test('close tooltip on mouseleave', () => { - const wrapper = renderButtonDropdown({ - ...props, - items, - disabled: true, - disabledReason: 'disabled reason', - }); + fireEvent.mouseEnter(wrapper.findTriggerButton()!.getElement()); - fireEvent.mouseEnter(wrapper.findTriggerButton()!.getElement()); + expect(wrapper.findTriggerButton()!.findDisabledReason()).not.toBeNull(); + expect(wrapper.findTriggerButton()!.findDisabledReason()!.getElement()).toHaveTextContent('reason'); - expect(wrapper.findTriggerButton()!.findDisabledReason()).not.toBeNull(); - expect(wrapper.findTriggerButton()!.findDisabledReason()!.getElement()).toHaveTextContent('reason'); + fireEvent.mouseLeave(wrapper.findTriggerButton()!.getElement()); + + expect(wrapper.findTriggerButton()!.findDisabledReason()).toBeNull(); + }); + }); + }); - fireEvent.mouseLeave(wrapper.findTriggerButton()!.getElement()); + describe(`"icon" variant 'disabled with reason`, () => { + const props = { expandToViewport, variant: 'icon' as ButtonDropdownProps['variant'] }; - expect(wrapper.findTriggerButton()!.findDisabledReason()).toBeNull(); - }); + test('does not open tooltip on mouseenter', () => { + const wrapper = renderButtonDropdown({ + ...props, + items, + disabled: true, + disabledReason: 'disabled reason', }); + + fireEvent.mouseEnter(wrapper.findTriggerButton()!.getElement()); + + expect(wrapper.findTriggerButton()!.findDisabledReason()).toBeNull(); }); }); diff --git a/src/button/internal.tsx b/src/button/internal.tsx index 2647afac4b..359782f60a 100644 --- a/src/button/internal.tsx +++ b/src/button/internal.tsx @@ -78,8 +78,8 @@ export const InternalButton = React.forwardRef( checkSafeUrl('Button', href); const isAnchor = Boolean(href); const isNotInteractive = loading || disabled; - const hasAriaDisabled = (loading && !disabled) || (disabled && __focusable) || (disabled && !!disabledReason); - const isDisabledWithReason = !!disabledReason && disabled; + const isDisabledWithReason = (variant === 'normal' || variant === 'primary') && !!disabledReason && disabled; + const hasAriaDisabled = (loading && !disabled) || (disabled && __focusable) || isDisabledWithReason; const shouldHaveContent = children && ['icon', 'inline-icon', 'flashbar-icon', 'modal-dismiss'].indexOf(variant) === -1;