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

**Related Issue:** #11491 #8675 #7180 ## Summary Allow calcite-actions to be styled specific to the panel-header. include `::slotted(calcite-action)` in selectors and set proper variable fallbacks Correctly pass corner-radius through the component --------- Co-authored-by: JC Franco <[email protected]>
Esri · Feb 26, 2025 · fd64b84 · fd64b84
1 parent 4577177
commit fd64b84
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 61 deletions.
diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
@@ -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 {
+  border-radius: inherit;
 }
 
 :host([drag-handle]) {
@@ -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() {

diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -721,7 +721,6 @@ describe("calcite-panel", () => {
       </calcite-panel>`,
       {
         "--calcite-panel-corner-radius": {
-          shadowSelector: `.${CSS.container}`,
           targetProp: "borderRadius",
         },
         "--calcite-panel-heading-text-color": {

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
@@ -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();
@@ -98,7 +93,6 @@
   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);
 }
@@ -113,8 +107,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)));
@@ -149,15 +142,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
@@ -181,6 +165,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);
+}
+
 .back-button {
   @apply border-0
   border-solid;
@@ -199,24 +194,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
@@ -257,8 +234,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 {

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -54,6 +54,7 @@ import { navigationUserTokens, navigationUsers } from "./custom-theme/navigation
 import { tileTokens, tile } from "./custom-theme/tile";
 import { navigationTokens, navigation } from "./custom-theme/navigation";
 import { menuItem, menuItemTokens } from "./custom-theme/menu-item";
+import { panel, panelTokens } from "./custom-theme/panel";
 
 const globalTokens = {
   calciteColorBrand: "#007ac2",
@@ -146,7 +147,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip} ${comboboxItem}
       </div>
       <div class="demo-column">
-        ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating}
+        ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} ${panel}
       </div>
       <div class="demo-column"><div class="demo-column">${alert}</div></div>
       <div class="demo-column">${menuItem}</div>
@@ -192,6 +193,7 @@ const componentTokens = {
   ...navigationUserTokens,
   ...noticeTokens,
   ...paginationTokens,
+  ...panelTokens,
   ...popoverTokens,
   ...progressTokens,
   ...segmentedControlTokens,

diff --git a/packages/calcite-components/src/custom-theme/panel.ts b/packages/calcite-components/src/custom-theme/panel.ts
@@ -0,0 +1,37 @@
+import { html } from "../../support/formatting";
+
+export const panelTokens = {
+  calcitePanelBackgroundColor: "",
+  calcitePanelBorderColor: "",
+  calcitePanelContentSpace: "",
+  calcitePanelCornerRadius: "",
+  calcitePanelDescriptionTextColor: "",
+  calcitePanelFooterBackgroundColor: "",
+  calcitePanelFooterSpace: "",
+  calcitePanelHeaderActionBackgroundColorHover: "",
+  calcitePanelHeaderActionBackgroundColorPress: "",
+  calcitePanelHeaderActionBackgroundColor: "",
+  calcitePanelHeaderActionTextColorPress: "",
+  calcitePanelHeaderActionTextColor: "",
+  calcitePanelHeaderBackgroundColor: "",
+  calcitePanelHeaderContentSpace: "",
+  calcitePanelHeadingTextColor: "",
+  calcitePanelSpace: "",
+};
+
+export const panel = html`
+  <calcite-panel heading="Panel Heading" description="Panel description" closable collapsible>
+    <calcite-action text="Action 1" text-enabled icon="icon1" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="Action 2" text-enabled icon="icon2" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="Action 3" icon="icon3" slot="header-actions-end"></calcite-action>
+    <div slot="content-top">Content at the top</div>
+    <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+      <calcite-checkbox></calcite-checkbox>Agree to terms
+    </calcite-label>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
+      dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
+    </p>
+    <calcite-button slot="footer-end">Done</calcite-button>
+  </calcite-panel>
+`;
diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html
@@ -37,22 +37,27 @@
         --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-panel-header-action-background-color: blue;
+        --calcite-panel-header-action-background-color-hover: blue;
+        --calcite-panel-header-action-background-color-press: blue;
+      }
 
-        --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;
+      .themed-panel calcite-action[slot="header-actions-end"] {
+        --calcite-action-background-color: red;
+        --calcite-action-background-color-hover: red;
+        --calcite-action-background-color-press: red;
       }
     </style>
 
@@ -330,6 +335,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>
@@ -341,6 +347,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,
@@ -423,6 +430,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.