feat(button): enhance component's interactivity states (#11590)

**Related Issue:** [#9246](#9246) ## Summary - Remove `hover` styling from all `focus` states. - Update `button` demos page `outline-fill` section to use `appearance="outline-fill"` instead of `appearance="outline"`. - `kind="neutral" appearance="solid"`: - Update `hover` `background-color` to `--calcite-color-border-3`. - Update `active` `background-color` to `--calcite-color-border-2`. - `kind="neutral" appearance="outline-fill | outline"`: - Update all `hover` stroke colors to `--calcite-color-border-input`. - Update all `active` stroke colors to `--calcite-color-text-3`. - `appearance="outline-fill"`: - Update `hover` to a `--calcite-color-foreground-2` `background` change instead of a stroke width change. - Update `active` to a `--calcite-color-foreground-3` `background` change instead of a stroke width change. - `appearance="outline"`: - Update `hover` to a `--calcite-color-transparent-hover` `background` change instead of a stroke width change. - Update `active` to a `--calcite-color-transparent-press` `background` change instead of a stroke width change.
Esri · Feb 21, 2025 · 146bb63 · 146bb63
1 parent 7122f89
commit 146bb63
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 132 deletions.
diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -511,7 +511,6 @@ describe("calcite-button", () => {
     `;
     let page;
     let buttonEl;
-    let buttonFocusStyle;
     let buttonHoverStyle;
 
     it("should have defined CSS custom properties", async () => {
@@ -533,11 +532,6 @@ describe("calcite-button", () => {
       it("should render button pseudo classes with default values tied to light mode", async () => {
         page = await newE2EPage({ html: buttonSnippet });
         buttonEl = await page.find("calcite-button >>> button");
-        await buttonEl.focus();
-        await page.waitForChanges();
-        buttonFocusStyle = await buttonEl.getComputedStyle();
-        expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
-
         await buttonEl.hover();
         await page.waitForChanges();
         buttonHoverStyle = await buttonEl.getComputedStyle();
@@ -551,11 +545,6 @@ describe("calcite-button", () => {
           html: `<div class="calcite-mode-dark">${buttonSnippet}</div>`,
         });
         buttonEl = await page.find("calcite-button >>> button");
-        await buttonEl.focus();
-        await page.waitForChanges();
-        buttonFocusStyle = await buttonEl.getComputedStyle();
-        expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
-
         await buttonEl.hover();
         await page.waitForChanges();
         buttonHoverStyle = await buttonEl.getComputedStyle();
@@ -575,11 +564,6 @@ describe("calcite-button", () => {
         <div>${buttonSnippet}</div>`,
       });
       buttonEl = await page.find("calcite-button >>> button");
-      await buttonEl.focus();
-      await page.waitForChanges();
-      buttonFocusStyle = await buttonEl.getComputedStyle();
-      expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
-
       await buttonEl.hover();
       await page.waitForChanges();
       buttonHoverStyle = await buttonEl.getComputedStyle();

diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
@@ -255,8 +255,7 @@
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
     --calcite-internal-button-background-color: var(--calcite-color-brand);
 
-    &:hover,
-    &:focus {
+    &:hover {
       --calcite-internal-button-background-color: var(--calcite-color-brand-hover);
     }
     &:active {
@@ -270,8 +269,7 @@
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
     --calcite-internal-button-background-color: var(--calcite-color-status-danger);
 
-    &:hover,
-    &:focus {
+    &:hover {
       --calcite-internal-button-background-color: var(--calcite-color-status-danger-hover);
     }
     &:active {
@@ -284,8 +282,7 @@
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
     --calcite-internal-button-background-color: var(--calcite-color-foreground-3);
-    &:hover,
-    &:focus {
+    &:hover {
       --calcite-internal-button-background-color: var(--calcite-color-foreground-2);
     }
     &:active {
@@ -298,55 +295,34 @@
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
     --calcite-internal-button-background-color: var(--calcite-color-inverse);
-    &:hover,
-    &:focus {
+    &:hover {
       --calcite-internal-button-background-color: var(--calcite-color-inverse-hover);
     }
     &:active {
       --calcite-internal-button-background-color: var(--calcite-color-inverse-press);
     }
   }
 }
-// outline
-:host([appearance="outline-fill"]),
-:host([appearance="outline"]) {
-  a,
-  button {
-    box-shadow: inset 0 0 0 1px
-      var(--calcite-button-shadow-color, var(--calcite-internal-button-shadow-color, transparent));
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px
-        var(
-          --calcite-button-shadow-color,
-          var(--calcite-internal-button-shadow-color, var(--calcite-color-foreground-3))
-        );
-    }
-    &:focus,
-    &:active {
-      box-shadow: inset 0 0 0 2px
-        var(
-          --calcite-button-shadow-color,
-          var(--calcite-internal-button-shadow-color, var(--calcite-color-foreground-3))
-        );
-    }
-  }
-}
 
 :host([appearance="outline-fill"]) {
   button,
   a {
     --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     @apply border-solid;
     border-width: var(--calcite-button-border-size, 1px);
+    &:hover {
+      --calcite-internal-button-background-color: var(--calcite-color-foreground-2);
+    }
+    &:active {
+      --calcite-internal-button-background-color: var(--calcite-color-foreground-3);
+    }
   }
 }
 :host([appearance="outline-fill"][kind="brand"]) {
   button,
   a {
     --calcite-internal-button-border-color: var(--calcite-color-brand);
     --calcite-internal-button-text-color: theme("colors.brand");
-    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
@@ -372,7 +348,6 @@
   button,
   a {
     --calcite-internal-button-border-color: var(--calcite-color-status-danger);
-    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     --calcite-internal-button-text-color: theme("colors.danger");
 
     &:hover {
@@ -400,24 +375,35 @@
   a {
     --calcite-internal-button-border-color: theme("borderColor.color.1");
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
-    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
 
     &:hover {
       --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
+      --calcite-internal-button-border-color: var(--calcite-color-border-input);
     }
     &:focus {
       --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
     }
     &:active {
       --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
+      --calcite-internal-button-border-color: var(--calcite-color-text-3);
+    }
+  }
+}
+:host([appearance="solid"][kind="neutral"]) {
+  button,
+  a {
+    &:hover {
+      --calcite-internal-button-background-color: var(--calcite-color-border-3);
+    }
+    &:active {
+      --calcite-internal-button-background-color: var(--calcite-color-border-2);
     }
   }
 }
 :host([appearance="outline-fill"][kind="inverse"]) {
   button,
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
-    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     --calcite-internal-button-border-color: var(--calcite-color-inverse);
 
     &:hover {
@@ -441,14 +427,20 @@
 
     @apply border-solid;
     border-width: var(--calcite-button-border-size, 1px);
+
+    &:hover {
+      --calcite-internal-button-background-color: var(--calcite-color-transparent-hover);
+    }
+    &:active {
+      --calcite-internal-button-background-color: var(--calcite-color-transparent-press);
+    }
   }
 }
 :host([appearance="outline"][kind="brand"]) {
   button,
   a {
     --calcite-internal-button-border-color: var(--calcite-color-brand);
     --calcite-internal-button-text-color: theme("colors.brand");
-    --calcite-internal-button-background-color: var(--calcite-color-transparent);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
@@ -475,7 +467,6 @@
   a {
     --calcite-internal-button-border-color: var(--calcite-color-status-danger);
     --calcite-internal-button-text-color: theme("colors.danger");
-    --calcite-internal-button-background-color: var(--calcite-color-transparent);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);
@@ -501,25 +492,25 @@
   button,
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
-    --calcite-internal-button-background-color: var(--calcite-color-transparent);
     --calcite-internal-button-border-color: theme("borderColor.color.1");
 
     &:hover {
       --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
+      --calcite-internal-button-border-color: var(--calcite-color-border-input);
     }
     &:focus {
       --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
     }
     &:active {
       --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
+      --calcite-internal-button-border-color: var(--calcite-color-text-3);
     }
   }
 }
 :host([appearance="outline"][kind="inverse"]) {
   button,
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
-    --calcite-internal-button-background-color: var(--calcite-color-transparent);
     --calcite-internal-button-border-color: var(--calcite-color-inverse);
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-inverse-hover);
@@ -553,8 +544,7 @@
   button,
   a {
     background-color: var(--calcite-color-transparent);
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--calcite-color-transparent-hover);
     }
     &:active {