From 5d576cfb7c29642fb6feb483aa3aedfd3acf4974 Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Wed, 31 Jul 2024 17:54:04 -0500 Subject: [PATCH 1/3] docs(modal): update component deprecation message to v4 (#9925) **Related Issue:** #9923 ## Summary Updates `modal`'s deprecation message, which is removal in v4. --- packages/calcite-components/src/components/modal/modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index 7b59e903d70..d8833bc94fa 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/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", }); From a43ee462b231e5282727234580db053fddf4de57 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 1 Aug 2024 14:46:23 -0700 Subject: [PATCH 2/3] fix(panel, flow-item): fix header padding regression (#9936) **Related Issue:** #9921 ## Summary Fix unintentional header padding adjustment for medium/default scale. --- .../src/components/panel/panel.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 8ef2ffad730..7a8032a1a8a 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/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); From 06580d39ccb8c6d6f83e1422ea9930198e73081a Mon Sep 17 00:00:00 2001 From: Abraham Preciado Morales Date: Thu, 1 Aug 2024 12:40:23 -0700 Subject: [PATCH 3/3] fix(block): display correct header spacing when heading or description are present (#9924) **Related Issue:** [#9920](https://github.com/Esri/calcite-design-system/issues/9920) ## Summary Update `block` component to display correct header spacing when `heading` or `description` properties are present. --------- Co-authored-by: Matt Driscoll --- .../src/components/block/block.e2e.ts | 23 +++++++++++++++++++ .../src/components/block/block.scss | 11 ++++----- .../src/components/block/block.tsx | 7 ++++-- .../src/components/block/resources.ts | 1 + 4 files changed, 33 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index d632af846e7..714121b03a4 100644 --- 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(``); + + 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 index 040a6a47569..2cafa01e263 100644 --- 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 index 2b72394c144..ab7eab7f5b1 100644 --- 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 = ( -
+
{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 index aced6eb14ae..77610777c5b 100644 --- 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",