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): Add component tokens #10822

Merged
merged 16 commits into from
Nov 21, 2024
+432 −55
Merged

feat(panel): Add component tokens #10822

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
5ae9850
feat(panel): Add component tokens
macandcheese Nov 21, 2024
9774d90
Merge branch 'dev' into macandcheese/panel-tokens-lumina
macandcheese Nov 21, 2024
c4127c2
Clean up
macandcheese Nov 21, 2024
e72ad36
Clean up
macandcheese Nov 21, 2024
b326827
Clean up
macandcheese Nov 21, 2024
0cf1603
Clean up
macandcheese Nov 21, 2024
158dd9d
Clean up
macandcheese Nov 21, 2024
bc57912
Merge branch 'dev' into macandcheese/panel-tokens-lumina
macandcheese Nov 21, 2024
86e6120
Clean up
macandcheese Nov 21, 2024
894d95f
Clean up
macandcheese Nov 21, 2024
fdd340b
Merge branch 'dev' into macandcheese/panel-tokens-lumina
macandcheese Nov 21, 2024
cbd5942
Merge branch 'dev' into macandcheese/panel-tokens-lumina
macandcheese Nov 21, 2024
f4d5b4b
Clean up
macandcheese Nov 21, 2024
6405926
Clean up
macandcheese Nov 21, 2024
13f629b
Merge branch 'dev' into macandcheese/panel-tokens-lumina
macandcheese Nov 21, 2024
247c80a
Fix test
macandcheese Nov 21, 2024
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
2 changes: 1 addition & 1 deletion packages/calcite-components/.stylelintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const customFunctions = [
"medium-modular-scale",
"modular-scale",
"scale-duration",
"small-modular-scale"
"small-modular-scale",
];
// ⚠️ END OF AUTO-GENERATED CODE

Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/dialog/dialog.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1108,7 +1108,7 @@ describe("calcite-dialog", () => {
},
"--calcite-dialog-footer-space": {
shadowSelector: `.${CSS.panel}`,
targetProp: "--calcite-panel-footer-padding",
targetProp: "--calcite-panel-footer-space",
},
"--calcite-dialog-offset-x": {
shadowSelector: `.${CSS.dialog}`,
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,8 @@

calcite-panel {
--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
--calcite-panel-footer-padding: var(--calcite-dialog-footer-space);
--calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);
--calcite-panel-footer-space: var(--calcite-dialog-footer-space);
--calcite-panel-border-color: var(--calcite-dialog-border-color);
--calcite-panel-background-color: var(--calcite-dialog-background-color);
}

Expand Down
119 changes: 111 additions & 8 deletions 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 @@ -667,15 +667,118 @@ describe("calcite-panel", () => {
});

describe("theme", () => {
themed(html`<calcite-panel collapsible closable>scrolling content</calcite-panel>`, {
"--calcite-panel-content-space": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "padding",
themed(
html`<calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
<calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
<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>
<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. Aenean
sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum 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, sollicitudin
mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl varius eu.
Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo. Donec eget
pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus maximus lacus
nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor accumsan justo,
at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</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. Aenean
sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum 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>
<calcite-button slot="footer-end"> I'm done </calcite-button>
</calcite-panel>`,
{
"--calcite-panel-corner-radius": {
shadowSelector: `.${CSS.container}`,
targetProp: "borderRadius",
},
"--calcite-panel-heading-text-color": {
shadowSelector: `.${CSS.heading}`,
targetProp: "color",
},
"--calcite-panel-description-text-color": {
shadowSelector: `.${CSS.description}`,
targetProp: "color",
},
"--calcite-panel-background-color": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "backgroundColor",
},
"--calcite-panel-header-background-color": {
shadowSelector: `.${CSS.header}`,
targetProp: "backgroundColor",
},
"--calcite-panel-footer-background-color": {
shadowSelector: `.${CSS.footer}`,
targetProp: "backgroundColor",
},
"--calcite-panel-border-color": [
{
shadowSelector: `.${CSS.headerContainer}`,
targetProp: "borderBlockEndColor",
},
{
shadowSelector: `.${CSS.contentTop}`,
targetProp: "borderBlockEndColor",
},
{
shadowSelector: `.${CSS.contentBottom}`,
targetProp: "borderBlockStartColor",
},
{
shadowSelector: `.${CSS.footer}`,
targetProp: "borderBlockStartColor",
},
],
"--calcite-panel-space": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "padding",
},
"--calcite-panel-footer-space": {
shadowSelector: `.${CSS.footer}`,
targetProp: "padding",
},
"--calcite-panel-content-space": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "padding",
},
},
"--calcite-panel-background-color": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "backgroundColor",
);
themed(
html`<calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
<div slot="header-content">Custom header content</div>
<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. Aenean
sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum 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>
<calcite-button slot="footer-end"> I'm done </calcite-button>
</calcite-panel>`,
{
"--calcite-panel-header-content-space": {
shadowSelector: `.${CSS.headerSlottedContent}`,
targetProp: "padding",
},
},
});
);
});
});
119 changes: 86 additions & 33 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 @@ -2,11 +2,30 @@
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-panel-content-space: Specifies the padding of the component's content.
* @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
* @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.

* @prop --calcite-panel-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-panel-heading-text-color: Specifies the text color of the component's `heading`.
* @prop --calcite-panel-description-text-color: Specifies the text color of the component's `description`.
* @prop --calcite-panel-border-color: Specifies the border color of the component.

