From 83ef28331fd056f627982fdb0151db76159c50f1 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 25 Nov 2024 13:24:44 -0800 Subject: [PATCH] feat(tab-title): add icon start/end custom CSS prop --- .../src/components/tab-title/tab-title.e2e.ts | 17 ++- .../src/components/tab-title/tab-title.scss | 11 ++ .../src/custom-theme.stories.ts | 34 +++-- .../src/custom-theme/tabs.ts | 119 ++++++++++++++++-- .../calcite-components/src/demos/tabs.html | 108 ++++++++++++++++ .../src/tests/utils/cssTokenValues.ts | 3 + 6 files changed, 265 insertions(+), 27 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 index 24147af9136..e3dfa921345 100644 --- 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` close me`, { + "--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 index 0c0b3870512..d43c68ee6db 100644 --- 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"); @@ -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); } .content--has-text .calcite-tab-title--icon.icon-end { margin-inline-start: var(--calcite-spacing-sm); + color: var(--calcite-tab-end-icon-color); } .close-button { diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 14ba2329030..7ae27b99be6 100644 --- 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, useTestValues = false) => ${chips} ${pagination} ${slider}
- ${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}
-
- ${navigation} ${navigationLogos} ${navigationUsers} -
- ${alert} - +
${navigation} ${navigationLogos} ${navigationUsers}
+ ${alert} `; 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 index ff61b2d6c1e..da0b430a9a4 100644 --- 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` - - Tab 1 Title - Tab 2 Title - Tab 3 Title - Tab 4 Title - -`; +export const tabsTokens = { + // additional tokens will be added in https://github.com/Esri/calcite-design-system/pull/10532/ + calciteTabEndIconColor: "", + calciteTabStartIconColor: "", +}; + +export const tabs = html` + + + + Tab 1 Title + + Tab 2 Title + Tab 3 Title + Tab 4 Title + Tab 5 Title + Tab 6 Title + Tab 7 Title + Tab 8 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content + Tab 5 Content + Tab 6 Content + Tab 7 Content + Tab 8 Content + +
+ + + Tab 1 Title + + Tab 2 Title + Tab 3 Title + Tab 4 Title + Tab 5 Title + Tab 6 Title + Tab 7 Title + Tab 8 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content + Tab 5 Content + Tab 6 Content + Tab 7 Content + Tab 8 Content + +`; + +export const tabsBordered = html` + + + + Tab 1 Title + + Tab 2 Title + Tab 3 Title + Tab 4 Title + Tab 5 Title + Tab 6 Title + Tab 7 Title + Tab 8 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content + Tab 5 Content + Tab 6 Content + Tab 7 Content + Tab 8 Content + +
+ + + Tab 1 Title + + Tab 2 Title + Tab 3 Title + Tab 4 Title + Tab 5 Title + Tab 6 Title + Tab 7 Title + Tab 8 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content + Tab 5 Content + Tab 6 Content + Tab 7 Content + Tab 8 Content + +`; diff --git a/packages/calcite-components/src/demos/tabs.html b/packages/calcite-components/src/demos/tabs.html index cfe4bffebae..e5c7922ac7d 100644 --- a/packages/calcite-components/src/demos/tabs.html +++ b/packages/calcite-components/src/demos/tabs.html @@ -592,6 +592,114 @@ + + + + + +
+
Theme
+ +
+ + + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + Tab 5 Title + Tab 6 Title + Tab 7 Title + Tab 8 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content + Tab 5 Content + Tab 6 Content + Tab 7 Content + Tab 8 Content + + +
+ + + + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + Tab 5 Title + Tab 6 Title + Tab 7 Title + Tab 8 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content + Tab 5 Content + Tab 6 Content + Tab 7 Content + Tab 8 Content + +
+ +
+ + + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + Tab 5 Title + Tab 6 Title + Tab 7 Title + Tab 8 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content + Tab 5 Content + Tab 6 Content + Tab 7 Content + Tab 8 Content + + +
+ + + + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + Tab 5 Title + Tab 6 Title + Tab 7 Title + Tab 8 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content + Tab 5 Content + Tab 6 Content + Tab 7 Content + Tab 8 Content + +
+
+