test(tabs, tab-nav, tab-title, tab): add component token E2E tests

packages/calcite-components/src/components/tab-nav/resources.ts

@@ -4,6 +4,7 @@ export const ICON = {
 };
 
 export const CSS = {
+  activeIndicator: "tab-nav-active-indicator",
   activeIndicatorContainer: "tab-nav-active-indicator-container",
   container: "tab-nav",
   containerHasEndTabTitleOverflow: "tab-nav--end-overflow",

packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts

@@ -1,5 +1,5 @@
 import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { getElementRect } from "../../tests/utils";
 import { CSS } from "./resources";
@@ -281,4 +281,113 @@ describe("calcite-tab-nav", () => {
       await assertScrollButtonVisibility(true, false);
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`<calcite-tab-nav>
+          <calcite-tab-title selected>hello darkness, my old friend</calcite-tab-title>
+        </calcite-tab-nav>`,
+        {
+          "--calcite-tab-nav-indicator-color": {
+            shadowSelector: `.${CSS.activeIndicator}`,
+            targetProp: "backgroundColor",
+          },
+        },
+      );
+    });
+
+    describe("responsive", () => {
+      themed(
+        html`<calcite-tab-nav style="width: 200px;">
+          <calcite-tab-title>The ocean floor is hidden from your viewing lens</calcite-tab-title>
+          <calcite-tab-title selected>A depth perception languished in the night</calcite-tab-title>
+          <calcite-tab-title>All my life I've been sowing the wounds</calcite-tab-title>
+          <calcite-tab-title>But the seeds sprout a lachrymal cloud</calcite-tab-title>
+        </calcite-tab-nav>`,
+        {
+          "--calcite-tab-nav-button-background-color-active": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-background-color",
+            state: { press: { attribute: "class", value: CSS.scrollButton } },
+          },
+          "--calcite-tab-nav-button-background-color-focus": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-background-color",
+            state: "focus",
+          },
+          "--calcite-tab-nav-button-background-color-hover": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-background-color",
+            state: "hover",
+          },
+          "--calcite-tab-nav-button-background-color": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-background-color",
+          },
+          "--calcite-tab-nav-button-border-color-active": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-border-color",
+            state: { press: { attribute: "class", value: CSS.scrollButton } },
+          },
+          "--calcite-tab-nav-button-border-color-focus": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-border-color",
+            state: "focus",
+          },
+          "--calcite-tab-nav-button-border-color-hover": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-border-color",
+            state: "hover",
+          },
+          "--calcite-tab-nav-button-border-color": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-border-color",
+          },
+          "--calcite-tab-nav-button-corner-radius": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-corner-radius",
+          },
+          "--calcite-tab-nav-button-icon-color-active": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-icon-color",
+            state: { press: { attribute: "class", value: CSS.scrollButton } },
+          },
+          "--calcite-tab-nav-button-icon-color-focus": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-icon-color",
+            state: "focus",
+          },
+          "--calcite-tab-nav-button-icon-color-hover": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-icon-color",
+            state: "hover",
+          },
+          "--calcite-tab-nav-button-icon-color": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-icon-color",
+          },
+          "--calcite-tab-nav-button-shadow-active": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-shadow",
+            state: { press: { attribute: "class", value: CSS.scrollButton } },
+          },
+          "--calcite-tab-nav-button-shadow-focus": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-shadow",
+            state: "focus",
+          },
+          "--calcite-tab-nav-button-shadow-hover": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-shadow",
+            state: "hover",
+          },
+          "--calcite-tab-nav-button-shadow": {
+            shadowSelector: `.${CSS.scrollButton}`,
+            targetProp: "--calcite-button-shadow",
+          },
+        },
+      );
+    });
+  });
 });

packages/calcite-components/src/components/tab-nav/tab-nav.scss