* @prop --calcite-panel-background-color: Specifies the background color of the component.
* @prop --calcite-panel-header-background-color: Specifies the background color of the component's footer.
* @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.
alisonailea marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.

* @prop --calcite-panel-content-space: [Deprecated] Specifies the padding of the component's content. Use `--calcite-panel-space` instead.
macandcheese marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-panel-footer-padding: [Deprecated] Specifies the padding of the component's footer. Use `--calcite-panel-footer-space` instead.
* @prop --calcite-panel-header-border-block-end: [Deprecated] Specifies the component header's block end border. Use `--calcite-panel-border-color` instead.
macandcheese marked this conversation as resolved.
Show resolved Hide resolved

* @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` Action components. Will apply to any slotted Calcite Action components.
* @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` Action components when hovered. Will apply to any slotted Calcite Action components.
* @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 {
Copy link
Contributor

Choose a reason for hiding this comment

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

border-radius needs to be added to the :host or the component doesn't look right.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Going to merge in.

Expand All @@ -21,7 +40,7 @@
@import "../../assets/styles/header";

:host([scale="s"]) {
--calcite-internal-panel-default-padding: var(--calcite-spacing-sm);
--calcite-internal-panel-default-space: var(--calcite-spacing-sm);
--calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available

.header-content {
Expand All @@ -36,7 +55,7 @@
}

:host([scale="m"]) {
--calcite-internal-panel-default-padding: var(--calcite-spacing-md);
--calcite-internal-panel-default-space: var(--calcite-spacing-md);
--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg);

.header-content {
Expand All @@ -51,7 +70,7 @@
}

:host([scale="l"]) {
--calcite-internal-panel-default-padding: var(--calcite-spacing-xl);
--calcite-internal-panel-default-space: var(--calcite-spacing-xl);
--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl);

.header-content {
Expand All @@ -68,26 +87,32 @@
.content-top,
.content-bottom {
@apply flex items-start self-stretch;

border-block-start: 1px solid var(--calcite-color-border-3);
background-color: var(--calcite-color-foreground-1);
padding: var(--calcite-internal-panel-default-space);
border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1));
}

.container {
@apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;

@apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0 overflow-hidden box-border;
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);
}

.container[hidden] {
@apply hidden;
}

.header {
@apply bg-foreground-1 flex flex-col z-header;
border-block-end: var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-color-border-3));
@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-header-border-block-end, var(--calcite-panel-border-color, var(--calcite-color-border-3)));
}

.header-container {
Expand All @@ -98,7 +123,7 @@
}

.header-container--border-end {
border-block-end: 1px solid var(--calcite-color-border-3);
border-block-end: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
}

.action-bar-container {
Expand Down Expand Up @@ -126,23 +151,24 @@
}

.heading {
@apply mx-0 mt-0 mb-1 font-medium text-color-1;
@apply mx-0 mt-0 mb-1 font-medium;
color: var(--calcite-panel-heading-text-color, var(--calcite-color-text-1));

&:only-child {
@apply mb-0;
}
}

.description {
@apply text-color-2;
color: var(--calcite-panel-description-text-color, var(--calcite-color-text-2));
}
}

.back-button {
@apply border-color-3
border-0
@apply border-0
border-solid;
border-inline-end-width: theme("borderWidth.DEFAULT");
border-color: var(--calcite-panel-border-color, var(--calcite-color-border-3));
}

.header-actions {
Expand All @@ -156,6 +182,24 @@
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 All @@ -165,30 +209,39 @@
overflow-auto
h-full
focus-base
text-color-2
relative;
padding: var(--calcite-panel-content-space, 0);
padding: var(--calcite-panel-space, var(--calcite-panel-content-space, 0));
background: var(--calcite-panel-background-color, var(--calcite-color-background));
}

.content-wrapper:focus-visible {
@apply focus-inset;
}

.content-top,
.content-bottom {
padding: var(--calcite-internal-panel-default-padding);
}

.header-content {
flex: 1 1 auto;
justify-content: center;
padding-block: var(--calcite-internal-panel-header-vertical-padding);
padding-inline: var(--calcite-internal-panel-default-padding);
}
padding-inline: var(--calcite-internal-panel-default-space);

&.header-slotted-content {
padding: var(
--calcite-panel-header-content-space,
var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space)
);
}
}
.footer {
@apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
border-block-start: 1px solid var(--calcite-color-border-3);
padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding));
@apply flex mt-auto flex-row content-between justify-center items-center text-n2-wrap;
border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
padding: var(
--calcite-panel-footer-space,
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 All @@ -197,19 +250,19 @@

.footer-actions {
@apply flex flex-row items-center justify-evenly flex-1;
gap: var(--calcite-internal-panel-default-padding);
gap: var(--calcite-internal-panel-default-space);
}

.footer-start {
@apply flex flex-row items-center justify-start flex-1;
margin-inline-end: auto;
gap: var(--calcite-internal-panel-default-padding);
gap: var(--calcite-internal-panel-default-space);
}

.footer-end {
@apply flex flex-row items-center justify-end flex-1;
margin-inline-start: auto;
gap: var(--calcite-internal-panel-default-padding);
gap: var(--calcite-internal-panel-default-space);
}

.fab-container {
Expand Down
Loading
Loading