feat(panel): control panel header action tokens #11300
Open
+29
−0
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
|
The alternative is for the user to reset actions in the CSS cascade calcite-panel {
--calcite-panel-header-background-color: #004874;
--calcite-panel-heading-text-color: #fff;
--calcite-action-background-color: #004874;
--calcite-action-background-color-hover: #023452;
--calcite-action-background-color-pressed: #023452;
--calcite-action-text-color: #fff;
--calcite-action-text-color-hover: #fff;
--calcite-action-text-color-pressed: #fff;
.panel-body {
--calcite-action-background-color: initial;
--calcite-action-background-color-hover: initial;
--calcite-action-background-color-pressed: initial;
--calcite-action-text-color: intial;
--calcite-action-text-color-hover: initial;
--calcite-action-text-color-pressed: initial;
}
} |
driskull
requested changes
Jan 14, 2025
| @@ -26,6 +26,15 @@ | |||
| * @prop --calcite-panel-content-space: [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content. | |||
| * @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer. | |||
| * @prop --calcite-panel-header-border-block-end: [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border. | |||
|
|
|||
| * @prop --calcite-panel-header-action-menu-items-space: Specifies the space between actions in the header's action menu. | |||
| * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of the component's `calcite-action` items in the panel header when hovered. | |||
There was a problem hiding this comment.
Looks like a double space here inbetween items in. Applies to multiple lines here.
| @@ -147,6 +156,26 @@ | |||
| margin-inline-end: auto; | |||
| justify-content: center; | |||
|
|
|||
| .header-actions { | |||
| --calcite-action-menu-items-space: var(--calcite-panel-header-action-menu-items-space, 0); | |||
There was a problem hiding this comment.
I don't think the 0 is needed here as its the default in the action-menu.scss. right?
My concern is that the 0 within the action-menu should be the source of truth. If action-menu changes to something other than 0 then how would we know to update this as well?
There was a problem hiding this comment.
Applies to other fallback defaults below.
There was a problem hiding this comment.
I know this is a public prop on Action Menu - I'm not sure the history there (or if needed on that component), but I don't know if this needs to be added here - I think just the color ones are good for this.
macandcheese
approved these changes
Jan 14, 2025
| * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of the component's `calcite-action` items in the panel header when hovered. | ||
| * @prop --calcite-panel-header-action-background-color-press: Specifies the background color of the component's `calcite-action` items in the panel header when pressed. | ||
| * @prop --calcite-panel-header-action-background-color: Specifies the background color of the component's `calcite-action` items in the panel header. | ||
| * @prop --calcite-panel-header-action-corner-radius: Specifies the corner radius of the component's `calcite-action` items in the panel header. |
There was a problem hiding this comment.
This one might not be needed?
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.
Summary
Per discussion on Teams. Allows the action menu in panel header shadowDom to be controlled separately from other tokens without a reset per customer request.
Adds Tokens
--calcite-panel-header-action-menu-items-space: Specifies the space between actions in the header's action menu.
--calcite-panel-header-action-background-color-hover: Specifies the background color of the component's
calcite-actionitems in the panel header when hovered.--calcite-panel-header-action-background-color-press: Specifies the background color of the component's
calcite-actionitems in the panel header when pressed.--calcite-panel-header-action-background-color: Specifies the background color of the component's
calcite-actionitems in the panel header.--calcite-panel-header-action-corner-radius: Specifies the corner radius of the component's
calcite-actionitems in the panel header.--calcite-panel-header-action-indicator-color: Specifies the color of the component's
calcite-actionitems' indicator in the panel header.--calcite-panel-header-action-text-color-press: Specifies the text color of the component's
calcite-actionitems in the panel header when pressed.--calcite-panel-header-action-text-color: Specifies the text color of the component's
calcite-actionitems in the panel header.