feat(only-triggers-tooltip): add onlyTriggersTooltip prop to ButtonCi…

…rcle and ButtonPill
momentum-design · Aug 19, 2024 · f5582de · f5582de
1 parent 6880906
commit f5582de
Show file tree

Hide file tree

Showing 37 changed files with 683 additions and 20 deletions.
diff --git a/src/components/AddReactionButton/AddReactionButton.unit.test.tsx.snap b/src/components/AddReactionButton/AddReactionButton.unit.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<AddReactionButton /> snapshot should match snapshot 1`] = `
       data-ghost={false}
       data-inverted={false}
       data-multiple-children={false}
+      data-only-triggers-tooltip={false}
       data-outline={false}
       data-shallow-disabled={false}
       data-size={20}
@@ -30,6 +31,7 @@ exports[`<AddReactionButton /> snapshot should match snapshot 1`] = `
             data-ghost={false}
             data-inverted={false}
             data-multiple-children={false}
+            data-only-triggers-tooltip={false}
             data-outline={false}
             data-shallow-disabled={false}
             data-size={20}
@@ -96,6 +98,7 @@ exports[`<AddReactionButton /> snapshot should match snapshot with className 1`]
       data-ghost={false}
       data-inverted={false}
       data-multiple-children={false}
+      data-only-triggers-tooltip={false}
       data-outline={false}
       data-shallow-disabled={false}
       data-size={20}
@@ -112,6 +115,7 @@ exports[`<AddReactionButton /> snapshot should match snapshot with className 1`]
             data-ghost={false}
             data-inverted={false}
             data-multiple-children={false}
+            data-only-triggers-tooltip={false}
             data-outline={false}
             data-shallow-disabled={false}
             data-size={20}
@@ -179,6 +183,7 @@ exports[`<AddReactionButton /> snapshot should match snapshot with id 1`] = `
       data-ghost={false}
       data-inverted={false}
       data-multiple-children={false}
+      data-only-triggers-tooltip={false}
       data-outline={false}
       data-shallow-disabled={false}
       data-size={20}
@@ -196,6 +201,7 @@ exports[`<AddReactionButton /> snapshot should match snapshot with id 1`] = `
             data-ghost={false}
             data-inverted={false}
             data-multiple-children={false}
+            data-only-triggers-tooltip={false}
             data-outline={false}
             data-shallow-disabled={false}
             data-size={20}
@@ -272,6 +278,7 @@ exports[`<AddReactionButton /> snapshot should match snapshot with style 1`] = `
       data-ghost={false}
       data-inverted={false}
       data-multiple-children={false}
+      data-only-triggers-tooltip={false}
       data-outline={false}
       data-shallow-disabled={false}
       data-size={20}
@@ -293,6 +300,7 @@ exports[`<AddReactionButton /> snapshot should match snapshot with style 1`] = `
             data-ghost={false}
             data-inverted={false}
             data-multiple-children={false}
+            data-only-triggers-tooltip={false}
             data-outline={false}
             data-shallow-disabled={false}
             data-size={20}

diff --git a/src/components/AriaToolbarItem/AriaToolbarItem.unit.test.tsx.snap b/src/components/AriaToolbarItem/AriaToolbarItem.unit.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`<AriaToolbarItem /> snapshot should match snapshot 1`] = `
         data-ghost={false}
         data-grown={false}
         data-inverted={false}
+        data-only-triggers-tooltip={false}
         data-outline={false}
         data-shallow-disabled={false}
         data-size={40}
