fix(block): display correct header spacing when heading or descriptio…

…n are present (#9924) **Related Issue:** [#9920](#9920) ## Summary Update `block` component to display correct header spacing when `heading` or `description` properties are present. --------- Co-authored-by: Matt Driscoll <[email protected]>
Esri · Aug 2, 2024 · d8f1077 · d8f1077
1 parent 90e9368
commit d8f1077
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/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 () => {

diff --git a/packages/calcite-components/src/components/block/block.scss b/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();
diff --git a/packages/calcite-components/src/components/block/block.tsx b/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()}

diff --git a/packages/calcite-components/src/components/block/resources.ts b/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",