background-color and tip-spacing

Esri · Jun 18, 2024 · 9692222 · 9692222
1 parent b13365c
commit 9692222
Showing 1 changed file with 34 additions and 14 deletions.
diff --git a/packages/calcite-components/src/components/shell/shell.e2e.ts b/packages/calcite-components/src/components/shell/shell.e2e.ts
@@ -1,6 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, hidden, renders, slots, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-shell", () => {
@@ -123,18 +124,28 @@ describe("calcite-shell", () => {
   });
 });
 
-describe("slotted overrides", () => {
-  themed(
-    html`
-      <calcite-shell>
-        <calcite-panel heading="Leading panel content"></calcite-panel>
-        <calcite-flow heading="Leading panel content"></calcite-flow>
-        <calcite-shell-center-row slot="${SLOTS.panelBottom}"></calcite-shell-center-row>
-        <calcite-shell-center-row slot="${SLOTS.panelTop}"></calcite-shell-center-row>
-        <calcite-shell-center-row slot="${SLOTS.centerRow}"></calcite-shell-center-row>
-      </calcite-shell>
-    `,
-    {
+const tipMangerHTML = html`
+  <calcite-tip-manager>
+    <calcite-tip heading="Example tip title">
+      <calcite-link href="http://www.esri.com">An example link</calcite-link>
+    </calcite-tip>
+  </calcite-tip-manager>
+`;
+
+describe("theme", () => {
+  const shellHTML = html`
+    <calcite-shell>
+      ${tipMangerHTML}
+      <calcite-panel heading="Leading panel content"></calcite-panel>
+      <calcite-flow heading="Leading panel content"></calcite-flow>
+      <calcite-shell-center-row slot="${SLOTS.panelBottom}"></calcite-shell-center-row>
+      <calcite-shell-center-row slot="${SLOTS.panelTop}"></calcite-shell-center-row>
+      <calcite-shell-center-row slot="${SLOTS.centerRow}"></calcite-shell-center-row>
+    </calcite-shell>
+  `;
+
+  describe("default", () => {
+    const tokens: ComponentTestTokens = {
       "--calcite-shell-border-color": [
         {
           selector: `calcite-panel`,
@@ -157,6 +168,15 @@ describe("slotted overrides", () => {
           targetProp: "borderColor",
         },
       ],
-    },
-  );
+      "--calcite-shell-background-color": {
+        targetProp: "backgroundColor",
+      },
+      "--calcite-shell-tip-spacing": {
+        selector: `calcite-tip-manager`,
+        targetProp: "insetInline",
+      },
+    };
+
+    themed(async () => shellHTML, tokens);
+  });
 });