From 5ae98508ce171bbc42a4efde73033815a8a2cf3e Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 20 Nov 2024 16:43:43 -0800 Subject: [PATCH 01/11] feat(panel): Add component tokens --- packages/calcite-components/.stylelintrc.cjs | 8 +- .../src/components/dialog/dialog.e2e.ts | 2 +- .../src/components/dialog/dialog.scss | 4 +- .../src/components/panel/panel.e2e.ts | 119 +++++++++- .../src/components/panel/panel.scss | 144 +++++++++--- .../src/components/panel/panel.tsx | 6 +- .../src/components/panel/resources.ts | 1 + .../calcite-components/src/demos/panel.html | 221 +++++++++++++++++- 8 files changed, 449 insertions(+), 56 deletions(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 2e02214db54..0998dad6911 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,13 +1,7 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = [ - "get-trailing-text-input-padding", - "medium-modular-scale", - "modular-scale", - "scale-duration", - "small-modular-scale" -]; +const customFunctions = []; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index d75dceb7bf8..a72cc923635 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -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}`, diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss index 0700e9981a2..470b45d3cf7 100644 --- a/packages/calcite-components/src/components/dialog/dialog.scss +++ b/packages/calcite-components/src/components/dialog/dialog.scss @@ -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); } diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index 6141e2ec462..8b59e3d9cfe 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/packages/calcite-components/src/components/panel/panel.e2e.ts @@ -667,15 +667,118 @@ describe("calcite-panel", () => { }); describe("theme", () => { - themed(html`scrolling content`, { - "--calcite-panel-content-space": { - shadowSelector: `.${CSS.contentWrapper}`, - targetProp: "padding", + themed( + html` + + + +
To continue, you must agree to the terms
+ + I agree to the terms + +

+ 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. +

+

+ 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. +

+

+ 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. +

+ I'm done + `, + { + "--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` +
Custom header content
+

+ 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. +

+ I'm done + `, + { + "--calcite-panel-header-content-space": { + shadowSelector: `.${CSS.headerSlottedContent}`, + targetProp: "padding", + }, }, - }); + ); }); }); diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 4d40f90da8c..7bbbed3fd56 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -2,11 +2,31 @@ * 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-shadow: Specifies the shadow 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. + * @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. + * @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. + + * @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 { @@ -21,7 +41,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 { @@ -36,7 +56,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 { @@ -51,7 +71,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 { @@ -68,17 +88,36 @@ .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); +.content-top { + background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1)); + padding: var(--calcite-internal-panel-default-space); + border-block: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3)); } -.container { - @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0; +.content-bottom { + background-color: var(--calcite-panel-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)); +} + +.content-wrapper + .footer { + border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3)); +} + +:host([collapsed]) .content-top { + border-block-end: 0; +} +.container { + @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] { @@ -86,8 +125,10 @@ } .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)); } .header-container { @@ -95,14 +136,18 @@ items-stretch justify-start; flex: 0 0 auto; -} - -.header-container--border-end { - border-block-end: 1px solid var(--calcite-color-border-3); + border-block-end: 1px solid + var((--calcite-panel-header-border-block-end), var(--calcite-panel-border-color, var(--calcite-color-border-3))); } .action-bar-container { @apply w-full; + border-block-end: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3)); +} + +.action-bar-container ~ .content-top, +.action-bar-container ~ .content-bottom { + border-block-start: 0; } .action-bar-container ::slotted(calcite-action-bar) { @@ -126,7 +171,8 @@ } .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; @@ -134,15 +180,15 @@ } .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 { @@ -156,6 +202,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 @@ -165,8 +229,8 @@ overflow-auto h-full focus-base - relative; - padding: var(--calcite-panel-content-space, 0); + text-color-2; + padding: var(--calcite-panel-space, var(--calcite-panel-content-space, 0)); background: var(--calcite-panel-background-color, var(--calcite-color-background)); } @@ -174,21 +238,29 @@ @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 { @@ -197,19 +269,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 { diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 73d710a27ed..7058ffc7b9e 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -424,7 +424,11 @@ export class Panel extends LitElement implements InteractiveComponent, LoadableC private renderHeaderSlottedContent(): JsxNode { return ( - + +
+
no content
+
+ +

Footer!

+ +
+
+
Slotted Action Bar + Slotted Content Top
@@ -283,6 +315,193 @@
+ +
+
themed inactive theme collapsed
+
+ + + + +
To continue, you must agree to the terms
+ + I agree to the terms + +

