From d83dc00313426ab30cbe535ba03af68b23c86f4a Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Fri, 30 Aug 2024 13:27:48 -0500
Subject: [PATCH] feat(Button): support for not-allowed cursor when disabled

---
 src/components/Button/Button.module.css       |  18 +--
 src/components/Button/Button.tsx              |  27 ++--
 .../Button/__snapshots__/Button.test.tsx.snap | 132 +++++++++++-------
 .../__snapshots__/SearchBar.test.ts.snap      |  22 +--
 4 files changed, 114 insertions(+), 85 deletions(-)

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index a25873dfb..46fbee3ed 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -263,14 +263,14 @@
  * 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 {
@@ -278,8 +278,6 @@
     /* 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,15 +286,11 @@
     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,
@@ -304,18 +298,18 @@
   &.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
index 5bd101876..76f40b1e0 100644
--- 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
index f32fc092f..ada3371b1 100644
--- 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
index aa9c68811..7102efcf5 100644
--- 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>
 `;