feat(Button): support for not-allowed cursor when disabled (#2052)

chanzuckerberg · Sep 3, 2024 · 46cb9f6 · 46cb9f6
1 parent 7812688
commit 46cb9f6
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 85 deletions.
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -263,23 +263,21 @@
  * Disabled
  */
 .button--disabled {
+  pointer-events: none;
+
   &.button--primary.button--variant-default,
   &.button--primary.button--variant-critical,
   &.button--primary.button--variant-neutral {
     color: var(--eds-theme-color-text-utility-disabled-primary);
     border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
     background-color:  var(--eds-theme-color-background-utility-disabled-medium-emphasis);
-
-    pointer-events: none;
   }
 
   &.button--primary.button--variant-inverse {
     color: var(--eds-theme-color-text-utility-inverse-disabled);
     /* Using transparent for border color to avoid blending opacity of border and background */
     border-color: transparent;
     background-color: var(--eds-theme-color-background-utility-inverse-disabled);
-
-    pointer-events: none;
   }
 
   &.button--secondary.button--variant-default,
@@ -288,34 +286,30 @@
     color: var(--eds-theme-color-text-utility-disabled-primary);
     border-color: var(--eds-theme-color-border-disabled);
     background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
-
-    pointer-events: none;
   }
 
   &.button--secondary.button--variant-inverse {
     color: var(--eds-theme-color-text-utility-inverse-disabled);
     border-color: var(--eds-theme-color-border-utility-inverse-disabled);
-
-    pointer-events: none;
   }
 
   &.button--tertiary.button--variant-default,
   &.button--tertiary.button--variant-critical,
   &.button--tertiary.button--variant-neutral {
     color: var(--eds-theme-color-text-utility-disabled-primary);
     background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
-
-    pointer-events: none;
   }
 
   &.button--tertiary.button--variant-inverse {
     color: var(--eds-theme-color-text-utility-disabled-primary);
     border-color: transparent;
-
-    pointer-events: none;
   }
 }
 
+.button__disabled {
+  cursor: not-allowed;
+}
+
 /**
  * Flag usages of just :disabled as erroneous
  */

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -116,14 +116,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) => {
     const componentClassName = clsx(
       styles['button'],
-      context && clsx(styles[`button--context-${context}`]),
-      iconLayout && clsx(styles[`button--layout-${iconLayout}`]),
-      isDisabled && clsx(styles['button--disabled']),
-      isFullWidth && clsx(styles['button--full-width']),
-      isLoading && clsx(styles['button--loading']),
-      rank && clsx(styles[`button--${rank}`]),
-      size && clsx(styles[`button--${size}`]),
-      variant && clsx(styles[`button--variant-${variant}`]),
+      context && styles[`button--context-${context}`],
+      iconLayout && styles[`button--layout-${iconLayout}`],
+      isDisabled && styles['button--disabled'],
+      isFullWidth && styles['button--full-width'],
+      isLoading && styles['button--loading'],
+      rank && styles[`button--${rank}`],
+      size && styles[`button--${size}`],
+      variant && styles[`button--variant-${variant}`],
       className,
     );
 
@@ -137,7 +137,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         typeof isDisabled === 'undefined' &&
           typeof other.disabled !== 'undefined',
       ],
-      'Use "isDisabled" instead of "disabled" on button instances',
+      'Use "isDisabled" instead of "disabled" on Button instances',
       'error',
     );
 
@@ -146,7 +146,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       'Specifying content for "children" when using icon-only layout is not required and can be removed.',
     );
 
-    return (
+    const coreButton = (
       <Component
         className={componentClassName}
         disabled={isDisabled}
@@ -183,6 +183,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
       </Component>
     );
+
+    // Wrap the button in a simple SPAN to allow for adding the not-allowed cursor
+    return isDisabled ? (
+      <span 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
@@ -91,39 +91,51 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
 <div
   class="flex gap-1"
 >
-  <button
-    class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
-    disabled=""
-    type="button"
+  <span
+    class="button__disabled"
   >
-    <span
-      class="button__text"
+    <button
+      class="button button--layout-none button--disabled button--primary button--lg button--variant-default"
+      disabled=""
+      type="button"
     >
-      Primary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--disabled button--secondary button--lg button--variant-default"
-    disabled=""
-    type="button"
+      <span
+        class="button__text"
+      >
+        Primary
+      </span>
+    </button>
+  </span>
+  <span
+    class="button__disabled"
   >
-    <span
-      class="button__text"
+    <button
+      class="button button--layout-none button--disabled button--secondary button--lg button--variant-default"
+      disabled=""
+      type="button"
     >
-      Secondary
-    </span>
-  </button>
-  <button
-    class="button button--layout-none button--disabled button--tertiary button--lg button--variant-default"
-    disabled=""
-    type="button"
+      <span
+        class="button__text"
+      >
+        Secondary
+      </span>
+    </button>
+  </span>
+  <span
+    class="button__disabled"
   >
-    <span
-      class="button__text"
+    <button
+      class="button button--layout-none button--disabled button--tertiary button--lg button--variant-default"
+      disabled=""
+      type="button"
     >
-      Tertiary
-    </span>
-  </button>
+      <span
+        class="button__text"
+      >
+        Tertiary
+      </span>
+    </button>
+  </span>
 </div>
 `;
 
@@ -250,39 +262,51 @@ exports[`<Button /> InverseDisabledRanks story renders snapshot 1`] = `
   <div
     class="flex gap-1"
   >
-    <button
-      class="button button--layout-none button--disabled button--primary button--lg button--variant-inverse"
-      disabled=""
-      type="button"
+    <span
+      class="button__disabled"
     >
-      <span
-        class="button__text"
+      <button
+        class="button button--layout-none button--disabled button--primary button--lg button--variant-inverse"
+        disabled=""
+        type="button"
       >
-        Primary
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--disabled button--secondary button--lg button--variant-inverse"
-      disabled=""
-      type="button"
+        <span
+          class="button__text"
+        >
+          Primary
+        </span>
+      </button>
+    </span>
+    <span
+      class="button__disabled"
     >
-      <span
-        class="button__text"
+      <button
+        class="button button--layout-none button--disabled button--secondary button--lg button--variant-inverse"
+        disabled=""
+        type="button"
       >
-        Secondary
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--disabled button--tertiary button--lg button--variant-inverse"
-      disabled=""
-      type="button"
+        <span
+          class="button__text"
+        >
+          Secondary
+        </span>
+      </button>
+    </span>
+    <span
+      class="button__disabled"
     >
-      <span
-        class="button__text"
+      <button
+        class="button button--layout-none button--disabled button--tertiary button--lg button--variant-inverse"
+        disabled=""
+        type="button"
       >
-        Tertiary
-      </span>
-    </button>
+        <span
+          class="button__text"
+        >
+          Tertiary
+        </span>
+      </button>
+    </span>
   </div>
 </div>
 `;

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