fix(Button): add in missing inverse disabled treatments (#1976)

- fix up the styling for border on disabled inverse button
- add styles for remaining inverse disabled ranks
- add stories

src/components/Button/Button-v2.module.css

@@ -272,7 +272,8 @@
 
 .button--primary.button--variant-inverse.button--disabled {
   color: var(--eds-theme-color-text-utility-inverse-disabled);
-  border-color: var(--eds-theme-color-background-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;
@@ -288,6 +289,13 @@
   pointer-events: none;
 }
 
+.button--secondary.button--variant-inverse.button--disabled {
+  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--disabled,
 .button--tertiary.button--variant-critical.button--disabled,
 .button--tertiary.button--variant-neutral.button--disabled {
@@ -297,6 +305,13 @@
   pointer-events: none;
 }
 
+.button--tertiary.button--variant-inverse.button--disabled {
+  color: var(--eds-theme-color-text-utility-disabled-primary);
+  border-color: transparent;
+
+  pointer-events: none;
+}
+
 /**
  * States
  */

src/components/Button/Button-v2.stories.tsx

@@ -124,6 +124,24 @@ export const InverseRanks: StoryObj<Args> = {
   ],
 };
 
+/**
+ * Inverse buttons can be disabled as well
+ */
+export const InverseDisabledRanks: StoryObj<Args> = {
+  args: {
+    ...DefaultRanks.args,
+    variant: 'inverse',
+    isDisabled: true,
+  },
+  render: DefaultRanks.render,
+  // TODO: find a cleaner way to decorate with unavailable tokens using parameters:backgounds:
+  decorators: [
+    (Story) => (
+      <div className="bg-[var(--eds-color-blue-850)] p-1">{Story()}</div>
+    ),
+  ],
+};
+
 /**
  * Buttons come in three sizes
  */

src/components/Button/__snapshots__/Button-v2.test.tsx.snap

@@ -243,6 +243,50 @@ exports[`<Button /> (v2) IconLayouts story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Button /> (v2) InverseDisabledRanks story renders snapshot 1`] = `
+<div
+  class="bg-[var(--eds-color-blue-850)] p-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__text"
+      >
+        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"
+      >
+        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"
+      >
+        Tertiary
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`<Button /> (v2) InverseRanks story renders snapshot 1`] = `
 <div
   class="bg-[var(--eds-color-blue-850)] p-1"