feat(tabs, tab-nav, tab-title, tab): add component tokens #11720

aPreciado88 · 2025-03-08T00:47:20Z

Related Issue: #7180

Summary

Add css tokens to the following components.

Tabs

--calcite-tab-background-color: When bordered, specifies the component's background color.
--calcite-tab-border-color: Specifies the component's border color.

Tab-nav

--calcite-tab-background-color: When calcite-tabs is bordered, specifies the component's background color.
--calcite-tab-border-color: When calcite-tabs is bordered, specifies the component's border color.
--calcite-tab-text-color: Specifies the component's iconStart, iconEnd, and text color.

Tab-title

--calcite-tab-text-color: Specifies the component's text color.
--calcite-tab-border-color: Specifies the component's border color.
--calcite-tab-background-color: Specifies the component's background color.
--calcite-tab-background-color-hover: When calcite-tabs is bordered, specifies the component's background color when hovered.
--calcite-tab-accent-color: Specifies the component's accent color.
--calcite-tab-accent-color-hover: Specifies the component's accent color when hovered.
--calcite-tab-accent-color-press: Specifies the component's accent color when selected or active.
--calcite-tab-close-icon-color: Specifies the component's close element icon color.
--calcite-tab-close-icon-color-press: Specifies the component's close element icon color when hovered, focused, and active.
--calcite-tab-close-icon-background-color: Specifies the component's close element icon background color.
--calcite-tab-close-icon-background-color-press: Specifies the component's close element icon background color when hovered, focused, and active.

Tab

--calcite-tab-content-space-y: Specifies the vertical space between the component's content in the default slot.

…ciado88/7180-add-tabs-design-tokens

…2e tests

…ciado88/7180-add-tabs-design-tokens

macandcheese · 2025-03-19T17:46:35Z

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

@@ -25,10 +25,11 @@ import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 import { getIconScale } from "../../utils/component";
 import { IconNameOrString } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
+import { XButton } from "../functional/XButton";


Do we want to separate this x button refactor into a separate PR (applies to changes to other components like Button, Combobox)

@jcfranco Should we split this up?

I think it's fine, but I'll defer to you. IIRC, the ✖️ button needed to be adjusted for the tabs tokens work.

We can install this as is 🚀

macandcheese · 2025-03-19T17:47:46Z

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

