Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jcfranco merged 5 commits into from
Nov 27, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4832009
feat(tab-title): add icon start/end custom CSS prop
jcfranco Nov 25, 2024
87d0dbd
fix prop name to follow schema
jcfranco Nov 27, 2024
5e40766
merge dev
jcfranco Nov 27, 2024
c479e6b
fix theming custom vars
jcfranco Nov 27, 2024
90b7213
update tokenValueMap with correct start/end icon color names
jcfranco Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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-icon-color-end": {
shadowSelector: `.${CSS.iconEnd}`,
targetProp: "color",
},
"--calcite-tab-icon-color-start": {
shadowSelector: `.${CSS.iconStart}`,
targetProp: "color",
},
});
});
});
});
13 changes: 12 additions & 1 deletion packages/calcite-components/src/components/tab-title/tab-title.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-tab-icon-color-end: Specifies the component's `iconEnd` color. Fallback to `--calcite-icon-color`.
* @prop --calcite-tab-icon-color-start: Specifies the component's `iconStart` color. Fallback to `--calcite-icon-color`.
*/

:host {
@apply block outline-none;
margin-inline-start: theme("margin.0");
Expand Down Expand Up @@ -64,7 +73,7 @@
}

.container {
@apply relative
@apply relative
box-border
content-center
cursor-pointer
Expand Down Expand Up @@ -221,10 +230,12 @@

.content--has-text .calcite-tab-title--icon.icon-start {
margin-inline-end: var(--calcite-spacing-sm);
color: var(--calcite-tab-icon-color-start, var(--calcite-icon-color));
}

.content--has-text .calcite-tab-title--icon.icon-end {
margin-inline-start: var(--calcite-spacing-sm);
color: var(--calcite-tab-icon-color-end, var(--calcite-icon-color));
}

.close-button {
Expand Down
28 changes: 15 additions & 13 deletions packages/calcite-components/src/custom-theme.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,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";
Expand Down Expand Up @@ -126,8 +126,9 @@ 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} ${comboboxItem}
${datePicker} ${tabs} ${tabsBordered} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon}
${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
${comboboxItem}
</div>
<div class="demo-column">${navigation} ${navigationLogos} ${navigationUsers}</div>
${alert}
Expand All @@ -136,33 +137,34 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>

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 {
Expand Down
119 changes: 111 additions & 8 deletions packages/calcite-components/src/custom-theme/tabs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/
calciteTabIconColorEnd: "",
calciteTabIconColorStart: "",
};

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>
`;
108 changes: 108 additions & 0 deletions packages/calcite-components/src/demos/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-icon-color-end: 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-icon-color-end: 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-icon-color-start: 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-icon-color-start: 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>
Expand Down
3 changes: 3 additions & 0 deletions packages/calcite-components/src/tests/utils/cssTokenValues.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
"icon-color-end$": "rgb(213, 156, 74)",
"icon-color-start$": "rgb(98, 213, 180)",
color$: "rgb(0, 191, 255)",
hover$: "rgb(255, 105, 180)",
pressed$: "rgb(44, 44, 44)",
Expand Down