@@ -16,15 +16,10 @@
  * @prop --calcite-tab-nav-button-icon-color-focus: Specifies the color of the scroll buttons' icon when focused.
  * @prop --calcite-tab-nav-button-icon-color-hover: Specifies the color of the scroll buttons' icon when hovered.
  * @prop --calcite-tab-nav-button-icon-color: Specifies the color of the scroll buttons' icon.
- * @prop --calcite-tab-nav-button-loader-color: defines the scroll button's loader color.
  * @prop --calcite-tab-nav-button-shadow-active: defines the scroll button's shadow color in an active state.
  * @prop --calcite-tab-nav-button-shadow-focus: defines the scroll button's shadow color in a focus state.
  * @prop --calcite-tab-nav-button-shadow-hover: defines the scroll button's shadow color in a hover state.
  * @prop --calcite-tab-nav-button-shadow: defines the scroll button's shadow.
- * @prop --calcite-tab-nav-button-text-color-active: defines the scroll button's text color in an active state.
- * @prop --calcite-tab-nav-button-text-color-focus: defines the scroll button's text color in a focus state.
- * @prop --calcite-tab-nav-button-text-color-hover: defines the scroll button's text color in a hover state.
- * @prop --calcite-tab-nav-button-text-color: defines the scroll button's text color.
  * @prop --calcite-tab-nav-indicator-color: Specifies the color of the active tab indicator.
  */
 
@@ -185,9 +180,7 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
     --calcite-button-border-color: var(--calcite-tab-nav-button-border-color);
     --calcite-button-corner-radius: var(--calcite-tab-nav-button-corner-radius);
     --calcite-button-icon-color: var(--calcite-tab-nav-button-icon-color);
-    --calcite-button-loader-color: var(--calcite-tab-nav-button-loader-color);
     --calcite-button-shadow: var(--calcite-tab-nav-button-shadow);
-    --calcite-button-text-color: var(--calcite-tab-nav-button-text-color, var(--calcite-color-text-3));
     --calcite-offset-invert-focus: 1;
 
     block-size: var(--calcite-container-size-content-fluid);
@@ -197,14 +190,12 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
       --calcite-button-border-color: var(--calcite-tab-nav-button-border-color-hover);
       --calcite-button-icon-color: var(--calcite-tab-nav-button-icon-color-hover);
       --calcite-button-shadow: var(--calcite-tab-nav-button-shadow-hover);
-      --calcite-button-text-color: var(--calcite-tab-nav-button-text-color-hover, unset);
     }
     &:focus {
       --calcite-button-background-color: var(--calcite-tab-nav-button-background-color-focus);
       --calcite-button-border-color: var(--calcite-tab-nav-button-border-color-focus);
       --calcite-button-icon-color: var(--calcite-tab-nav-button-icon-color-focus);
       --calcite-button-shadow: var(--calcite-tab-nav-button-shadow-focus);
-      --calcite-button-text-color: var(--calcite-tab-nav-button-text-color-focus);
     }
     &:active {
       --calcite-button-background-color: var(
@@ -214,7 +205,6 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
       --calcite-button-border-color: var(--calcite-tab-nav-button-border-color-active);
       --calcite-button-icon-color: var(--calcite-tab-nav-button-icon-color-active);
       --calcite-button-shadow: var(--calcite-tab-nav-button-shadow-active);
-      --calcite-button-text-color: var(--calcite-tab-nav-button-text-color-active);
     }
   }
 }

packages/calcite-components/src/components/tab-nav/tab-nav.tsx