+
+  padding-block: var(
+    --calcite-tab-content-space-y,
+    var(--calcite-tab-content-block-padding, var(--calcite-internal-tabs-content-space-y-fallback))


Is this -fallback portion needed?

I can take the -fallback bit out

anveshmekala · 2025-03-19T21:56:57Z

packages/calcite-components/src/components/tabs/tabs.tsx

@@ -195,7 +195,7 @@ export class Tabs extends LitElement {
    return (
      <>
        <slot name={SLOTS.titleGroup} />
-        <section>
+        <section class={CSS.section}>


Don't think this is required. We can leverage tag selector in theme tests.

Applies to resource & e2e files.

@anveshmekala I tried using tag selection but the test won't pass. I looked at other themed tests and couldn't find a tag selection example setup that works, other than using the section class as a selector.

Interesting, it is working for me as expected. I might be missing something here. Attached ref #11778

It works using your setup, I'll update the PR with your update. Thank you!

…ciado88/7180-add-tabs-design-tokens

anveshmekala · 2025-03-19T22:17:13Z

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

+    }
+
+    &:host(:hover) .container::after {
+      background-color: var(--calcite-tab-background-color, var(--calcite-color-foreground-2));


I think this should be --calcite-tab-background-color-hover to customize the hover background-color which has a different default value.

Applies to other places in this file.

anveshmekala · 2025-03-19T22:34:12Z

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

@@ -4,12 +4,13 @@ export const ICON = {
 } as const;

 export const CSS = {
-  container: "tab-nav",
+  container: "container",


Nitpick: No longer required.

…css variable

geospatialem

Great stuff! Have a few doc-consistency suggestions for consideration. 📚

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

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

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

**Related Issue:** # ## Summary

…ciado88/7180-add-tabs-design-tokens

…e tests

…ciado88/7180-add-tabs-design-tokens

aPreciado88 · 2025-03-28T17:24:11Z

@ashetland @SkyeSeitz Can you please take a look?

feat(tabs, tab-nav, tab-title, tab): add component tokens

0a53156

github-actions bot assigned aPreciado88 Mar 8, 2025

github-actions bot added the enhancement Issues tied to a new feature or request. label Mar 8, 2025

aPreciado88 added 4 commits March 7, 2025 16:53

feat(tabs, tab-nav, tab-title, tab): update token description

d09a315

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

b39dd95

…ciado88/7180-add-tabs-design-tokens

feat(tabs, tab-nav, tab-title, tab): update e2e tests

c679ee7

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

ee8435c

…ciado88/7180-add-tabs-design-tokens

aPreciado88 requested a review from jcfranco March 12, 2025 22:10

aPreciado88 added 7 commits March 13, 2025 08:59

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

de0df4e

…ciado88/7180-add-tabs-design-tokens

feat(tabs, tab-nav, tab-title, tab): add xbutton ref to fix failing e…

3147a82

…2e tests

feat(tabs, tab-nav, tab-title, tab): update css token names

1f144bf

feat(tabs, tab-nav, tab-title, tab): update failing e2e tests

3a68636

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

d953d7d

…ciado88/7180-add-tabs-design-tokens

feat(tabs, tab-nav, tab-title, tab): update skipped e2e tests

b886841

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

784a54b

…ciado88/7180-add-tabs-design-tokens

macandcheese reviewed Mar 19, 2025

View reviewed changes

aPreciado88 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 19, 2025

feat(tabs, tab-nav, tab-title, tab): rename internal css token

33d38e0

anveshmekala reviewed Mar 19, 2025

View reviewed changes

aPreciado88 marked this pull request as ready for review March 19, 2025 21:58

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

367b34e

…ciado88/7180-add-tabs-design-tokens

anveshmekala reviewed Mar 19, 2025

View reviewed changes

feat(tabs, tab-nav, tab-title, tab): remove unused tab-nav resources …

0368049

…css variable

geospatialem reviewed Mar 20, 2025

View reviewed changes

aPreciado88 added 2 commits March 20, 2025 17:17

feat(tabs, tab-nav, tab-title, tab): rename and add css tokens

65fdd4c

feat(tabs, tab-nav, tab-title, tab): update css token description

e77a44c

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Mar 21, 2025

aPreciado88 added this to the 2025-04-29 - Apr Milestone milestone Mar 21, 2025

anveshmekala and others added 9 commits March 21, 2025 09:38

refactor(tabs): use tag selector (#11778)

dbc8ee6

**Related Issue:** # ## Summary

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

79fad63

…ciado88/7180-add-tabs-design-tokens

feat(tabs, tab-nav, tab-title, tab): update css tokens descriptions

3ca8f54

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

5e64c7c

…ciado88/7180-add-tabs-design-tokens

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

2829e61

…ciado88/7180-add-tabs-design-tokens

feat(tabs, tab-nav, tab-title, tab): update css tokens descriptions

0436cb6

feat(tabs, tab-nav, tab-title, tab): update css tokens descriptions

a242dd9

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

0315370

…ciado88/7180-add-tabs-design-tokens

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

2dea22b

…ciado88/7180-add-tabs-design-tokens

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Mar 25, 2025

aPreciado88 added 2 commits March 25, 2025 14:26

feat(tabs, tab-nav, tab-title, tab): use class selectors in themed e2…

80806f8

…e tests

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

619aa51

…ciado88/7180-add-tabs-design-tokens

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Mar 25, 2025

aPreciado88 added 2 commits March 27, 2025 09:09

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

25c184e

…ciado88/7180-add-tabs-design-tokens

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

b39069d

…ciado88/7180-add-tabs-design-tokens

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Mar 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tabs, tab-nav, tab-title, tab): add component tokens #11720

feat(tabs, tab-nav, tab-title, tab): add component tokens #11720

aPreciado88 commented Mar 8, 2025 •

edited

Loading

macandcheese Mar 19, 2025

aPreciado88 Mar 19, 2025

jcfranco Mar 28, 2025

aPreciado88 Mar 28, 2025

macandcheese Mar 19, 2025

aPreciado88 Mar 19, 2025

anveshmekala Mar 19, 2025

anveshmekala Mar 19, 2025

aPreciado88 Mar 19, 2025

anveshmekala Mar 20, 2025

aPreciado88 Mar 21, 2025

anveshmekala Mar 19, 2025

anveshmekala Mar 19, 2025

geospatialem left a comment

aPreciado88 commented Mar 28, 2025

feat(tabs, tab-nav, tab-title, tab): add component tokens #11720

Are you sure you want to change the base?

feat(tabs, tab-nav, tab-title, tab): add component tokens #11720

Conversation

aPreciado88 commented Mar 8, 2025 • edited Loading

Summary

Tabs

Tab-nav

Tab-title

Tab

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

geospatialem left a comment

Choose a reason for hiding this comment

aPreciado88 commented Mar 28, 2025

aPreciado88 commented Mar 8, 2025 •

edited

Loading