feat(tab-title): add icon start/end custom CSS prop

Esri · Nov 25, 2024 · 4832009 · 4832009
1 parent 1fb5af1
commit 4832009
Show file tree

Hide file tree

Showing 6 changed files with 266 additions and 28 deletions.
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage, E2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, beforeEach } from "vitest";
-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";
 
@@ -344,4 +344,19 @@ describe("calcite-tab-title", () => {
     await page.keyboard.press("Enter");
     expect(activeEventSpy).toHaveReceivedEventTimes(2);
   });
+
+  describe("theme", () => {
+    describe("start/end icons", () => {
+      themed(html` <calcite-tab-title icon-start="banana" icon-end="3d-glasses">close me</calcite-tab-title>`, {
+        "--calcite-tab-end-icon-color": {
+          shadowSelector: `.${CSS.iconEnd}`,
+          targetProp: "color",
+        },
+        "--calcite-tab-start-icon-color": {
+          shadowSelector: `.${CSS.iconStart}`,
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -1,3 +1,12 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tab-end-icon-color: Specifies the component's `iconEnd` color. Fallback to `--calcite-icon-color`.
+ * @prop --calcite-tab-start-icon-color: Specifies the component's `iconStart` color. Fallback to `--calcite-icon-color`.
+ */
+
 :host {
   @apply block outline-none;
   margin-inline-start: theme("margin.0");
@@ -64,7 +73,7 @@
 }
 
 .container {
-  @apply relative 
+  @apply relative
   box-border
   content-center
   cursor-pointer
@@ -221,10 +230,12 @@
 
 .content--has-text .calcite-tab-title--icon.icon-start {
   margin-inline-end: var(--calcite-spacing-sm);
+  color: var(--calcite-tab-start-icon-color, var(--calcite-icon-color));
 }
 
 .content--has-text .calcite-tab-title--icon.icon-end {
   margin-inline-start: var(--calcite-spacing-sm);
+  color: var(--calcite-tab-end-icon-color, var(--calcite-icon-color));
 }
 
 .close-button {

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -36,7 +36,7 @@ import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider, sliderTokens } from "./custom-theme/slider";
 import { switchTokens } from "./custom-theme/switch";
-import { tabs } from "./custom-theme/tabs";
+import { tabs, tabsBordered, tabsTokens } from "./custom-theme/tabs";
 import { textArea, textAreaTokens } from "./custom-theme/text-area";
 import { tooltip, tooltipTokens } from "./custom-theme/tooltip";
 import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
@@ -125,46 +125,44 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${chips} ${pagination} ${slider}
       </div>
       <div class="demo-column">
-        ${datePicker} ${tabs} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials}
-        ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
+        ${datePicker} ${tabs} ${tabsBordered} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon}
+        ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
       </div>
-      <div class="demo-column">
-      ${navigation} ${navigationLogos} ${navigationUsers}
-       </div>
-      ${alert} 
-
+      <div class="demo-column">${navigation} ${navigationLogos} ${navigationUsers}</div>
+      ${alert}
     </div>
   </div>`;
 
 const componentTokens = {
   ...globalTokens,
-  ...accordionTokens,
   ...accordionItemTokens,
-  ...actionTokens,
+  ...accordionTokens,
   ...actionBarTokens,
   ...actionGroupTokens,
   ...actionMenuTokens,
   ...actionPadTokens,
+  ...actionTokens,
+  ...alertTokens,
   ...avatarTokens,
   ...cardTokens,
-  ...alertTokens,
-  ...chipTokens,
   ...checkboxTokens,
+  ...chipTokens,
   ...handleTokens,
+  ...inputTokens,
   ...labelTokens,
   ...linkTokens,
   ...listTokens,
+  ...navigationLogoTokens,
+  ...navigationTokens,
+  ...navigationUserTokens,
   ...popoverTokens,
   ...progressTokens,
-  ...inputTokens,
+  ...sliderTokens,
   ...switchTokens,
+  ...tabsTokens,
   ...textAreaTokens,
-  ...navigationLogoTokens,
-  ...navigationUserTokens,
-  ...tooltipTokens,
   ...tileTokens,
-  ...navigationTokens,
-  ...sliderTokens,
+  ...tooltipTokens,
 };
 
 export default {

diff --git a/packages/calcite-components/src/custom-theme/tabs.ts b/packages/calcite-components/src/custom-theme/tabs.ts
@@ -1,10 +1,113 @@
 import { html } from "../../support/formatting";
 
-export const tabs = html`<calcite-tabs>
-  <calcite-tab-nav slot="title-group">
-    <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-    <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-    <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-    <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-  </calcite-tab-nav>
-</calcite-tabs>`;
+export const tabsTokens = {
+  // additional tokens will be added in https://github.com/Esri/calcite-design-system/pull/10532/
+  calciteTabEndIconColor: "",
+  calciteTabStartIconColor: "",
+};
+
+export const tabs = html`
+  <style>
+    calcite-tabs {
+      width: 400px;
+    }
+  </style>
+  <calcite-tabs position="bottom">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+        >Tab 1 Title
+      </calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 7 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 8 Title</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab selected>Tab 1 Content</calcite-tab>
+    <calcite-tab>Tab 2 Content</calcite-tab>
+    <calcite-tab>Tab 3 Content</calcite-tab>
+    <calcite-tab>Tab 4 Content</calcite-tab>
+    <calcite-tab>Tab 5 Content</calcite-tab>
+    <calcite-tab>Tab 6 Content</calcite-tab>
+    <calcite-tab>Tab 7 Content</calcite-tab>
+    <calcite-tab>Tab 8 Content</calcite-tab>
+  </calcite-tabs>
+  <br />
+  <calcite-tabs position="top">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+        >Tab 1 Title
+      </calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 7 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 8 Title</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab selected>Tab 1 Content</calcite-tab>
+    <calcite-tab>Tab 2 Content</calcite-tab>
+    <calcite-tab>Tab 3 Content</calcite-tab>
+    <calcite-tab>Tab 4 Content</calcite-tab>
+    <calcite-tab>Tab 5 Content</calcite-tab>
+    <calcite-tab>Tab 6 Content</calcite-tab>
+    <calcite-tab>Tab 7 Content</calcite-tab>
+    <calcite-tab>Tab 8 Content</calcite-tab>
+  </calcite-tabs>
+`;
+
+export const tabsBordered = html`
+  <style>
+    calcite-tabs {
+      width: 400px;
+    }
+  </style>
+  <calcite-tabs bordered position="bottom">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+        >Tab 1 Title
+      </calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 7 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 8 Title</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab selected>Tab 1 Content</calcite-tab>
+    <calcite-tab>Tab 2 Content</calcite-tab>
+    <calcite-tab>Tab 3 Content</calcite-tab>
+    <calcite-tab>Tab 4 Content</calcite-tab>
+    <calcite-tab>Tab 5 Content</calcite-tab>
+    <calcite-tab>Tab 6 Content</calcite-tab>
+    <calcite-tab>Tab 7 Content</calcite-tab>
+    <calcite-tab>Tab 8 Content</calcite-tab>
+  </calcite-tabs>
+  <br />
+  <calcite-tabs position="top">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+        >Tab 1 Title
+      </calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 7 Title</calcite-tab-title>
+      <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 8 Title</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab selected>Tab 1 Content</calcite-tab>
+    <calcite-tab>Tab 2 Content</calcite-tab>
+    <calcite-tab>Tab 3 Content</calcite-tab>
+    <calcite-tab>Tab 4 Content</calcite-tab>
+    <calcite-tab>Tab 5 Content</calcite-tab>
+    <calcite-tab>Tab 6 Content</calcite-tab>
+    <calcite-tab>Tab 7 Content</calcite-tab>
+    <calcite-tab>Tab 8 Content</calcite-tab>
+  </calcite-tabs>
+`;
diff --git a/packages/calcite-components/src/demos/tabs.html b/packages/calcite-components/src/demos/tabs.html
@@ -592,6 +592,114 @@
           </calcite-tabs>
         </div>
       </div>
+
+      <!-- additional tokens will be added in https://github.com/Esri/calcite-design-system/pull/10532/ -->
+      <demo-theme
+        tokens="
+        "
+      >
+        <style>
+          calcite-tabs {
+            width: 400px;
+          }
+        </style>
+
+        <div class="parent">
+          <div class="child right-aligned-text">Theme</div>
+
+          <div class="child">
+            <calcite-tabs position="bottom" style="--calcite-tab-end-icon-color: purple">
+              <calcite-tab-nav slot="title-group">
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses" selected>Tab 1 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 2 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 3 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 4 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 5 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 6 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 7 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 8 Title</calcite-tab-title>
+              </calcite-tab-nav>
+              <calcite-tab selected>Tab 1 Content</calcite-tab>
+              <calcite-tab>Tab 2 Content</calcite-tab>
+              <calcite-tab>Tab 3 Content</calcite-tab>
+              <calcite-tab>Tab 4 Content</calcite-tab>
+              <calcite-tab>Tab 5 Content</calcite-tab>
+              <calcite-tab>Tab 6 Content</calcite-tab>
+              <calcite-tab>Tab 7 Content</calcite-tab>
+              <calcite-tab>Tab 8 Content</calcite-tab>
+            </calcite-tabs>
+
+            <br />
+
+            <calcite-tabs position="top" style="--calcite-tab-end-icon-color: purple">
+              <calcite-tab-nav slot="title-group">
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses" selected>Tab 1 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 2 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 3 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 4 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 5 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 6 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 7 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 8 Title</calcite-tab-title>
+              </calcite-tab-nav>
+              <calcite-tab selected>Tab 1 Content</calcite-tab>
+              <calcite-tab>Tab 2 Content</calcite-tab>
+              <calcite-tab>Tab 3 Content</calcite-tab>
+              <calcite-tab>Tab 4 Content</calcite-tab>
+              <calcite-tab>Tab 5 Content</calcite-tab>
+              <calcite-tab>Tab 6 Content</calcite-tab>
+              <calcite-tab>Tab 7 Content</calcite-tab>
+              <calcite-tab>Tab 8 Content</calcite-tab>
+            </calcite-tabs>
+          </div>
+
+          <div class="child">
+            <calcite-tabs bordered style="--calcite-tab-start-icon-color: red" position="bottom">
+              <calcite-tab-nav slot="title-group">
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses" selected>Tab 1 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 2 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 3 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 4 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 5 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 6 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 7 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 8 Title</calcite-tab-title>
+              </calcite-tab-nav>
+              <calcite-tab selected>Tab 1 Content</calcite-tab>
+              <calcite-tab>Tab 2 Content</calcite-tab>
+              <calcite-tab>Tab 3 Content</calcite-tab>
+              <calcite-tab>Tab 4 Content</calcite-tab>
+              <calcite-tab>Tab 5 Content</calcite-tab>
+              <calcite-tab>Tab 6 Content</calcite-tab>
+              <calcite-tab>Tab 7 Content</calcite-tab>
+              <calcite-tab>Tab 8 Content</calcite-tab>
+            </calcite-tabs>
+
+            <br />
+
+            <calcite-tabs bordered style="--calcite-tab-start-icon-color: red">
+              <calcite-tab-nav slot="title-group">
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses" selected>Tab 1 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 2 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 3 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 4 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 5 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 6 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 7 Title</calcite-tab-title>
+                <calcite-tab-title icon-start="banana" icon-end="3d-glasses">Tab 8 Title</calcite-tab-title>
+              </calcite-tab-nav>
+              <calcite-tab selected>Tab 1 Content</calcite-tab>
+              <calcite-tab>Tab 2 Content</calcite-tab>
+              <calcite-tab>Tab 3 Content</calcite-tab>
+              <calcite-tab>Tab 4 Content</calcite-tab>
+              <calcite-tab>Tab 5 Content</calcite-tab>
+              <calcite-tab>Tab 6 Content</calcite-tab>
+              <calcite-tab>Tab 7 Content</calcite-tab>
+              <calcite-tab>Tab 8 Content</calcite-tab>
+            </calcite-tabs>
+          </div>
+        </div>
+      </demo-theme>
     </demo-dom-swapper>
 
     <script>

diff --git a/packages/calcite-components/src/tests/utils/cssTokenValues.ts b/packages/calcite-components/src/tests/utils/cssTokenValues.ts
@@ -7,10 +7,13 @@
  */
 export function getTokenValue(token: string): string {
   const tokenValueMap = {
+    // granular patterns for the same token must be listed first to match correctly
     background$: "rgb(252, 244, 52)",
     "text-color$": "rgb(239, 118, 39)",
     "border-color$": "rgb(156, 89, 209)",
     "background-color$": "rgb(252, 244, 52)",
+    "start-icon-color$": "rgb(213, 156, 74)",
+    "end-icon-color$": "rgb(98, 213, 180)",
     color$: "rgb(0, 191, 255)",
     hover$: "rgb(255, 105, 180)",
     pressed$: "rgb(44, 44, 44)",