feat(buttonpill): add disabled outline property

momentum-design · Dec 13, 2024 · bff5f17 · bff5f17
1 parent 830e8f7
commit bff5f17
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 4 deletions.
diff --git a/src/components/ButtonGroup/ButtonGroup.stories.tsx b/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -211,7 +211,15 @@ AudioVideoControls.parameters = {
     },
     {
       children: [
-        <ButtonPill outline ghost key="0" size={40} style={{ minWidth: '6.8rem' }}>
+        <ButtonPill
+          disabled
+          outline
+          disabledOutline
+          ghost
+          key="0"
+          size={40}
+          style={{ minWidth: '6.8rem' }}
+        >
           <Icon
             key="0"
             name="microphone-muted"
@@ -247,7 +255,15 @@ AudioVideoControls.parameters = {
     },
     {
       children: [
-        <ButtonPill outline ghost key="0" size={40} style={{ minWidth: '8.3rem' }}>
+        <ButtonPill
+          outline
+          disabled
+          disabledOutline
+          ghost
+          key="0"
+          size={40}
+          style={{ minWidth: '8.3rem' }}
+        >
           <Icon key="0" name="camera-muted" strokeColor="#FC8B98" autoScale={125} />
           <div key="1">Start Video</div>
         </ButtonPill>,
@@ -261,7 +277,7 @@ AudioVideoControls.parameters = {
     {
       children: [
         <ButtonPill outline ghost key="0" size={40} style={{ minWidth: '8.3rem' }}>
-          <Icon key="0" name="camera-muted" strokeColor="#FC8B98" autoScale={125} />
+          <Icon key="0" name="camera-on" autoScale={125} />
           <div key="1">Long Label Possibly German</div>
         </ButtonPill>,
         <ButtonCircle outline ghost key="1" size={40}>
@@ -275,7 +291,7 @@ AudioVideoControls.parameters = {
       children: [
         <div key="0" {...ButtonGroup.CHILD_PROPS} style={{ fontSize: '0.8rem' }} data-compressed>
           <ButtonPill outline ghost size={40} style={{ minWidth: '8.3rem' }}>
-            <Icon key="0" name="camera-muted" strokeColor="#FC8B98" autoScale={125} />
+            <Icon key="0" name="camera-on" autoScale={125} />
             <div key="1">Long Label Possibly German</div>
           </ButtonPill>
         </div>,

diff --git a/src/components/ButtonPill/ButtonPill.constants.ts b/src/components/ButtonPill/ButtonPill.constants.ts
@@ -3,6 +3,7 @@ const CLASS_PREFIX = 'md-button-pill';
 const DEFAULTS = {
   COLOR: 'primary',
   DISABLED: false,
+  DISABLED_OUTLINE: false,
   SHALLOW_DISABLED: false,
   GHOST: false,
   GROWN: false,

diff --git a/src/components/ButtonPill/ButtonPill.stories.args.ts b/src/components/ButtonPill/ButtonPill.stories.args.ts
@@ -62,6 +62,20 @@ export default {
       },
     },
   },
+  disabledOutline: {
+    description:
+      'Whether to render the `<ButtonPill />` with an outline even when disabled/shallowDisabled. Respects existing outline prop and will not display outline if outline is false.',
+    options: [true, false],
+    control: { type: 'boolean' },
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.SHALLOW_DISABLED,
+      },
+    },
+  },
   ghost: {
     description: 'Whether this component has a transparent background.',
     options: [true, false],

diff --git a/src/components/ButtonPill/ButtonPill.style.scss b/src/components/ButtonPill/ButtonPill.style.scss
@@ -225,6 +225,10 @@
       cursor: auto;
     }
 
+    &[data-disabled-outline='true'] {
+      border-color: var(--mds-color-theme-outline-button-normal);
+    }
+
     // C.1 color = join
     &[data-color='join'] {
       border-color: var(--mds-color-theme-outline-join-normal);
@@ -397,6 +401,10 @@
       cursor: auto;
     }
 
+    &[data-disabled-outline='true'] {
+      border-color: var(--mds-color-theme-outline-button-normal);
+    }
+
     // E.2 color = join
     &[data-color='join'] {
       background-color: var(--mds-color-theme-button-secondary-normal);
@@ -518,6 +526,10 @@
       cursor: auto;
     }
 
+    &[data-disabled-outline='true'] {
+      border-color: var(--mds-color-theme-outline-button-normal);
+    }
+
     // F.2 color = join
     &[data-color='join'] {
       background-color: var(--mds-color-theme-inverted-button-primary-normal);

diff --git a/src/components/ButtonPill/ButtonPill.tsx b/src/components/ButtonPill/ButtonPill.tsx
@@ -11,6 +11,7 @@ const ButtonPill = forwardRef((props: Props, providedRef: RefObject<HTMLButtonEl
     className,
     color,
     disabled,
+    disabledOutline,
     shallowDisabled,
     ghost,
     grown,
@@ -37,6 +38,7 @@ const ButtonPill = forwardRef((props: Props, providedRef: RefObject<HTMLButtonEl
       data-outline={outline || DEFAULTS.OUTLINE}
       data-size={size || DEFAULTS.SIZE}
       data-inverted={inverted || DEFAULTS.INVERTED}
+      data-disabled-outline={disabledOutline || DEFAULTS.DISABLED_OUTLINE}
       isDisabled={disabled}
       {...otherProps}
     />

diff --git a/src/components/ButtonPill/ButtonPill.types.ts b/src/components/ButtonPill/ButtonPill.types.ts
@@ -17,6 +17,11 @@ export interface Props extends ButtonSimpleProps {
    */
   disabled?: boolean;
 
+  /**
+   * Whether or not this ButtonPill has an outline even when disabled. Respects existing outline prop and will not display outline if outline is false.
+   */
+  disabledOutline?: boolean;
+
   /**
    * Whether or not this ButtonPill should look disabled, but allowing actions like onPress to be passed.
    */

diff --git a/src/components/ButtonPill/ButtonPill.unit.test.tsx b/src/components/ButtonPill/ButtonPill.unit.test.tsx
@@ -88,6 +88,32 @@ describe('<ButtonPill />', () => {
       expect(container).toMatchSnapshot();
     });
 
+    it('should match snapshot when disabledOutline', () => {
+      expect.assertions(1);
+
+      const disabledOutline = !DEFAULTS.DISABLED_OUTLINE;
+
+      container = mount(<ButtonPill disabledOutline={disabledOutline}>Example Text</ButtonPill>);
+
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should match snapshot when disabledOutline and disabled and outline', () => {
+      expect.assertions(1);
+
+      const disabledOutline = !DEFAULTS.DISABLED_OUTLINE;
+      const outline = !DEFAULTS.OUTLINE;
+      const disabled = !DEFAULTS.DISABLED;
+
+      container = mount(
+        <ButtonPill outline={outline} disabled={disabled} disabledOutline={disabledOutline}>
+          Example Text
+        </ButtonPill>
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+
     it('should match snapshot when a ghost', () => {
       expect.assertions(1);
 
@@ -232,6 +258,18 @@ describe('<ButtonPill />', () => {
       expect(element.getAttribute('aria-disabled')).toBe('true');
     });
 
+    it('should pass disabled outline prop', () => {
+      expect.assertions(1);
+
+      const disabledOutline = !DEFAULTS.DISABLED_OUTLINE;
+
+      const element = mount(<ButtonPill disabledOutline={disabledOutline} />)
+        .find(ButtonPill)
+        .getDOMNode();
+
+      expect(element.getAttribute('data-disabled-outline')).toBe(`${disabledOutline}`);
+    });
+
     it('should pass ghost prop', () => {
       expect.assertions(1);