Fixing href styling behavior to match visual matrix

Esri · Oct 24, 2024 · 3ea5d9a · 3ea5d9a
1 parent 172eb2c
commit 3ea5d9a
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 3 deletions.
diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -481,7 +481,67 @@ describe("calcite-tile", () => {
       });
     });
     describe("link", () => {
-      describe("text colors", () => {
+      describe("--calcite-color-text-link applies to heading text on hover", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              href="#"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-color-text-link": {
+              shadowSelector: `.${CSS.heading}`,
+              targetProp: "color",
+              state: "hover",
+            },
+          },
+        );
+      });
+      describe("--calcite-color-text-link applies to icon on hover", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              href="#"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-color-text-link": {
+              shadowSelector: `.${CSS.icon}`,
+              targetProp: "color",
+              state: "hover",
+            },
+          },
+        );
+      });
+      describe("--calcite-color-text-link applies to border on hover", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              href="#"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-color-text-link": {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "outlineColor",
+              state: "hover",
+            },
+          },
+        );
+      });
+      describe("tile text-color tokens apply to heading and description on hover", () => {
         themed(
           html`
             <calcite-tile
@@ -506,7 +566,7 @@ describe("calcite-tile", () => {
           },
         );
       });
-      describe("icon color", () => {
+      describe("tile text-color token applies to icon on hover", () => {
         themed(
           html`
             <calcite-tile

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
@@ -239,7 +239,8 @@
 
 :host([href]:active:not([disabled])) {
   .container {
-    box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
+    box-shadow: inset 0 0 0 1px var(--calcite-color-text-link);
+    outline-color: var(--calcite-color-text-link);
   }
 }