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

fix(panel): apply custom styles correctly to header actions #11495

Merged
merged 20 commits into from
Feb 26, 2025
Merged

fix(panel): apply custom styles correctly to header actions #11495

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2b314be
chore(accordion): deprecate accordion-item tokens
alisonailea Jan 27, 2025
1af7a1c
fix(panel): solution 1 - CSS parts
alisonailea Feb 7, 2025
ca25807
chore(panel): clean up PARTS
alisonailea Feb 7, 2025
9e588ac
fix(panel): solution 2 - correct targeting of all calcite-actions in …
alisonailea Feb 7, 2025
b6da073
fix(panel): unnecessary fallback
alisonailea Feb 7, 2025
68b10a9
fix(panel): solution 1 - CSS parts
alisonailea Feb 7, 2025
f9ba8db
chore(panel): clean up PARTS
alisonailea Feb 7, 2025
b2bfdc8
fix(panel): solution 2 - correct targeting of all calcite-actions in …
alisonailea Feb 7, 2025
268be2b
fix(panel): unnecessary fallback
alisonailea Feb 7, 2025
dd6a471
Merge branch 'astump/panel-header' of github.com:Esri/calcite-design-…
alisonailea Feb 10, 2025
dd25cc8
chore(panel): clean up based on comments - remove :parts
alisonailea Feb 10, 2025
c9510fc
Merge branch 'dev' into astump/panel-header
alisonailea Feb 10, 2025
5a4b35d
fix(panel): update action token assignments per @macandcheese comments
alisonailea Feb 12, 2025
fe9aecd
fix(panel): pass corner radius through
alisonailea Feb 12, 2025
e4f8ad1
chore(panel): fix border radius tests
alisonailea Feb 14, 2025
b208eeb
drop unnecessary style (handled by util)
jcfranco Feb 26, 2025
4047849
revert unrelated changes
jcfranco Feb 26, 2025
a8d3351
drop unused internal CSS prop
jcfranco Feb 26, 2025
6b2862d
add panel to custom-theme story
jcfranco Feb 26, 2025
6c543b2
restore border: inherit as display: contents has no effect on inherit…
jcfranco Feb 26, 2025
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
69 changes: 43 additions & 26 deletions packages/calcite-components/src/components/accordion-item/accordion-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,24 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-accordion-border-color: [Deprecated] Use `--calcite-accordion-item-border-color`. Specifies the component's border color.
* @prop --calcite-accordion-item-background-color: Specifies the component's background color.
* @prop --calcite-accordion-item-border-color: Specifies the component's border color.
* @prop --calcite-accordion-item-icon-color-end: Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
* @prop --calcite-accordion-item-icon-color-start: Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
* @prop --calcite-accordion-border-color: Specifies the component's border color.
* @prop --calcite-accordion-background-color: Specifies the component's background color.
* @prop --calcite-accordion-text-color: Specifies the component's text color.
* @prop --calcite-accordion-text-color-hover: Specifies the component's main text color on hover.
* @prop --calcite-accordion-text-color-pressed: Specifies the component's main text color when pressed.

