fixing selection-mode="none" to match visual matrix

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

Hide file tree

Showing 2 changed files with 49 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
@@ -435,6 +435,50 @@ describe("calcite-tile", () => {
           },
         );
       });
+      describe(`selection-mode="none"`, () => {
+        describe("applies --calcite-tile-border-color when idle and selected attribute is present", () => {
+          themed(
+            html`
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+                interactive
+                selection-mode="none"
+                selected
+              >
+              </calcite-tile>
+            `,
+            {
+              "--calcite-tile-border-color": {
+                shadowSelector: `.${CSS.container}`,
+                targetProp: "outlineColor",
+              },
+            },
+          );
+        });
+        describe("applies --calcite-tile-border-color when hovered", () => {
+          themed(
+            html`
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+                interactive
+                selection-mode="none"
+              >
+              </calcite-tile>
+            `,
+            {
+              "--calcite-tile-border-color": {
+                shadowSelector: `.${CSS.container}`,
+                targetProp: "outlineColor",
+                state: "hover",
+              },
+            },
+          );
+        });
+      });
     });
     describe("link", () => {
       describe("text colors", () => {

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
@@ -251,10 +251,12 @@
 
 :host([selection-mode="none"]) {
   .container {
-    outline-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
+    &:hover,
+    &.selected {
+      outline-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
+    }
     &:focus {
-      outline-color: var(--calcite-color-brand);
-      position: relative;
+      outline-color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
     }
   }
 }