feat(tabs, tab-nav, tab-title, tab): add component tokens#10532
feat(tabs, tab-nav, tab-title, tab): add component tokens#10532
Conversation
: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
jcfranco
added
the
pr ready for visual snapshots
jcfranco
changed the title
jcfranco
added
pr ready for visual snapshots
jcfranco
added
pr ready for visual snapshots
jcfranco
requested review from
Elijbet,
alisonailea,
eriklharper and
macandcheese
and removed request for
benelan
| <div class="child">large</div> | ||
| </div> | ||
|
|
||
| <!-- simple tab-nav --> |
There was a problem hiding this comment.
Removed since this is not a supported configuration.
alisonailea
left a comment
alisonailea
left a comment
There was a problem hiding this comment.
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
| @apply text-n2h py-1; | ||
| } | ||
| .close-button { | ||
| .x-button { |
There was a problem hiding this comment.
should these x-button styles be moved to a shared mixin?
| * 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. |
There was a problem hiding this comment.
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.
| * @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]) { |
There was a problem hiding this comment.
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;
}
}
|
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. |
github-actions
Bot
added
the
Stale
|
Closing, as this was addressed in #11720. Thanks, @aPreciado88! |
3 participants
Related Issue: #7180, #10497
Summary
Adds the following component tokens (CSS props):
Deprecates the following CSS props:
--calcite-tab-content-block-paddingNotes
XButtonto match close button styles and possibly consolidate in a follow-up PR.themedtest input tokens use internal ones defined and shared by the parenttabs(Allowthemedto specify token target for inherited, internal CSS props #10569 should help clean this up).