* @prop --calcite-accordion-item-background-color: [Deprecated] Use --calcite-accordion-background-color. Specifies the component's background color.
* @prop --calcite-accordion-item-border-color: [Deprecated] Use --calcite-accordion-border-color. Specifies the component's border color.
* @prop --calcite-accordion-item-content-space: Specifies the component's padding.
* @prop --calcite-accordion-item-end-icon-color: [Deprecated] Use `--calcite-accordion-item-icon-color-end`. Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
* @prop --calcite-accordion-item-end-icon-color: Specifies the component's iconEnd color. Fallback to --calcite-accordion-item-icon-color or current color.
* @prop --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color.
* @prop --calcite-accordion-item-header-background-color: Specifies the component's `heading` background color.
* @prop --calcite-accordion-item-heading-text-color: Specifies the component's `heading` text color.
* @prop --calcite-accordion-item-icon-color: Specifies the component's default icon color.
* @prop --calcite-accordion-item-start-icon-color: [Deprecated] Use `--calcite-accordion-item-icon-color-start`. Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
* @prop --calcite-accordion-item-text-color: Specifies the component's text color.
* @prop --calcite-accordion-text-color-hover: [Deprecated] Use `--calcite-accordion-item-text-color-hover`. Specifies the component's main text color on hover.
* @prop --calcite-accordion-text-color-pressed: [Deprecated] Use `--calcite-accordion-item-text-color-press`. Specifies the component's main text color when pressed.
* @prop --calcite-accordion-text-color: [Deprecated] Use `--calcite-accordion-item-text-color`. Specifies the component's text color.
* @prop --calcite-accordion-item-header-background-color: Specifies the component's heading background color.
* @prop --calcite-accordion-item-heading-text-color: Specifies the component's heading text color.
* @prop --calcite-accordion-item-icon-color: [Deprecated] Use --calcite-icon-color. Specifies the component's default icon color.
* @prop --calcite-accordion-item-start-icon-color: Specifies the component's iconStart color. Fallback to --calcite-accordion-item-icon-color or current color.
* @prop --calcite-accordion-item-text-color: [Deprecated] Use --calcite-accordion-text-color. Specifies the component's text color.
* @prop --calcite-accordion-item-text-color-hover: [Deprecated] Use --calcite-accordion-text-color-hover. Specifies the component's text color on hover.
* @prop --calcite-accordion-item-text-color-press: [Deprecated] Use --calcite-accordion-text-color-press. Specifies the component's text color on press.
*/

%icon-position {
Expand All @@ -35,8 +37,8 @@
flex-col
no-underline;

color: var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)));
background-color: var(--calcite-accordion-item-background-color);
color: var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)));
background-color: var(--calcite-accordion-background-color, var(--calcite-accordion-item-background-color));
border-width: 0;

.header {
Expand Down Expand Up @@ -72,8 +74,8 @@
border-block-end-width: var(--calcite-border-width-sm);
border-block-end-style: solid;
border-color: var(
--calcite-accordion-item-border-color,
var(--calcite-accordion-border-color, theme("borderColor.color.2"))
--calcite-accordion-border-color,
var(--calcite-accordion-item-border-color, theme("borderColor.color.2"))
);
}

Expand Down Expand Up @@ -193,7 +195,7 @@
.expand-icon {
color: var(
--calcite-accordion-item-expand-icon-color,
var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)))
var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)))
);
margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-start);
margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-end);
Expand All @@ -217,15 +219,18 @@
.heading {
color: var(
--calcite-accordion-item-heading-text-color,
var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
var(
--calcite-accordion-text-color-hover,
var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
)
);
}
}

:host([expanded]) {
color: var(
--calcite-accordion-item-text-color,
var(--calcite-accordion-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)))
--calcite-accordion-text-color-pressed,
var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-1)))
);

.header {
Expand All @@ -236,8 +241,14 @@
color: var(
--calcite-accordion-item-expand-icon-color,
var(
--calcite-accordion-item-text-color,
var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))
--calcite-accordion-text-color-hover,
var(
--calcite-accordion-text-color,
var(
--calcite-accordion-item-text-color,
var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
)
)
)
);
transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation));
Expand All @@ -248,8 +259,14 @@

.description {
color: var(
--calcite-accordion-item-text-color,
var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))
--calcite-accordion-text-color-hover,
var(
--calcite-accordion-text-color,
var(
--calcite-accordion-item-text-color,
var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
)
)
);
}

Expand Down
5 changes: 4 additions & 1 deletion packages/calcite-components/src/components/accordion/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-accordion-border-color: Specifies the component's border color.
* @prop --calcite-accordion-background-color: Specifies the component's background color.
* @prop --calcite-accordion-background-color: Specifies the component's background color.
* @prop --calcite-accordion-text-color: Specifies the component's text color.
* @prop --calcite-accordion-text-color-hover: Specifies the component's main text color on hover.
* @prop --calcite-accordion-text-color-pressed: Specifies the component's main text color when pressed.
*/

:host {
Expand Down
21 changes: 13 additions & 8 deletions packages/calcite-components/src/components/action/action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,18 @@
@extend %component-host;
@apply flex bg-transparent cursor-pointer;
--calcite-internal-action-text-color: var(--calcite-color-text-3);

border-radius: var(
--calcite-action-corner-radius,
var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius))
var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius))
var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius))
var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius))
);
}

