Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(panel): control panel header action tokens #11300

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
+29 −0
Open

feat(panel): control panel header action tokens #11300

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions packages/calcite-components/src/components/panel/panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a double space here inbetween items in. Applies to multiple lines here.

* @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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one might not be needed?

* @prop --calcite-panel-header-action-indicator-color: Specifies the color of the component's `calcite-action` items' indicator in the panel header.
* @prop --calcite-panel-header-action-text-color-press: Specifies the text color of the component's `calcite-action` items in the panel header when pressed.
* @prop --calcite-panel-header-action-text-color: Specifies the text color of the component's `calcite-action` items in the panel header.
*/

:host {
Expand Down Expand Up @@ -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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Applies to other fallback defaults below.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

--calcite-action-background-color-hover: var(
--calcite-panel-header-action-background-color-hover,
var(--calcite-color-foreground-2)
);
--calcite-action-background-color-press: var(
--calcite-panel-header-action-background-color-press,
var(--calcite-color-foreground-3)
);
--calcite-action-background-color: var(
--calcite-panel-header-action-background-color,
var(--calcite-color-foreground-1)
);
--calcite-action-corner-radius: var(--calcite-panel-header-action-corner-radius, var(--calcite-corner-radius));
--calcite-action-indicator-color: var(--calcite-panel-header-action-indicator-color, var(--calcite-color-brand));
--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press, var(--calcite-color-text-1))
--calcite-action-text-color: var(--calcite-panel-header-action-text-color, var(--calcite-color-text-3));
}

.heading,
.description {
@apply block
Expand Down
Loading