feat(tabs, tab-nav, tab-title, tab): add component tokens by aPreciado88 · Pull Request #11720 · Esri/calcite-design-system

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-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

 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

+
+  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

      <>
        <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

+    }
+
+    &: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


 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. 📚

ashetland · 2025-04-07T15:07:31Z

@ashetland I pushed an update with a couple of snapshot fixes. Could you please take a look?

LGTM!

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

jcfranco

Awesome stuff! 🚀 Good to merge after addressing relevant comments.

jcfranco · 2025-04-08T05:20:22Z

-  }
-
+@mixin x-button(
+  $size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)",


This can be done in a follow-up, but let's remove the comment. We don't need to annotate conversions.

jcfranco · 2025-04-08T05:23:17Z

+  $size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)",
+  $padding: "0",
+  $color: "var(--calcite-close-icon-color, var(--calcite-color-text-1))",
+  $backgroundColor: "var(--calcite-close-background-color, var(--calcite-color-transparent))",


For consistency, can you rename the arguments to be kebab-cased? This can also be done separately if desired.

jcfranco · 2025-04-08T05:27:16Z


  // #region Private Properties

+  private closeButtonEl = createRef<HTMLButtonElement>();


✨🏆🧹✨

jcfranco · 2025-04-08T05:29:13Z

  @apply flex;
 }

+.cancel-editing-button[appearance="transparent"][kind="neutral"] {


Are these changes related? If not, can we submit these in a separate PR?

~~This doesn't seem to be related to tabs, it was in the original tabs PR so I included it. I can take this part out and submit it separately 🐱‍👤~~

I did a bit more digging, this is related to the changes in button. I'll add this back in.

jcfranco · 2025-04-08T05:30:24Z

+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-tab-nav bordered"></calcite-tab-nav>`, {


The default tests shouldn't use bordered, right?

I updated this, thanks for catching it!

jcfranco · 2025-04-08T06:38:59Z

+      });
+    });
+
+    describe("bottom position", () => {


Should this go into the bordered test above?

jcfranco · 2025-04-08T06:45:15Z

  scrollButtonContainer: "scroll-button-container",
  scrollBackwardContainerButton: "scroll-button-container--backward",
  scrollForwardContainerButton: "scroll-button-container--forward",
+  tabNav: "tab-nav",


For consistency, the root element in an element should use container as the key and value for the CSS class lookup. The previous code wasn't using the proper class, so I'll defer to you whether to fix this here or in a follow-up PR.

jcfranco

Awesome stuff! 🚀 Good to merge after addressing relevant comments.

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

…s to container

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

…t css changes

aPreciado88 · 2025-04-09T15:40:55Z

@jcfranco I updated the PR with the requested changes!

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

**Related Issue:** [#7180](#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-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. --------- Co-authored-by: Anveshreddy mekala <anv11827@esri.com>

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 the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 4, 2025

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

bf756ab

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

jcfranco approved these changes Apr 8, 2025

View reviewed changes

aPreciado88 added 6 commits April 8, 2025 10:55

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

a45e1e1

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

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

1891798

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

dd555ea

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

7423434

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

feat(tabs, tab-nav, tab-title, tab): rename tab-nav root element clas…

5e88694

…s to container

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

795998c

…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 Apr 8, 2025

feat(tabs, tab-nav, tab-title, tab): restore inline-editable componen…

319597c

…t css changes

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 Apr 9, 2025

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

edc4c82

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

jcfranco approved these changes Apr 9, 2025

View reviewed changes

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

91b3dda

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 9, 2025

aPreciado88 merged commit 2d372de into dev Apr 9, 2025
17 checks passed

aPreciado88 deleted the aPreciado88/7180-add-tabs-design-tokens branch April 9, 2025 18:58

calcite-admin mentioned this pull request May 14, 2025

chore: release main #11890

Merged

This was referenced Jun 17, 2025

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

Closed

feat(tabs, tab, tab-title, tab-nav): update component tokens #10579

Closed


		// #region Private Properties

		private closeButtonEl = createRef<HTMLButtonElement>();

Conversation

aPreciado88 commented Mar 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Tabs

Tab-nav

Tab-title

Tab

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

geospatialem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ashetland commented Apr 7, 2025

Uh oh!

jcfranco left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aPreciado88 Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcfranco left a comment

Choose a reason for hiding this comment

Uh oh!

aPreciado88 commented Apr 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

aPreciado88 commented Mar 8, 2025 •

edited

Loading

aPreciado88 Apr 8, 2025 •

edited

Loading