.interaction-container {
Copy link
Member

Choose a reason for hiding this comment

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

This isn't needed since interaction-container uses display: contents and doesn't produce a box.

Copy link
Member

@jcfranco jcfranco Feb 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

For posterity: I restored this override as I was completely wrong on this one. display: contents doesn't have any effect on inheritance, so my suggestion broke styling.

border-radius: inherit;
}

:host([drag-handle]) {
Expand All @@ -30,15 +42,8 @@
--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs);
}

:host,
.button {
border-radius: var(
--calcite-action-corner-radius,
var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius))
var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius))
var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius))
var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius))
);
border-radius: inherit;
}

@mixin action-indicator() {
Expand Down
1 change: 0 additions & 1 deletion packages/calcite-components/src/components/panel/panel.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -721,7 +721,6 @@ describe("calcite-panel", () => {
</calcite-panel>`,
{
"--calcite-panel-corner-radius": {
shadowSelector: `.${CSS.container}`,
targetProp: "borderRadius",
},
"--calcite-panel-heading-text-color": {
Expand Down
62 changes: 19 additions & 43 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 @@ -9,31 +9,26 @@
* @prop --calcite-panel-border-color: Specifies the component's border color.
* @prop --calcite-panel-background-color: Specifies the component's background color.
* @prop --calcite-panel-header-background-color: Specifies the background color of the component's header.
* @prop --calcite-panel-header-action-background-color: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
* @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered.
* @prop --calcite-panel-header-action-background-color-press: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed.
* @prop --calcite-panel-header-action-text-color: Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
* @prop --calcite-panel-header-action-text-color-press: Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed.
* @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
* @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot.
* @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot.
* @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.
* @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
* @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
* @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
* @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
* @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
* @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
* @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-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-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 {
@apply relative flex w-full h-full flex-auto overflow-hidden box-border;

--calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp));
}

@include disabled();
Expand Down Expand Up @@ -94,11 +89,11 @@
}

.container {
--calcite-internal-panel-corner-radius: inherit;
@apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0 overflow-hidden box-border text-n1 text-color-2;
transition:
max-block-size var(--calcite-animation-timing),
inline-size var(--calcite-animation-timing);
border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
box-sizing: border-box;
font-size: var(--calcite-font-size--1);
}
Expand All @@ -113,8 +108,7 @@

.header {
@apply flex flex-col z-header;
border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) 0 0;

background-color: var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));
border-block-end: 1px solid
var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)));
Expand Down Expand Up @@ -149,15 +143,6 @@
margin-inline-end: auto;
justify-content: center;

.header-actions {
--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);
--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);
--calcite-action-background-color: var(--calcite-panel-header-action-background-color);
--calcite-action-indicator-color: var(--calcite-panel-header-action-indicator-color);
--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press);
--calcite-action-text-color: var(--calcite-panel-header-action-text-color);
}

.heading,
.description {
@apply block
Expand All @@ -181,6 +166,17 @@
}
}

#close,
#collapse,
.back-button,
calcite-action-menu {
--calcite-action-background-color: var(--calcite-panel-header-action-background-color);
--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);
--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);
--calcite-action-text-color: var(--calcite-panel-header-action-text-color);
--calcite-action-text-color-pressed: var(--calcite-panel-header-action-text-color-pressed);
}
Copy link
Member

Choose a reason for hiding this comment

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

Does --calcite-action-corner-radius need to be set here? Possibly by --calcite-internal-panel-corner-radius?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No this is covered by the corner radius of the action containers.


.back-button {
@apply border-0
border-solid;
Expand All @@ -199,24 +195,6 @@
margin-inline-start: theme("margin.auto");
}

#close,
#collapse,
.back-button,
calcite-action-menu {
}

#close,
#collapse,
calcite-action-menu {
&:last-child {
--calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius);
}
}

.back-button {
--calcite-action-corner-radius-start-start: var(--calcite-panel-corner-radius);
}

.content-wrapper {
@apply flex
flex-auto
Expand Down Expand Up @@ -257,8 +235,6 @@ calcite-action-menu {
var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space))
);
background-color: var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1));
border-radius: 0 0 var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
}

.footer-content {
Expand Down
Loading