Skip to content
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

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

Merged
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 1 commit
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-end-icon-color": {
shadowSelector: `.${CSS.iconEnd}`,
targetProp: "color",
},
"--calcite-tab-start-icon-color": {
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-end-icon-color: Specifies the component's `iconEnd` color. Fallback to `--calcite-icon-color`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this make more sense as --calcite-tab-icon-start-color and --calcite-tab-icon-end-color instead of start/end-icon?

That would match the property names of iconStart and iconEnd (not startIcon / endIcon)?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's what I had originally, but changed to follow accordion-item.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we could confirm that - that does seem like it should match the property name? If it is intended to be the opposite of prop name, feel free to ignore.

Copy link
Contributor

@alisonailea alisonailea Nov 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per the naming schema https://github.com/Esri/calcite-design-system/wiki/tokens-naming-schema is should be [system]-[component]-[element]-[type]-[appearance] which would be --calcite-tab-icon-color-start/end

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on ☝️, we'll need to correct accordion-item's props too. cc @geospatialem

@alisonailea Can you update the schema diagram to include start/end as examples?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added #10894 to next month's December milestone for the accordion-item token refactor. cc @alisonailea

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the schema diagram to include start/end as examples

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alisonailea @macandcheese Any additional feedback on the name and PR besides start/end?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM !

* @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");
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-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 {
Expand Down
34 changes: 16 additions & 18 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 @@ -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";
Expand Down Expand Up @@ -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 {
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/
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>
`;
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-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>
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)",
"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)",
Expand Down
Loading