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 => }