diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index 1a2483ae182..e25f769f8b8 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -427,17 +427,17 @@ describe("calcite-block", () => { block.setAttribute("heading", "test-heading"); await page.waitForChanges(); - expect(header).toHaveClass(CSS.headerHasText); + expect(header).toHaveClass(CSS.headerHasContent); block.removeAttribute("heading"); await page.waitForChanges(); - expect(header).not.toHaveClass(CSS.headerHasText); + expect(header).not.toHaveClass(CSS.headerHasContent); block.setAttribute("description", "test-description"); await page.waitForChanges(); - expect(header).toHaveClass(CSS.headerHasText); + expect(header).toHaveClass(CSS.headerHasContent); }); }); diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index 2635bab0a57..06e055a3493 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -26,10 +26,13 @@ :host([scale="s"]) { .header { - padding: var(--calcite-spacing-sm); gap: var(--calcite-spacing-sm); } + .header--has-content { + padding: var(--calcite-spacing-sm); + } + .icon-end-container { gap: var(--calcite-spacing-sm); padding-inline-end: var(--calcite-spacing-sm); @@ -55,10 +58,13 @@ :host([scale="m"]) { .header { - padding: var(--calcite-spacing-md); gap: var(--calcite-spacing-md); } + .header--has-content { + padding: var(--calcite-spacing-md); + } + .icon-end-container { gap: var(--calcite-spacing-md); padding-inline-end: var(--calcite-spacing-md); @@ -84,10 +90,13 @@ :host([scale="l"]) { .header { - padding: var(--calcite-spacing-lg); gap: var(--calcite-spacing-lg); } + .header--has-content { + padding: var(--calcite-spacing-lg); + } + .icon-end-container { gap: var(--calcite-spacing-lg); padding-inline-end: var(--calcite-spacing-lg); diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts index 3e48bdcc108..350387ce741 100644 --- a/packages/calcite-components/src/components/block/block.stories.ts +++ b/packages/calcite-components/src/components/block/block.stories.ts @@ -387,3 +387,12 @@ export const allScales = (): string => }
${blockHTML("s")} ${blockHTML("m")} ${blockHTML("l")}
`; + +export const emptyHeader = (): string => html` + + +
Favorite vegetable
+ +
+
+`; diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index 15892f9e27b..7b8f6404717 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -530,13 +530,26 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose setSize, dragDisabled, sortDisabled, + hasContentStart, + iconStart, } = this; const toggleLabel = expanded ? messages.collapse : messages.expand; + const headerHasContent = !!( + heading || + description || + hasContentStart || + iconStart || + loading || + status + ); const headerContent = (
{this.renderIcon("start")} diff --git a/packages/calcite-components/src/components/block/resources.ts b/packages/calcite-components/src/components/block/resources.ts index 333229b4a0d..90df6646fb8 100644 --- a/packages/calcite-components/src/components/block/resources.ts +++ b/packages/calcite-components/src/components/block/resources.ts @@ -14,7 +14,7 @@ export const CSS = { description: "description", header: "header", headerContainer: "header-container", - headerHasText: "header--has-text", + headerHasContent: "header--has-content", heading: "heading", icon: "icon", iconStart: "icon--start",