chore: cherry-pick patch commits

packages/calcite-components/src/components/block/block.e2e.ts

@@ -323,6 +323,29 @@ describe("calcite-block", () => {
       const actionAssignedSlot = await page.$eval("calcite-action", (action) => action.assignedSlot.name);
       expect(actionAssignedSlot).toBe(SLOTS.headerMenuActions);
     });
+
+    it("applies correct header spacing when heading or description properties are present", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent(`<calcite-block></calcite-block>`);
+
+      const block = await page.find("calcite-block");
+      const header = await page.find(`calcite-block >>> .${CSS.header}`);
+      block.setAttribute("heading", "test-heading");
+      await page.waitForChanges();
+
+      expect(header).toHaveClass(CSS.headerHasText);
+
+      block.removeAttribute("heading");
+      await page.waitForChanges();
+
+      expect(header).not.toHaveClass(CSS.headerHasText);
+
+      block.setAttribute("description", "test-description");
+      await page.waitForChanges();
+
+      expect(header).toHaveClass(CSS.headerHasText);
+    });
   });
 
   it("should allow the CSS custom property to be overridden when applied to :root", async () => {

packages/calcite-components/src/components/block/block.scss

@@ -23,6 +23,10 @@
   @apply justify-start;
 }
 
+.header--has-text {
+  padding: var(--calcite-spacing-md);
+}
+
 .header,
 .toggle {
   grid-area: header;
@@ -194,11 +198,4 @@ calcite-action-menu {
   }
 }
 
-:host([heading]),
-:host([description]) {
-  .header {
-    padding: var(--calcite-spacing-md);
-  }
-}
-
 @include base-component();

packages/calcite-components/src/components/block/block.tsx

@@ -411,12 +411,15 @@ export class Block
   }
 
   render(): VNode {
-    const { collapsible, el, loading, open, heading, messages } = this;
+    const { collapsible, el, loading, open, heading, messages, description } = this;
 
     const toggleLabel = open ? messages.collapse : messages.expand;
 
     const headerContent = (
-      <header class={CSS.header} id={IDS.header}>
+      <header
+        class={{ [CSS.header]: true, [CSS.headerHasText]: !!(heading || description) }}
+        id={IDS.header}
+      >
         {this.renderIcon("start")}
         {this.renderContentStart()}
         {this.renderLoaderStatusIcon()}

packages/calcite-components/src/components/block/resources.ts

@@ -14,6 +14,7 @@ export const CSS = {
   description: "description",
   header: "header",
   headerContainer: "header-container",
+  headerHasText: "header--has-text",
   heading: "heading",
   icon: "icon",
   iconStart: "icon--start",

packages/calcite-components/src/components/modal/modal.tsx

@@ -69,7 +69,7 @@ let initialDocumentOverflowStyle: string = "";
 
 logger.deprecated("component", {
   name: "modal",
-  removalVersion: 3,
+  removalVersion: 4,
   suggested: "dialog",
 });
 

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

@@ -20,6 +20,7 @@
 
 :host([scale="s"]) {
   --calcite-internal-panel-default-padding: var(--calcite-spacing-sm);
+  --calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available
 
   .header-content {
     .heading {
@@ -34,6 +35,7 @@
 
 :host([scale="m"]) {
   --calcite-internal-panel-default-padding: var(--calcite-spacing-md);
+  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg);
 
   .header-content {
     .heading {
@@ -48,6 +50,7 @@
 
 :host([scale="l"]) {
   --calcite-internal-panel-default-padding: var(--calcite-spacing-xl);
+  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl);
 
   .header-content {
     .heading {
@@ -163,11 +166,15 @@
 }
 
 .content-top,
-.content-bottom,
-.header-content {
+.content-bottom {
   padding: var(--calcite-internal-panel-default-padding);
 }
 
+.header-content {
+  padding-block: var(--calcite-internal-panel-header-vertical-padding);
+  padding-inline: var(--calcite-internal-panel-default-padding);
+}
+
 .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);