chore: Make disabledReason prop applicable only for normal and primar…

…y variants
cloudscape-design · Jul 8, 2024 · b675692 · b675692
1 parent 8368333
commit b675692
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 30 deletions.
diff --git 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<ButtonDropdownProps['variant']>).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
@@ -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;