@@ -41,6 +42,7 @@ exports[`<AriaToolbarItem /> snapshot should match snapshot 1`] = `
               data-ghost={false}
               data-grown={false}
               data-inverted={false}
+              data-only-triggers-tooltip={false}
               data-outline={false}
               data-shallow-disabled={false}
               data-size={40}

diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx.snap b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx.snap
@@ -510,6 +510,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
                   data-ghost={true}
                   data-inverted={false}
                   data-multiple-children={false}
+                  data-only-triggers-tooltip={false}
                   data-outline={false}
                   data-shallow-disabled={false}
                   data-size={28}
@@ -526,6 +527,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
                         data-ghost={true}
                         data-inverted={false}
                         data-multiple-children={false}
+                        data-only-triggers-tooltip={false}
                         data-outline={false}
                         data-shallow-disabled={false}
                         data-size={28}
@@ -706,6 +708,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
                   data-ghost={true}
                   data-inverted={false}
                   data-multiple-children={false}
+                  data-only-triggers-tooltip={false}
                   data-outline={false}
                   data-shallow-disabled={false}
                   data-size={28}
@@ -722,6 +725,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
                         data-ghost={true}
                         data-inverted={false}
                         data-multiple-children={false}
+                        data-only-triggers-tooltip={false}
                         data-outline={false}
                         data-shallow-disabled={false}
                         data-size={28}
@@ -907,6 +911,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
                   data-ghost={true}
                   data-inverted={false}
                   data-multiple-children={false}
+                  data-only-triggers-tooltip={false}
                   data-outline={false}
                   data-shallow-disabled={false}
                   data-size={28}
@@ -923,6 +928,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
                         data-ghost={true}
                         data-inverted={false}
                         data-multiple-children={false}
+                        data-only-triggers-tooltip={false}
                         data-outline={false}
                         data-shallow-disabled={false}
                         data-size={28}

diff --git a/src/components/Banner/Banner.unit.test.tsx.snap b/src/components/Banner/Banner.unit.test.tsx.snap
@@ -134,6 +134,7 @@ exports[`<Banner /> snapshot should match a complex snapshot 1`] = `
               data-ghost={false}
               data-inverted={false}
               data-multiple-children={false}
+              data-only-triggers-tooltip={false}
               data-outline={false}
               data-shallow-disabled={false}
               data-size={40}
@@ -150,6 +151,7 @@ exports[`<Banner /> snapshot should match a complex snapshot 1`] = `
                     data-ghost={false}
                     data-inverted={false}
                     data-multiple-children={false}
+                    data-only-triggers-tooltip={false}
                     data-outline={false}
                     data-shallow-disabled={false}
                     data-size={40}
@@ -208,6 +210,7 @@ exports[`<Banner /> snapshot should match a complex snapshot 1`] = `
               data-ghost={false}
               data-inverted={false}
               data-multiple-children={false}
+              data-only-triggers-tooltip={false}
               data-outline={false}
               data-shallow-disabled={false}
               data-size={40}
@@ -224,6 +227,7 @@ exports[`<Banner /> snapshot should match a complex snapshot 1`] = `
                     data-ghost={false}
                     data-inverted={false}
                     data-multiple-children={false}
+                    data-only-triggers-tooltip={false}
                     data-outline={false}
                     data-shallow-disabled={false}
                     data-size={40}
@@ -412,6 +416,7 @@ exports[`<Banner /> snapshot should match snapshot with actions 1`] = `
               data-ghost={false}
               data-inverted={false}
               data-multiple-children={false}
+              data-only-triggers-tooltip={false}
               data-outline={false}
               data-shallow-disabled={false}
               data-size={40}
@@ -428,6 +433,7 @@ exports[`<Banner /> snapshot should match snapshot with actions 1`] = `
                     data-ghost={false}
                     data-inverted={false}
                     data-multiple-children={false}
+                    data-only-triggers-tooltip={false}
                     data-outline={false}
                     data-shallow-disabled={false}
                     data-size={40}
@@ -486,6 +492,7 @@ exports[`<Banner /> snapshot should match snapshot with actions 1`] = `
               data-ghost={false}
               data-inverted={false}
               data-multiple-children={false}
+              data-only-triggers-tooltip={false}
               data-outline={false}
               data-shallow-disabled={false}
               data-size={40}
