fix(Button): align disabled treatment to latest design (#1931)

- disabled buttons use proper rank treatment
- size of icon-only variants make perfect circles
- change to used icon for example icon stories (using `circle`)
- update snapshots
- fix for critical secondary background color to use proper no-emphasis
  token
- implement neutral button

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

@@ -22,6 +22,11 @@
   justify-content: center;
 
   width: 100%;
+
+  .button--sm & {
+    /* Offset to better align text in small button */
+    transform: translateY(-1px);
+  }
 }
 
 .button__text.button--is-loading {
@@ -70,6 +75,7 @@
   min-width: 3rem;
   max-width: 12rem;
   max-height: 1.5rem;
+
 }
 
 .button--full-width {
@@ -78,6 +84,7 @@
 
 /**
  * Anatomy and iconLayout (w/ size)
+ * lg=40, md=32, sm=24 when layout is icon-only
  */
 .button--layout-icon-only {
   min-width: unset;
@@ -93,14 +100,17 @@
 
 .button--lg.button--layout-icon-only {
   padding: 0.5rem;
+  width: 2.5rem;
 }
 
 .button--md.button--layout-icon-only {
-  padding: 0.5rem
+  padding: 0.5rem;
+  width: 2rem;
 }
 
 .button--sm.button--layout-icon-only {
   padding: 0.25rem;
+  width: 1.5rem;
 }
 
 .button:focus-visible {
@@ -116,6 +126,7 @@
 
 /**
  * Rank & Emphasis
+ * TODO-AH: nest the states under the relevant variants/ranks
  */
 .button--primary.button--variant-default {
   color: var(--eds-theme-color-text-utility-inverse);
@@ -151,14 +162,62 @@
 .button--secondary.button--variant-critical {
   color: var(--eds-theme-color-background-utility-critical-high-emphasis);
   border-color: currentColor;
-  background-color:  var(--eds-theme-color-background-utility-inverse-high-emphasis);
+  background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis)
 }
 
 .button--tertiary.button--variant-critical {
   color: var(--eds-theme-color-background-utility-critical-high-emphasis);
   border-color:  var(--eds-theme-color-background-utility-inverse-high-emphasis);
 }
 
+.button--primary.button--variant-neutral {
+  color: var(--eds-theme-color-text-utility-inverse);
+  border-color: var(--eds-theme-color-background-utility-default-medium-emphasis);
+  background-color: var(--eds-theme-color-background-utility-default-medium-emphasis);
+
+  &:hover {
+    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
+    background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
+    background-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
+  }
+}
+
+.button--secondary.button--variant-neutral {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+  border-color: currentColor;
+  background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
+
+  &:hover {
+    border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-hover);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-border-utility-default-medium-emphasis-active);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
+  }
+}
+
+.button--tertiary.button--variant-neutral {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+  border-color: transparent;
+  background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
+
+  &:hover {
+    border-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
+  }
+}
+
 /**
  * Inverse
  */
@@ -185,23 +244,43 @@
  * Disabled
  */
 
-.button--variant-default.button--disabled,
-.button--variant-critical.button--disabled {
+.button--primary.button--variant-default.button--disabled,
+.button--primary.button--variant-critical.button--disabled,
+.button--primary.button--variant-neutral.button--disabled {
   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--variant-inverse.button--disabled {
+.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);
   background-color: var(--eds-theme-color-background-utility-inverse-disabled);
 
   pointer-events: none;
 }
 
+.button--secondary.button--variant-default.button--disabled,
+.button--secondary.button--variant-critical.button--disabled,
+.button--secondary.button--variant-neutral.button--disabled {
+  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--tertiary.button--variant-default.button--disabled,
+.button--tertiary.button--variant-critical.button--disabled,
+.button--tertiary.button--variant-neutral.button--disabled {
+  color: var(--eds-theme-color-text-utility-disabled-primary);
+  background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
+
+  pointer-events: none;
+}
+
 /**
  * States
  */

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

@@ -95,6 +95,17 @@ export const CriticalRanks: StoryObj<Args> = {
   render: DefaultRanks.render,
 };
 
+/**
+ * There is also a neutral variant, to combine into other components, or provide a muted appearance.
+ */
+export const NeutralRanks: StoryObj<Args> = {
+  args: {
+    ...DefaultRanks.args,
+    variant: 'neutral',
+  },
+  render: DefaultRanks.render,
+};
+
 /**
  * Each rank also includes an inverse variant, for use on dark backgrounds.
  */

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

@@ -6,7 +6,7 @@ import React from 'react';
 import { Button } from './Button-v2';
 import * as stories from './Button-v2.stories';
 
-describe('<Button />', () => {
+describe('<Button /> (v2)', () => {
   generateSnapshots(stories as StoryFile);
 
   it('renders the text in the button', () => {

src/components/Button/Button-v2.tsx

@@ -59,7 +59,7 @@ export type ButtonV2Props<ExtendedElement = unknown> =
      *
      * **Default is `"default"`**.
      */
-    variant?: 'default' | 'critical' | 'inverse';
+    variant?: 'default' | 'neutral' | 'critical' | 'inverse';
 
     /**
      * Whether the width of the button is set to the full layout.

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
+exports[`<Button /> (v2) CriticalRanks story renders snapshot 1`] = `
 <div
   class="flex gap-1"
 >
@@ -37,7 +37,7 @@ exports[`<Button /> CriticalRanks story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Button /> Default story renders snapshot 1`] = `
+exports[`<Button /> (v2) Default story renders snapshot 1`] = `
 <button
   class="button button--layout-none button--primary button--lg button--variant-default"
   type="button"
@@ -50,7 +50,7 @@ exports[`<Button /> Default story renders snapshot 1`] = `
 </button>
 `;
 
-exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
+exports[`<Button /> (v2) DefaultRanks story renders snapshot 1`] = `
 <div
   class="flex gap-1"
 >
@@ -87,7 +87,7 @@ exports[`<Button /> DefaultRanks story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Button /> Disabled story renders snapshot 1`] = `
+exports[`<Button /> (v2) Disabled story renders snapshot 1`] = `
 <div
   class="flex gap-1"
 >
@@ -127,7 +127,7 @@ exports[`<Button /> Disabled story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Button /> FullWidths story renders snapshot 1`] = `
+exports[`<Button /> (v2) FullWidths story renders snapshot 1`] = `
 <div
   class="flex items-center gap-1"
 >
@@ -164,7 +164,7 @@ exports[`<Button /> FullWidths story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Button /> IconLayouts story renders snapshot 1`] = `
+exports[`<Button /> (v2) IconLayouts story renders snapshot 1`] = `
 <div
   class="flex items-center gap-1"
 >
@@ -243,7 +243,7 @@ exports[`<Button /> IconLayouts story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Button /> InverseRanks story renders snapshot 1`] = `
+exports[`<Button /> (v2) InverseRanks story renders snapshot 1`] = `
 <div
   class="bg-[var(--eds-color-blue-850)] p-1"
 >
@@ -284,7 +284,7 @@ exports[`<Button /> InverseRanks story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Button /> LoadingStates story renders snapshot 1`] = `
+exports[`<Button /> (v2) LoadingStates story renders snapshot 1`] = `
 <div
   class="flex items-center gap-1"
 >
@@ -465,7 +465,44 @@ exports[`<Button /> LoadingStates story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Button /> Sizes story renders snapshot 1`] = `
+exports[`<Button /> (v2) NeutralRanks story renders snapshot 1`] = `
+<div
+  class="flex gap-1"
+>
+  <button
+    class="button button--layout-none button--primary button--lg button--variant-neutral"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Primary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--secondary button--lg button--variant-neutral"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    class="button button--layout-none button--tertiary button--lg button--variant-neutral"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      Tertiary
+    </span>
+  </button>
+</div>
+`;
+
+exports[`<Button /> (v2) Sizes story renders snapshot 1`] = `
 <div
   class="flex items-center gap-1"
 >
@@ -502,7 +539,7 @@ exports[`<Button /> Sizes story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Button /> TertiaryStandalone story renders snapshot 1`] = `
+exports[`<Button /> (v2) TertiaryStandalone story renders snapshot 1`] = `
 <button
   class="button button--context-standalone button--layout-none button--tertiary button--lg button--variant-default"
   type="button"
@@ -515,7 +552,7 @@ exports[`<Button /> TertiaryStandalone story renders snapshot 1`] = `
 </button>
 `;
 
-exports[`<Button /> UsingExtendedLink story renders snapshot 1`] = `
+exports[`<Button /> (v2) UsingExtendedLink story renders snapshot 1`] = `
 <div>
   Lorem ipsum dolor sit amet,
    
@@ -535,7 +572,7 @@ exports[`<Button /> UsingExtendedLink story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Button /> passes class names down properly 1`] = `
+exports[`<Button /> (v2) passes class names down properly 1`] = `
 <button
   class="button button--layout-none button--primary button--lg button--variant-default exampleClassName"
   data-testid="example-class-name"
@@ -549,7 +586,7 @@ exports[`<Button /> passes class names down properly 1`] = `
 </button>
 `;
 
-exports[`<Button /> passes test ids down properly 1`] = `
+exports[`<Button /> (v2) passes test ids down properly 1`] = `
 <button
   class="button button--layout-none button--primary button--lg button--variant-default"
   data-testid="example-test-id"