From f2f37f16270157d6552523f17080b4c28db02cb8 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Tue, 18 Jun 2024 17:31:27 -0700
Subject: [PATCH] test(shell-center-row): add token theming tests (#9462)

**Related Issue:** #7180

## Summary
Add token theming tests for `shell-center-row`.
---
 .../shell-center-row/shell-center-row.e2e.ts  | 39 ++++++++++++++++++-
 .../src/components/tree-item/tree-item.scss   |  4 +-
 2 files changed, 40 insertions(+), 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
index eecce95910c..38582650f44 100644
--- 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
index da86f4ec903..4d41c700eea 100644
--- 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;
 }