feat(panel): Add component tokens #10822
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
enhancement
macandcheese
added
design-tokens
macandcheese
requested review from
driskull,
alisonailea,
SkyeSeitz and
ashetland
macandcheese
added
pr ready for visual snapshots
alisonailea
requested changes
Nov 21, 2024
| * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` Action components when pressed. Will apply to any slotted Calcite Action components. | ||
| * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Action components when hovered. Will apply to any slotted Calcite Action components. | ||
| * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Action components when pressed. Will apply to any slotted Calcite Action components. | ||
| * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered Popover component, which is rendered within an Action Menu when slotted Actions are present in the `header-actions-end` slot. Will apply to any slotted Calcite Popover components. | ||
| */ | ||
|
|
||
| :host { |
There was a problem hiding this comment.
border-radius needs to be added to the :host or the component doesn't look right.
There was a problem hiding this comment.
Yeah I don't know if this component needs @extend %component-host; at all which places that visible background that isn't clipped. Might be able to remove that and not have to set the radius on :host
There was a problem hiding this comment.
I was able to just take what was needed from %component-host and not set a background color on :host. Could you verify: https://www.chromatic.com/build?appId=6266d45509d7eb004aa254fb&number=6466
There was a problem hiding this comment.
Going to merge in.
macandcheese
added
pr ready for visual snapshots
macandcheese
added
pr ready for visual snapshots
github-actions
bot
added this to the 2024-11-26 - 3.0.0 Nov Breaking Change Milestone milestone
This was referenced Nov 21, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #7180
This will also serve as a pattern for consuming component like Dialog, Sheet, etc.
Summary
--calcite-panel-corner-radius: Specifies the corner radius of the component.--calcite-panel-heading-text-color: Specifies the text color of the component'sheading.--calcite-panel-description-text-color: Specifies the text color of the component'sdescription.--calcite-panel-border-color: Specifies the border color of the component.--calcite-panel-background-color: Specifies the background color of the component.--calcite-panel-header-background-color: Specifies the background color of the component's footer.--calcite-panel-footer-background-color: Specifies the background color of the component's footer.--calcite-panel-space: Specifies the padding of the component's"unnamed (default)"slot.--calcite-panel-header-content-space: Specifies the padding of the"header-content"slot.--calcite-panel-footer-space: Specifies the padding of the component's footer.--calcite-action-background-color: Specifies the background color of the component'sclosable,collapsible, andbackAction components. Will apply to any slotted Calcite Action components.--calcite-action-background-color-hover: Specifies the background color of the component'sclosable,collapsible, andbackAction components when hovered. Will apply to any slotted Calcite Action components.--calcite-action-background-color-pressed: Specifies the background color of the component'sclosable,collapsible, andbackAction components when pressed. Will apply to any slotted Calcite Action components.--calcite-action-text-color-hover: Specifies the text and icon color of the component'sclosable,collapsible, andbackAction components when hovered. Will apply to any slotted Calcite Action components.--calcite-action-text-color-pressed: Specifies the text and icon color of the component'sclosable,collapsible, andbackAction components when pressed. Will apply to any slotted Calcite Action components.--calcite-popover-border-color: Specifies the border color of the component's Calcite Popover component, which is used to display a Calcite Action Menu when slotted Calcite Actions are present in theheader-actions-endslot. Will apply to any slotted Calcite Popover components.--calcite-panel-content-space: [Deprecated] Specifies the padding of the component's content. Use--calcite-panel-spaceinstead.--calcite-panel-footer-padding: [Deprecated] Specifies the padding of the component's footer. Use--calcite-panel-footer-spaceinstead.--calcite-panel-header-border-block-end: [Deprecated] Specifies the component header's block end border. Use--calcite-panel-border-colorinstead.