@@ -245,13 +245,11 @@ export class TabNav implements LocalizedComponent, T9nComponent {
             <slot onSlotchange={this.onSlotChange} />
           </div>
           <div
-            class={{
-              [CSS.activeIndicatorContainer]: true,
-            }}
+            class={CSS.activeIndicatorContainer}
             ref={(el) => (this.activeIndicatorContainerEl = el)}
           >
             <div
-              class="tab-nav-active-indicator"
+              class={CSS.activeIndicator}
               ref={(el) => (this.activeIndicatorEl = el as HTMLElement)}
               style={indicatorStyle}
             />

packages/calcite-components/src/components/tab-title/tab-title.e2e.ts

@@ -1,5 +1,5 @@
 import { newE2EPage, E2EPage, E2EElement } from "@stencil/core/testing";
-import { disabled, HYDRATED_ATTR, renders, hidden } from "../../tests/commonTests";
+import { disabled, HYDRATED_ATTR, renders, hidden, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
@@ -393,4 +393,77 @@ describe("calcite-tab-title", () => {
       ).toEqual("0px");
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-tab-title", {
+        "--calcite-tab-title-text-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("bordered", () => {
+      themed(html`<calcite-tab-title bordered>close me</calcite-tab-title>`, {
+        "--calcite-tab-title-background-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "backgroundColor",
+          state: "hover",
+        },
+      });
+    });
+
+    describe("with icon", () => {
+      themed(html`<calcite-tab-title icon-start="banana">close me</calcite-tab-title>`, {
+        "--calcite-tab-title-icon-color": {
+          shadowSelector: `.${CSS.titleIcon}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("closable", () => {
+      themed(`<calcite-tab-title closable>close me</calcite-tab-title>`, {
+        "--calcite-tab-title-close-button-background-color": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+        },
+        "--calcite-tab-title-close-button-background-color-active": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-tab-title-close-button-background-color-focus": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-tab-title-close-button-background-color-hover": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-tab-title-close-button-icon-color": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+        },
+        "--calcite-tab-title-close-button-icon-color-active": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-tab-title-close-button-icon-color-focus": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-tab-title-close-button-icon-color-hover": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+          state: "hover",
+        },
+      });
+    });
+  });
 });

packages/calcite-components/src/components/tab-title/tab-title.scss

@@ -298,8 +298,4 @@
   }
 }
 
-calcite-icon {
-  // TODO: add sub-component tokens
-}
-
 @include base-component();

packages/calcite-components/src/components/tab/tab.e2e.ts

@@ -1,4 +1,5 @@
-import { defaults, renders, hidden } from "../../tests/commonTests";
+import { defaults, renders, hidden, themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
 
 describe("calcite-tab", () => {
   const tabHtml = "<calcite-tab>A tab</calcite-tab>";
@@ -20,4 +21,24 @@ describe("calcite-tab", () => {
       { propertyName: "scale", defaultValue: "m" },
     ]);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-tab", {
+        "--calcite-tab-content-space-y": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "paddingBlock",
+        },
+      });
+    });
+
+    describe("deprecated", () => {
+      themed("calcite-tab", {
+        "--calcite-tab-content-block-padding": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "paddingBlock",
+        },
+      });
+    });
+  });
 });

packages/calcite-components/src/components/tab/tab.scss

@@ -24,33 +24,31 @@
 
 .content {
   @apply box-border;
+  padding-block: var(
+    --calcite-tab-content-space-y,
+    var(--calcite-tab-content-block-padding, var(--calcite-tab-content-space-y-fallback))
+  );
 }
 
 .scale-s {
+  --calcite-tab-content-space-y-fallback: theme("spacing.1");
+
   font-size: var(--calcite-font-size-sm);
   line-height: 1rem;
-
-  .content {
-    padding-block: var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, theme("spacing.1")));
-  }
 }
 
 .scale-m {
+  --calcite-tab-content-space-y-fallback: theme("spacing.2");
+
   font-size: var(--calcite-font-size);
   line-height: 1rem;
-
-  .content {
-    padding-block: var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, theme("spacing.2")));
-  }
 }
 
 .scale-l {
+  --calcite-tab-content-space-y-fallback: theme("spacing.[2.5]");
+
   font-size: var(--calcite-font-size-md);
   line-height: 1.25rem;
-
-  .content {
-    padding-block: var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, theme("spacing.[2.5]")));
-  }
 }
 
 section,

packages/calcite-components/src/components/tabs/resources.ts

@@ -1,3 +1,7 @@
+export const CSS = {
+  section: "section",
+};
+
 export const SLOTS = {
   titleGroup: "title-group",
 };