@@ -502,6 +509,7 @@ exports[`<Banner /> snapshot should match snapshot with actions 1`] = `
                     data-ghost={false}
                     data-inverted={false}
                     data-multiple-children={false}
+                    data-only-triggers-tooltip={false}
                     data-outline={false}
                     data-shallow-disabled={false}
                     data-size={40}

diff --git a/src/components/ButtonCircle/ButtonCircle.constants.ts b/src/components/ButtonCircle/ButtonCircle.constants.ts
@@ -10,6 +10,7 @@ const DEFAULTS = {
   OUTLINE: false,
   SIZE: 40,
   INVERTED: false,
+  ONLY_TRIGGERS_TOOLTIP: false,
 };
 
 const COLORS = {

diff --git a/src/components/ButtonCircle/ButtonCircle.stories.args.ts b/src/components/ButtonCircle/ButtonCircle.stories.args.ts
@@ -115,6 +115,20 @@ const buttonCircleArgTypes = {
       },
     },
   },
+  onlyTriggersTooltip: {
+    description:
+      'Whether the ButtonCircle is only a tooltip trigger and, thus, triggers no action on click/press',
+    options: [true, false],
+    control: { type: 'boolean' },
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.ONLY_TRIGGERS_TOOLTIP,
+      },
+    },
+  },
 };
 
 export { buttonCircleArgTypes };

diff --git a/src/components/ButtonCircle/ButtonCircle.stories.tsx b/src/components/ButtonCircle/ButtonCircle.stories.tsx
@@ -13,6 +13,9 @@ import AriaButtonDocs from '../../storybook/docs.stories.aria-button.mdx';
 import HTMLGlobalAttributes from '../../storybook/docs.stories.common-html-attributes.mdx';
 
 import ButtonCircle, { ButtonCircleProps } from './';
+import { Story } from '@storybook/react';
+import Tooltip from '../Tooltip';
+import Flex from '../Flex';
 import argTypes from './ButtonCircle.stories.args';
 import Documentation from './ButtonCircle.stories.docs.mdx';
 
@@ -239,6 +242,44 @@ Sizes.argTypes = { ...argTypes };
 delete Sizes.argTypes.children;
 delete Sizes.argTypes.size;
 
+const WithoutAction: Story = () => {
+  return (
+    <div>
+      <div style={{ marginBottom: '2rem' }}>
+        For accessibility reasons, informative icons (icons that do not trigger any action on click
+        but convey a meaning to the user) should have a visible label next to them or in a tooltip.
+        If a tooltip is used, the Icon needs to wrapped in a ButtonCircle onlyTriggersTooltip = true
+        to get no change in color on hover and pressed
+      </div>
+
+      <Flex direction="column" ygap="2rem">
+        <div>
+          <b>A. Icon with visible label next to it</b>
+          <Flex xgap="0.5rem">
+            <Icon name="recurring" scale={20} />
+            <div>Icon label </div>
+          </Flex>
+        </div>
+        <div>
+          <b>B. Icon with visible label in a tooltip</b>
+          <Tooltip
+            type="label"
+            triggerComponent={
+              <ButtonCircle onlyTriggersTooltip={true}>
+                <Icon name="recurring" scale={20} />
+              </ButtonCircle>
+            }
+          >
+            Icon label
+          </Tooltip>
+        </div>
+      </Flex>
+    </div>
+  );
+};
+
+WithoutAction.argTypes = {};
+
 const Common = MultiTemplate<ButtonCircleProps>(ButtonCircle).bind({});
 
 Common.argTypes = { ...argTypes };
@@ -308,5 +349,6 @@ export {
   GhostOutlineNotInverted,
   NotGhostOutlineInverted,
   Sizes,
+  WithoutAction,
   Common,
 };
diff --git a/src/components/ButtonCircle/ButtonCircle.style.scss b/src/components/ButtonCircle/ButtonCircle.style.scss
@@ -115,16 +115,18 @@
     background-color: var(--mds-color-theme-button-secondary-normal);
     color: var(--mds-color-theme-text-primary-normal);
 
-    &:hover,
-    &.hover {
-      background-color: var(--mds-color-theme-button-secondary-hover);
-      color: var(--mds-color-theme-text-primary-normal);
-    }
+    &[data-only-triggers-tooltip='false'] {
+      &:hover,
+      &.hover {
+        background-color: var(--mds-color-theme-button-secondary-hover);
+        color: var(--mds-color-theme-text-primary-normal);
+      }
 
-    &:active,
-    &.active {
-      background-color: var(--mds-color-theme-button-secondary-pressed);
-      color: var(--mds-color-theme-text-primary-normal);
+      &:active,
+      &.active {
+        background-color: var(--mds-color-theme-button-secondary-pressed);
+        color: var(--mds-color-theme-text-primary-normal);
+      }
     }
 
     &[data-disabled='true'],

diff --git a/src/components/ButtonCircle/ButtonCircle.tsx b/src/components/ButtonCircle/ButtonCircle.tsx
@@ -17,27 +17,35 @@ const ButtonCircle = forwardRef((props: Props, providedRef: RefObject<HTMLButton
     outline,
     inverted,
     size,
+    onlyTriggersTooltip,
     ...otherProps
   } = props;
 
   if (ghost && inverted) {
     console.warn('MRV2: Momentum does not support a ghost inverted ButtonCircle.');
   }
 
+  if (onlyTriggersTooltip && (outline || inverted || color || disabled || shallowDisabled)) {
+    console.warn(
+      'MRV2: Momentum does not support a button that onlyTriggersTooltip and is outline, inverted, has color, or is disabled'
+    );
+  }
+
   const multipleChildren = Children.count(children) > 1;
 
   return (
     <ButtonSimple
       className={classnames(STYLE.wrapper, className)}
       ref={providedRef}
       data-color={color || DEFAULTS.COLOR}
-      data-ghost={ghost || DEFAULTS.GHOST}
+      data-ghost={ghost || onlyTriggersTooltip || DEFAULTS.GHOST}
       data-multiple-children={multipleChildren}
       data-outline={outline || DEFAULTS.OUTLINE}
       data-size={size || DEFAULTS.SIZE}
       data-inverted={inverted || DEFAULTS.INVERTED}
       data-disabled={disabled || DEFAULTS.DISABLED}
       data-shallow-disabled={shallowDisabled || DEFAULTS.SHALLOW_DISABLED}
+      data-only-triggers-tooltip={onlyTriggersTooltip || DEFAULTS.ONLY_TRIGGERS_TOOLTIP}
       aria-disabled={shallowDisabled || DEFAULTS.SHALLOW_DISABLED}
       isDisabled={disabled}
       {...otherProps}

diff --git a/src/components/ButtonCircle/ButtonCircle.types.ts b/src/components/ButtonCircle/ButtonCircle.types.ts
@@ -41,4 +41,9 @@ export interface Props extends ButtonSimpleProps {
    * Size index of this ButtonCircle.
    */
   size?: Size;
+
+  /**
+   * Whether the ButtonCircle is only a tooltip trigger and, thus, triggers no action on click/press
+   */
+  onlyTriggersTooltip?: boolean;
 }
diff --git a/src/components/ButtonCircle/ButtonCircle.unit.test.tsx b/src/components/ButtonCircle/ButtonCircle.unit.test.tsx
@@ -125,6 +125,18 @@ describe('<ButtonCircle />', () => {
       expect(container).toMatchSnapshot();
     });
 
+    it('should match snapshot when onlyTriggersTooltip', () => {
+      expect.assertions(1);
+
+      const onlyTriggersTooltip = !DEFAULTS.ONLY_TRIGGERS_TOOLTIP;
+
+      const container = mount(
+        <ButtonCircle onlyTriggersTooltip={onlyTriggersTooltip}>X</ButtonCircle>
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+
     it('should match snapshot when color is outlined', () => {
       expect.assertions(1);
 
@@ -242,6 +254,18 @@ describe('<ButtonCircle />', () => {
       expect(element.getAttribute('data-ghost')).toBe(`${ghost}`);
     });
 
+    it('should pass onlyTriggersTooltip prop', () => {
+      expect.assertions(1);
+
+      const onlyTriggersTooltip = !DEFAULTS.ONLY_TRIGGERS_TOOLTIP;
+
+      const element = mount(<ButtonCircle onlyTriggersTooltip={onlyTriggersTooltip} />)
+        .find(ButtonCircle)
+        .getDOMNode();
+
+      expect(element.getAttribute('data-only-triggers-tooltip')).toBe(`${onlyTriggersTooltip}`);
+    });
+
     it('should pass outline prop', () => {
       expect.assertions(1);