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 4 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
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
56 changes: 34 additions & 22 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,25 +9,25 @@
* @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 the component's `header-actions`.
* @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of the component's `header-actions` when hovered.
* @prop --calcite-panel-header-action-background-color-press: Specifies the background color of the component's `header-actions` when pressed or active.
* @prop --calcite-panel-header-action-text-color: Specifies the text and icon color of the component's `header-actions`.
* @prop --calcite-panel-header-action-text-color-hover: Specifies the text and icon color of the component's `header-actions` when hovered.
* @prop --calcite-panel-header-action-text-color-press: Specifies the text and icon color of the component's `header-actions` when pressed or active.
* @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-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. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
* @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. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
* @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. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
* @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. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
* @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. Use ::part(header) or ::part(footer) to target sets of calcite-actions.
* @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 {
Expand Down Expand Up @@ -149,15 +149,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 +172,27 @@
}
}

.header {
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we can be more specific here, just assigning these to the internally-rendered Actions (

calcite-design-system/packages/calcite-components/src/components/panel/panel.scss

Line 170 in 0e1043f

#close,
)

If so, we can update the css prop descriptions to specifically state the elements affected (like you have for the "part example").

::slotted(calcite-action),
calcite-action {
--calcite-action-background-color: var(
--calcite-panel-header-action-background-color,
var(--calcite-panel-header-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, var(--calcite-panel-header-text-color));
--calcite-action-text-color-hover: var(
--calcite-panel-header-action-text-color-hover,
var(--calcite-panel-header-text-color-hover)
);
--calcite-action-text-color-press: var(
--calcite-panel-header-action-text-color-press,
var(--calcite-panel-header-text-color-press)
);
}
}
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 Down Expand Up @@ -209,12 +221,12 @@ calcite-action-menu {
#collapse,
calcite-action-menu {
&:last-child {
--calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius);
border-radius-start-end: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
}
}

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

.content-wrapper {
Expand Down
7 changes: 4 additions & 3 deletions packages/calcite-components/src/components/panel/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { useT9n } from "../../controllers/useT9n";
import type { Alert } from "../alert/alert";
import type { ActionBar } from "../action-bar/action-bar";
import T9nStrings from "./assets/t9n/messages.en.json";
import { CSS, ICONS, IDS, SLOTS } from "./resources";
import { CSS, ICONS, IDS, PART, SLOTS } from "./resources";
import { styles } from "./panel.scss";

declare global {
Expand Down Expand Up @@ -421,7 +421,7 @@ export class Panel extends LitElement implements InteractiveComponent, LoadableC

private renderActionBar(): JsxNode {
return (
<div class={CSS.actionBarContainer} hidden={!this.hasActionBar}>
<div class={CSS.actionBarContainer} hidden={!this.hasActionBar} part={PART.header}>
<slot name={SLOTS.actionBar} onSlotChange={this.handleActionBarSlotChange} />
</div>
);
Expand Down Expand Up @@ -575,6 +575,7 @@ export class Panel extends LitElement implements InteractiveComponent, LoadableC
<div
class={{ [CSS.headerContainer]: true, [CSS.headerContainerBorderEnd]: hasActionBar }}
hidden={!showHeaderContent}
part={PART.header}
>
{this.renderHeaderStartActions()}
{this.renderHeaderSlottedContent()}
Expand All @@ -594,7 +595,7 @@ export class Panel extends LitElement implements InteractiveComponent, LoadableC
hasFooterStartContent || hasFooterEndContent || hasFooterContent || hasFooterActions;

return (
<footer class={CSS.footer} hidden={!showFooter}>
<footer class={CSS.footer} hidden={!showFooter} part={PART.footer}>
<div class={CSS.footerContent} hidden={!hasFooterContent}>
<slot name={SLOTS.footer} onSlotChange={this.handleFooterSlotChange} />
</div>
Expand Down
5 changes: 5 additions & 0 deletions packages/calcite-components/src/components/panel/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,8 @@ export const SLOTS = {
};

export const HEADING_LEVEL = 3;

export const PART = {
header: "header",
footer: "footer",
};
21 changes: 13 additions & 8 deletions packages/calcite-components/src/demos/panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,24 @@
--calcite-panel-corner-radius: 12px;
--calcite-panel-heading-text-color: darkgreen;
--calcite-panel-description-text-color: lightgreen;
--calcite-panel-border-color: blue;
--calcite-panel-background-color: yellow;
--calcite-panel-header-background-color: orange;
--calcite-panel-footer-background-color: red;

--calcite-panel-border-color: lime;

--calcite-panel-space: 2rem;
--calcite-panel-header-content-space: 0;
--calcite-panel-footer-space: 0;
--calcite-panel-content-space: 12px;
--calcite-panel-footer-padding: 3rem;
--calcite-panel-header-border-block-end: rgb(13, 242, 204);
}

--calcite-action-background-color: lime;
--calcite-action-background-color-hover: lime;
--calcite-action-background-color-pressed: lime;
--calcite-action-text-color: blue;
--calcite-action-text-color-pressed: blue;
--calcite-popover-border-color: blue;
calcite-panel.themed-panel::part(header) {
--calcite-action-background-color: var(--calcite-panel-header-background-color);
}
calcite-panel.themed-panel::part(footer) {
--calcite-action-background-color: var(--calcite-panel-footer-background-color);
}
</style>

Expand Down Expand Up @@ -330,6 +332,7 @@
<calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
<calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
<div slot="content-top">To continue, you must agree to the terms</div>

<calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
<calcite-checkbox></calcite-checkbox>I agree to the terms
</calcite-label>
Expand All @@ -341,6 +344,7 @@
tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
porttitor est sed, vestibulum risus. Integer non erat libero.
</p>

<p>
Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec
malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae,
Expand Down Expand Up @@ -423,6 +427,7 @@
<calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
<calcite-checkbox></calcite-checkbox>I agree to the terms
</calcite-label>
<p><calcite-action text="banana" text-enabled icon="banana"></calcite-action></p>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
Expand Down