+ 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. +

+

+ 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. +

+

+ 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. +

+ I'm done + +
+
+ +
+
themed inactive theme
+
+ + + + +
To continue, you must agree to the terms
+ + I agree to the terms + +

+ 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. +

+

+ 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. +

+

+ 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. +

+ I'm done + +
+
+ +
+
themed
+
+ + + + +
To continue, you must agree to the terms
+ + I agree to the terms + +

+ 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. +

+

+ 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. +

+

+ 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. +

+ I'm done + +
+
+ +
+
themed with header-content slotted
+
+ +
Custom Div
+ + + +
To continue, you must agree to the terms
+ + I agree to the terms + +

+ 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. +

+

+ 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. +

+

+ 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. +

+ I'm done + +
+
From c4127c2e4f7f0a1bf9943fcc4167f87632a2b701 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 20 Nov 2024 16:48:05 -0800 Subject: [PATCH 02/11] Clean up --- packages/calcite-components/.stylelintrc.cjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 0998dad6911..3861302ec13 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,7 +1,13 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = []; +const customFunctions = [ + "get-trailing-text-input-padding", + "medium-modular-scale", + "modular-scale", + "scale-duration", + "small-modular-scale", +]; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ From e72ad367c67db8e4cca0d8d843b83498d03cd491 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 20 Nov 2024 16:53:45 -0800 Subject: [PATCH 03/11] Clean up --- packages/calcite-components/.stylelintrc.cjs | 8 +------- .../calcite-components/src/components/panel/panel.scss | 1 - 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 3861302ec13..0998dad6911 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,13 +1,7 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = [ - "get-trailing-text-input-padding", - "medium-modular-scale", - "modular-scale", - "scale-duration", - "small-modular-scale", -]; +const customFunctions = []; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 7bbbed3fd56..4b65dad7a4f 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -4,7 +4,6 @@ * These properties can be overridden using the component's tag as selector. * @prop --calcite-panel-corner-radius: Specifies the corner radius of the component. - * @prop --calcite-panel-shadow: Specifies the shadow 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. From b3268278c058aa9f14e2585c718f36749161daf9 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 20 Nov 2024 16:54:04 -0800 Subject: [PATCH 04/11] Clean up --- packages/calcite-components/.stylelintrc.cjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 0998dad6911..3861302ec13 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,7 +1,13 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = []; +const customFunctions = [ + "get-trailing-text-input-padding", + "medium-modular-scale", + "modular-scale", + "scale-duration", + "small-modular-scale", +]; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ From 0cf1603597c8e12945b949ec0abfbdd140d9ddda Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 20 Nov 2024 17:21:33 -0800 Subject: [PATCH 05/11] Clean up --- packages/calcite-components/.stylelintrc.cjs | 8 +---- .../src/components/panel/panel.scss | 34 +++++-------------- 2 files changed, 9 insertions(+), 33 deletions(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 3861302ec13..0998dad6911 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,13 +1,7 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = [ - "get-trailing-text-input-padding", - "medium-modular-scale", - "modular-scale", - "scale-duration", - "small-modular-scale", -]; +const customFunctions = []; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 4b65dad7a4f..66daf9c9bba 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -87,26 +87,9 @@ .content-top, .content-bottom { @apply flex items-start self-stretch; -} - -.content-top { - background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1)); - padding: var(--calcite-internal-panel-default-space); - border-block: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3)); -} - -.content-bottom { - background-color: var(--calcite-panel-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)); -} - -.content-wrapper + .footer { - border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3)); -} - -:host([collapsed]) .content-top { - border-block-end: 0; + background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1)); } .container { @@ -128,6 +111,8 @@ 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 { @@ -135,18 +120,14 @@ items-stretch justify-start; flex: 0 0 auto; - border-block-end: 1px solid - var((--calcite-panel-header-border-block-end), var(--calcite-panel-border-color, var(--calcite-color-border-3))); } -.action-bar-container { - @apply w-full; +.header-container--border-end { border-block-end: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3)); } -.action-bar-container ~ .content-top, -.action-bar-container ~ .content-bottom { - border-block-start: 0; +.action-bar-container { + @apply w-full; } .action-bar-container ::slotted(calcite-action-bar) { @@ -228,7 +209,8 @@ calcite-action-menu { overflow-auto h-full focus-base - text-color-2; + text-color-2 + relative; padding: var(--calcite-panel-space, var(--calcite-panel-content-space, 0)); background: var(--calcite-panel-background-color, var(--calcite-color-background)); } From 158dd9dbf88524b73a0d203bfce21344f0be2d86 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 20 Nov 2024 17:21:59 -0800 Subject: [PATCH 06/11] Clean up --- packages/calcite-components/.stylelintrc.cjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 0998dad6911..3861302ec13 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,7 +1,13 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = []; +const customFunctions = [ + "get-trailing-text-input-padding", + "medium-modular-scale", + "modular-scale", + "scale-duration", + "small-modular-scale", +]; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ From 86e6120df303fc8603482efffc33bfd4c28a2791 Mon Sep 17 00:00:00 2001 From: Adam Date: Thu, 21 Nov 2024 10:53:51 -0800 Subject: [PATCH 07/11] Clean up --- packages/calcite-components/.stylelintrc.cjs | 8 +------- .../src/components/panel/panel.scss | 16 ++++++++-------- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 3861302ec13..0998dad6911 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,13 +1,7 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = [ - "get-trailing-text-input-padding", - "medium-modular-scale", - "modular-scale", - "scale-duration", - "small-modular-scale", -]; +const customFunctions = []; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 66daf9c9bba..504dfdef79e 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -16,16 +16,16 @@ * @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 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` Calcite 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` Calcite 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` Calcite 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` Calcite 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 Calcite Popover component, which is rendered within a Calcite Action Menu when slotted Calcite Actions are present in the `header-actions-end` slot. Will apply to any slotted Calcite Popover components. + * @prop --calcite-panel-content-space: [Deprecated] Specifies the padding of the component's content. Use `--calcite-panel-space` instead. * @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. - - * @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 { @@ -112,7 +112,7 @@ 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))); + var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3))); } .header-container { From 894d95f879464b327615b83770042ab3e67a3f96 Mon Sep 17 00:00:00 2001 From: Adam Date: Thu, 21 Nov 2024 11:09:53 -0800 Subject: [PATCH 08/11] Clean up --- packages/calcite-components/src/components/panel/panel.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 504dfdef79e..c2d93b94671 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -29,7 +29,6 @@ */ :host { - @extend %component-host; @apply relative flex w-full h-full flex-auto overflow-hidden; --calcite-min-header-height: calc(var(--calcite-icon-size) * 3); From f4d5b4bb3624d16243008121fa198702c6920b44 Mon Sep 17 00:00:00 2001 From: Adam Date: Thu, 21 Nov 2024 12:41:10 -0800 Subject: [PATCH 09/11] Clean up --- .../calcite-components/src/components/panel/panel.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index c2d93b94671..56f85460b7f 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -29,7 +29,7 @@ */ :host { - @apply relative flex w-full h-full flex-auto overflow-hidden; + @apply relative flex w-full h-full flex-auto overflow-hidden box-border; --calcite-min-header-height: calc(var(--calcite-icon-size) * 3); } @@ -92,7 +92,7 @@ } .container { - @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0 overflow-hidden box-border; + @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); @@ -101,6 +101,10 @@ font-size: var(--calcite-font-size--1); } +.container * { + @apply box-border; +} + .container[hidden] { @apply hidden; } From 6405926e1367d30092f88106d7bcc841f60a3190 Mon Sep 17 00:00:00 2001 From: Adam Date: Thu, 21 Nov 2024 12:42:40 -0800 Subject: [PATCH 10/11] Clean up --- packages/calcite-components/src/components/panel/panel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 56f85460b7f..c24ab3ba4aa 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -92,7 +92,7 @@ } .container { - @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; + @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); From 247c80aed7ab9680760fface7623d8ee4e36d1e0 Mon Sep 17 00:00:00 2001 From: Adam Date: Thu, 21 Nov 2024 13:44:46 -0800 Subject: [PATCH 11/11] Fix test --- packages/calcite-components/src/components/panel/panel.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index 8b59e3d9cfe..87ac66f12de 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/packages/calcite-components/src/components/panel/panel.e2e.ts @@ -730,12 +730,12 @@ describe("calcite-panel", () => { }, "--calcite-panel-border-color": [ { - shadowSelector: `.${CSS.headerContainer}`, + shadowSelector: `.${CSS.header}`, targetProp: "borderBlockEndColor", }, { shadowSelector: `.${CSS.contentTop}`, - targetProp: "borderBlockEndColor", + targetProp: "borderBlockStartColor", }, { shadowSelector: `.${CSS.contentBottom}`,