test(shell-center-row): add token theming tests (#9462)

**Related Issue:** #7180 ## Summary Add token theming tests for `shell-center-row`.
Esri · Jun 19, 2024 · f2f37f1 · f2f37f1
1 parent f2e3346
commit f2f37f1
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts b/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts
@@ -1,5 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders, slots } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, slots, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-shell-center-row", () => {
@@ -92,3 +94,38 @@ describe("calcite-shell-center-row", () => {
     `);
   });
 });
+
+describe("theme", () => {
+  const shellCenterHtml = html`
+    <calcite-shell-center-row detached slot="center-row">
+      <calcite-action-bar class="calcite-mode-dark" slot="action-bar">
+        <calcite-action-group>
+          <calcite-action text="Add" label="Add Item" icon="plus"></calcite-action>
+          <calcite-action text="Save" label="Save Item" icon="save"></calcite-action>
+        </calcite-action-group>
+      </calcite-action-bar>
+    </calcite-shell-center-row>
+  `;
+
+  describe("default", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-shell-center-row-border-radius": {
+        targetProp: "borderRadius",
+      },
+      "--calcite-shell-center-row-background-color": {
+        targetProp: "backgroundColor",
+      },
+    };
+    themed(shellCenterHtml, tokens);
+  });
+
+  describe("slotted overrides", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-shell-center-row-border-color": {
+        selector: `calcite-action-bar`,
+        targetProp: "borderColor",
+      },
+    };
+    themed(shellCenterHtml, tokens);
+  });
+});
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -99,7 +99,7 @@
 }
 
 :host([lines]) {
-  .children-container:after {
+  .children-container::after {
     @apply transition-default
         absolute
         top-0
@@ -113,7 +113,7 @@
   }
 }
 
-:host(:not([lines])) .node-container:after {
+:host(:not([lines])) .node-container::after {
   @apply hidden;
 }