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

jcfranco · 2024-10-12T21:24:43Z

Related Issue: #7180, #10497

Summary

Adds the following component tokens (CSS props):

--calcite-tab-accent-color-hover – Specifies the component's accent color when hovered.
--calcite-tab-accent-color-selected – Specifies the component's accent color when selected.
--calcite-tab-background-color – Specifies the component's background color.
--calcite-tab-background-color-hover – Specifies the component's background color when hovered.
--calcite-tab-content-space-y – Specifies the block padding of the component's content.
--calcite-tab-icon-color – Specifies the component's icon color.
--calcite-tab-icon-end-color – Specifies the component's `iconEnd` color. Fallback to `--calcite-tab-icon-color` or current color.
--calcite-tab-icon-start-color – Specifies the component's `iconStart` color. Fallback to `--calcite-tab-icon-color` or current color.
--calcite-tab-text-color – Specifies the component's text color.
--calcite-tab-text-color-selected – Specifies the component's text color when selected.
--calcite-tabs-background-color – The background color of the component.
--calcite-tabs-border-color – The border color of the component.

Deprecates the following CSS props:

--calcite-tab-content-block-padding

Notes

Depends on feat(tabs, tab-nav, tab-title, tab): add component tokens #10532.
Updates XButton to match close button styles and possibly consolidate in a follow-up PR.
Close button tokens skipped per feat(alert): add component tokens #10218 (review).
Simpler token set to prepare for Enhancement: Simplify calcite-tabs structure #2721 (most defined/scoped at the parent level).
Some themed test input tokens use internal ones defined and shared by the parent tabs (Allow themed to specify token target for inherited, internal CSS props #10569 should help clean this up).

@includes

:host .class-selectors :host([prop]) selectors @includes @Keyframes

simplify background color and border across appearance and kind

…openPR/7180-button # Conflicts: # packages/calcite-components/src/components/button/button.e2e.ts

* icon-color * icon-start-color * icon-end-color * x-button * drop unused anchor rule * border

…nt-tokens

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

jcfranco · 2024-10-18T18:39:42Z

packages/calcite-components/src/demos/tabs.html

@@ -46,36 +50,6 @@
        <div class="child">large</div>
      </div>

-      <!-- simple tab-nav -->


Removed since this is not a supported configuration.

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

alisonailea

Looks good Franco. Given our in-person conversation, I think most of the -hover -press tokens can be removed as these are slotted components. Also can the x-button be pulled into a function/mixin for reusability as well as the "accent-color" styles which I think should be shared across the app but I'd defer to @SkyeSeitz and @ashetland for that.

I was having a hard time explaining the change requests in comments so I made a draft PR #10579

alisonailea · 2024-10-22T16:25:59Z

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

@@ -19,7 +19,7 @@
  .content {
    @apply text-n2h py-1;
  }
-  .close-button {
+  .x-button {


should these x-button styles be moved to a shared mixin?

alisonailea · 2024-10-22T16:53:18Z

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

@@ -3,7 +3,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
- * @prop --calcite-tab-content-block-padding: Specifies the block padding of the component's content in the `default` slot.
+ * @prop --calcite-tab-content-block-padding: [Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot.


I know it's documented in "tabs" but I think we should add --calcite-tab-content-space-y docs here as well since it's used in the component.

alisonailea · 2024-10-22T16:54:55Z

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

@@ -3,7 +3,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
- * @prop --calcite-tab-content-block-padding: Specifies the block padding of the component's content in the `default` slot.
+ * @prop --calcite-tab-content-block-padding: [Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot.
 */

 :host([selected]) {


can you replace lines 9 - 24 with the following to clean up styles

:host { @apply hidden h-full w-full; } :host([selected]) { @apply block h-full w-full overflow-auto; section, .container { @apply block; } }

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

github-actions · 2024-11-01T02:03:52Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

alisonailea and others added 27 commits September 16, 2024 12:08

WIP (button): component tokens

26dba74

chore(button): remove extraneous selectors

64a3416

chore(button): merge duplicate selectors

ec06957

chore(button): reorder selectors

83ab859

:host .class-selectors :host([prop]) selectors @includes @Keyframes

chore(button): rename internal variables

a72a9a7

chore(button): sort style props

bd23ace

chore(button): sort tailwind styles

a7882a2

feat(button): add corner radius tokens

946d56f

feat(button): component tokens

1d0ce0c

simplify background color and border across appearance and kind

WIP: button tokens

19ff52a

feat(button): add component tokens

3e12f4f

chore(inline-editable): cancel-editing-button color control

11d4c63

fix(button): transparent hover and focus

7f3606e

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

7d8fbc1

…openPR/7180-button # Conflicts: # packages/calcite-components/src/components/button/button.e2e.ts

test(button): passing tests

649ea0a

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

af110de

ready to consolidate x and close buttons

819fe71

update component tokens

177aece

restart tab-title

90869c1

* icon-color * icon-start-color * icon-end-color * x-button * drop unused anchor rule * border

selected indicator

fa592e5

text color

554c287

wip

e5592aa

Merge branch 'astump/7180-button' into jcfranco/7180-add-tabs-compone…

9bcb7cd

…nt-tokens

fix borders

584f70c

style nav buttons

bcc382b

tidy up

4eaec22

update tests (tab-nav-pending)

1f22e7d

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Oct 12, 2024

jcfranco changed the title ~~WIP (button): component tokens~~ feat(tabs, tab-nav, tab-title, tab): add component tokens Oct 12, 2024

merge dev

c266b6a

prevent x-button from becoming squished

9768a33

jcfranco 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 Oct 15, 2024

jcfranco mentioned this pull request Oct 17, 2024

feat(tabs): add component tokens #10270

Closed

jcfranco added 7 commits October 18, 2024 11:22

fix e2e tests

c7a358b

fix nav button color regression

167a3f5

drop unused functional component

35d8453

tidy up

8f6939d

update demo page

73862c3

improve theming screenshot test

21a0acc

tidy up

4ad8955

jcfranco 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 Oct 18, 2024

fix click handler not being passed into x-button

5bbb6ec

jcfranco 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 Oct 21, 2024

jcfranco marked this pull request as ready for review October 21, 2024 17:04

jcfranco requested a review from benelan as a code owner October 21, 2024 17:04

jcfranco requested review from alisonailea, eriklharper, macandcheese and Elijbet and removed request for benelan October 21, 2024 17:06

macandcheese reviewed Oct 21, 2024

View reviewed changes

packages/calcite-components/src/components/tabs/tabs.scss Show resolved Hide resolved

jcfranco commented Oct 21, 2024

View reviewed changes

alisonailea requested changes Oct 22, 2024

View reviewed changes

geospatialem mentioned this pull request Oct 28, 2024

[Tabs] Improve UX of overflow affordance #10177

Open

6 tasks

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Nov 1, 2024

alisonailea mentioned this pull request Nov 6, 2024

Design token phase II - Integration across components #7180

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jcfranco commented Oct 12, 2024 •

edited

Loading

jcfranco Oct 18, 2024

alisonailea left a comment

alisonailea Oct 22, 2024

alisonailea Oct 22, 2024

alisonailea Oct 22, 2024

github-actions bot commented Nov 1, 2024

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

Are you sure you want to change the base?

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

Conversation

jcfranco commented Oct 12, 2024 • edited Loading

Summary

Notes

jcfranco Oct 18, 2024

Choose a reason for hiding this comment

alisonailea left a comment

Choose a reason for hiding this comment

alisonailea Oct 22, 2024

Choose a reason for hiding this comment

alisonailea Oct 22, 2024

Choose a reason for hiding this comment

alisonailea Oct 22, 2024

Choose a reason for hiding this comment

github-actions bot commented Nov 1, 2024

jcfranco commented Oct 12, 2024 •

edited

Loading