fix(Button): apply external styles when disabled (#2060)

- apply passed in class names to disabled wrapper, not the actual button
chanzuckerberg · Sep 26, 2024 · e762d8b · e762d8b
1 parent ffd0e82
commit e762d8b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 28 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -43,13 +43,13 @@ export const DefaultRanks: Story = {
   render: (args) => {
     return (
       <div className="flex gap-1">
-        <Button {...args} rank="primary">
+        <Button {...args} className="btn-primary" rank="primary">
           Primary
         </Button>
-        <Button {...args} rank="secondary">
+        <Button {...args} className="btn-secondary" rank="secondary">
           Secondary
         </Button>
-        <Button {...args} rank="tertiary">
+        <Button {...args} className="btn-tertiary" rank="tertiary">
           Tertiary
         </Button>
       </div>

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -124,7 +124,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       rank && styles[`button--${rank}`],
       size && styles[`button--${size}`],
       variant && styles[`button--variant-${variant}`],
-      className,
+      !isDisabled && className,
     );
 
     const buttonContentClassName = clsx(
@@ -186,7 +186,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     // Wrap the button in a simple SPAN to allow for adding the not-allowed cursor
     return isDisabled ? (
-      <span className={styles['button__disabled']}>{coreButton}</span>
+      <span className={clsx(className, styles['button__disabled'])}>
+        {coreButton}
+      </span>
     ) : (
       coreButton
     );

diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
   class="flex gap-1"
 >
   <button
-    class="button button--layout-none button--primary button--lg button--variant-critical"
+    class="button button--layout-none button--primary button--lg button--variant-critical btn-primary"
     type="button"
   >
     <span
@@ -15,7 +15,7 @@ exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
     </span>
   </button>
   <button
-    class="button button--layout-none button--secondary button--lg button--variant-critical"
+    class="button button--layout-none button--secondary button--lg button--variant-critical btn-secondary"
     type="button"
   >
     <span
@@ -25,7 +25,7 @@ exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
     </span>
   </button>
   <button
-    class="button button--layout-none button--tertiary button--lg button--variant-critical"
+    class="button button--layout-none button--tertiary button--lg button--variant-critical btn-tertiary"
     type="button"
   >
     <span
@@ -55,7 +55,7 @@ exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
   class="flex gap-1"
 >
   <button
-    class="button button--layout-none button--primary button--lg button--variant-default"
+    class="button button--layout-none button--primary button--lg button--variant-default btn-primary"
     type="button"
   >
     <span
@@ -65,7 +65,7 @@ exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
     </span>
   </button>
   <button
-    class="button button--layout-none button--secondary button--lg button--variant-default"
+    class="button button--layout-none button--secondary button--lg button--variant-default btn-secondary"
     type="button"
   >
     <span
@@ -75,7 +75,7 @@ exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
     </span>
   </button>
   <button
-    class="button button--layout-none button--tertiary button--lg button--variant-default"
+    class="button button--layout-none button--tertiary button--lg button--variant-default btn-tertiary"
     type="button"
   >
     <span
@@ -92,7 +92,7 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
   class="flex gap-1"
 >
   <span
-    class="button__disabled"
+    class="btn-primary button__disabled"
   >
     <button
       class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
@@ -107,7 +107,7 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
     </button>
   </span>
   <span
-    class="button__disabled"
+    class="btn-secondary button__disabled"
   >
     <button
       class="button button--layout-none button--disabled button--secondary button--lg button--variant-default"
@@ -122,7 +122,7 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
     </button>
   </span>
   <span
-    class="button__disabled"
+    class="btn-tertiary button__disabled"
   >
     <button
       class="button button--layout-none button--disabled button--tertiary button--lg button--variant-default"
@@ -263,7 +263,7 @@ exports[`<Button /> InverseDisabledRanks story renders snapshot 1`] = `
     class="flex gap-1"
   >
     <span
-      class="button__disabled"
+      class="btn-primary button__disabled"
     >
       <button
         class="button button--layout-none button--disabled button--primary button--lg button--variant-inverse"
@@ -278,7 +278,7 @@ exports[`<Button /> InverseDisabledRanks story renders snapshot 1`] = `
       </button>
     </span>
     <span
-      class="button__disabled"
+      class="btn-secondary button__disabled"
     >
       <button
         class="button button--layout-none button--disabled button--secondary button--lg button--variant-inverse"
@@ -293,7 +293,7 @@ exports[`<Button /> InverseDisabledRanks story renders snapshot 1`] = `
       </button>
     </span>
     <span
-      class="button__disabled"
+      class="btn-tertiary button__disabled"
     >
       <button
         class="button button--layout-none button--disabled button--tertiary button--lg button--variant-inverse"
@@ -319,7 +319,7 @@ exports[`<Button /> InverseRanks story renders snapshot 1`] = `
     class="flex gap-1"
   >
     <button
-      class="button button--layout-none button--primary button--lg button--variant-inverse"
+      class="button button--layout-none button--primary button--lg button--variant-inverse btn-primary"
       type="button"
     >
       <span
@@ -329,7 +329,7 @@ exports[`<Button /> InverseRanks story renders snapshot 1`] = `
       </span>
     </button>
     <button
-      class="button button--layout-none button--secondary button--lg button--variant-inverse"
+      class="button button--layout-none button--secondary button--lg button--variant-inverse btn-secondary"
       type="button"
     >
       <span
@@ -339,7 +339,7 @@ exports[`<Button /> InverseRanks story renders snapshot 1`] = `
       </span>
     </button>
     <button
-      class="button button--layout-none button--tertiary button--lg button--variant-inverse"
+      class="button button--layout-none button--tertiary button--lg button--variant-inverse btn-tertiary"
       type="button"
     >
       <span
@@ -360,7 +360,7 @@ exports[`<Button /> JustDisabledProp story renders snapshot 1`] = `
     class="flex gap-1"
   >
     <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
+      class="button button--layout-none button--primary button--lg button--variant-default btn-primary"
       disabled=""
       type="button"
     >
@@ -371,7 +371,7 @@ exports[`<Button /> JustDisabledProp story renders snapshot 1`] = `
       </span>
     </button>
     <button
-      class="button button--layout-none button--secondary button--lg button--variant-default"
+      class="button button--layout-none button--secondary button--lg button--variant-default btn-secondary"
       disabled=""
       type="button"
     >
@@ -382,7 +382,7 @@ exports[`<Button /> JustDisabledProp story renders snapshot 1`] = `
       </span>
     </button>
     <button
-      class="button button--layout-none button--tertiary button--lg button--variant-default"
+      class="button button--layout-none button--tertiary button--lg button--variant-default btn-tertiary"
       disabled=""
       type="button"
     >
@@ -582,7 +582,7 @@ exports[`<Button /> NeutralRanks story renders snapshot 1`] = `
   class="flex gap-1"
 >
   <button
-    class="button button--layout-none button--primary button--lg button--variant-neutral"
+    class="button button--layout-none button--primary button--lg button--variant-neutral btn-primary"
     type="button"
   >
     <span
@@ -592,7 +592,7 @@ exports[`<Button /> NeutralRanks story renders snapshot 1`] = `
     </span>
   </button>
   <button
-    class="button button--layout-none button--secondary button--lg button--variant-neutral"
+    class="button button--layout-none button--secondary button--lg button--variant-neutral btn-secondary"
     type="button"
   >
     <span
@@ -602,7 +602,7 @@ exports[`<Button /> NeutralRanks story renders snapshot 1`] = `
     </span>
   </button>
   <button
-    class="button button--layout-none button--tertiary button--lg button--variant-neutral"
+    class="button button--layout-none button--tertiary button--lg button--variant-neutral btn-tertiary"
     type="button"
   >
     <span

diff --git a/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap b/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap
@@ -167,10 +167,10 @@ exports[`<SearchField /> Disabled story renders snapshot 1`] = `
       </svg>
     </div>
     <span
-      class="button__disabled"
+      class="search-button button__disabled"
     >
       <button
-        class="button button--layout-none button--disabled button--primary button--lg button--variant-default search-button"
+        class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
         disabled=""
         type="button"
       >