From f042e72afb231acc6642b3753b43bab44e75e947 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 15 Jul 2024 11:29:27 -0700 Subject: [PATCH 1/6] feat(panel): add alerts slot. #9772 --- .../calcite-components/src/components.d.ts | 48 +++++++++---------- .../src/components/alert/alert.e2e.ts | 4 ++ .../src/components/alert/alert.scss | 2 +- .../src/components/alert/alert.tsx | 6 +-- .../src/components/alert/resources.ts | 2 +- .../src/components/modal/modal.scss | 2 +- .../src/components/modal/modal.tsx | 8 ++-- .../src/components/modal/resources.ts | 2 +- .../src/components/panel/panel.e2e.ts | 18 +++++++ .../src/components/panel/panel.stories.ts | 20 +++++++- .../src/components/panel/panel.tsx | 10 ++++ .../src/components/panel/resources.ts | 1 + .../src/components/sheet/resources.ts | 2 +- .../src/components/sheet/sheet.scss | 2 +- .../src/components/sheet/sheet.tsx | 8 ++-- .../src/components/shell/shell.tsx | 6 +-- 16 files changed, 96 insertions(+), 45 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 47f36825dfd..28404a709a7 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -509,6 +509,10 @@ export namespace Components { * Specifies the duration before the component automatically closes - only use with `autoClose`. */ "autoCloseDuration": AlertDuration; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded": boolean; /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ @@ -556,10 +560,6 @@ export namespace Components { * Sets focus on the component's "close" button, the first focusable item. */ "setFocus": () => Promise; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - "slottedInShell": boolean; } interface CalciteAvatar { /** @@ -3384,6 +3384,10 @@ export namespace Components { * When `true`, prevents the component from expanding to the entire screen on mobile devices. */ "docked": boolean; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded": boolean; /** * When `true`, disables the default close on escape behavior. */ @@ -3434,10 +3438,6 @@ export namespace Components { * Sets focus on the component's "close" button (the first focusable item). */ "setFocus": () => Promise; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - "slottedInShell": boolean; /** * Updates the element(s) that are used within the focus-trap of the component. */ @@ -4323,6 +4323,10 @@ export namespace Components { * Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content). */ "displayMode": DisplayMode; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded": boolean; /** * When `true`, disables the default close on escape behavior. */ @@ -4359,10 +4363,6 @@ export namespace Components { * Sets focus on the component's "close" button - the first focusable item. */ "setFocus": () => Promise; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - "slottedInShell": boolean; /** * Updates the element(s) that are used within the focus-trap of the component. */ @@ -8265,6 +8265,10 @@ declare namespace LocalJSX { * Specifies the duration before the component automatically closes - only use with `autoClose`. */ "autoCloseDuration"?: AlertDuration; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded"?: boolean; /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ @@ -8332,10 +8336,6 @@ declare namespace LocalJSX { * Specifies the size of the component. */ "scale"?: Scale; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - "slottedInShell"?: boolean; } interface CalciteAvatar { /** @@ -11347,6 +11347,10 @@ declare namespace LocalJSX { * When `true`, prevents the component from expanding to the entire screen on mobile devices. */ "docked"?: boolean; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded"?: boolean; /** * When `true`, disables the default close on escape behavior. */ @@ -11403,10 +11407,6 @@ declare namespace LocalJSX { * Specifies the size of the component. */ "scale"?: Scale; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - "slottedInShell"?: boolean; /** * Specifies the width of the component. */ @@ -12314,6 +12314,10 @@ declare namespace LocalJSX { * Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content). */ "displayMode"?: DisplayMode; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded"?: boolean; /** * When `true`, disables the default close on escape behavior. */ @@ -12362,10 +12366,6 @@ declare namespace LocalJSX { * Determines where the component will be positioned. */ "position"?: LogicalFlowPosition; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - "slottedInShell"?: boolean; /** * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. */ diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index daa5bc120e1..e96e52f62c8 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -11,6 +11,10 @@ describe("defaults", () => { propertyName: "autoCloseDuration", defaultValue: "medium", }, + { + propertyName: "embedded", + defaultValue: false, + }, ]); }); diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss index b726d2e0ee9..8842ab0705e 100644 --- a/packages/calcite-components/src/components/alert/alert.scss +++ b/packages/calcite-components/src/components/alert/alert.scss @@ -315,7 +315,7 @@ $alertDurations: /** * Conditional styles for when Alert is slotted in Shell */ -.container--slotted-in-shell { +.container--embedded { @apply absolute; } diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index d70a9677195..48e21ce2218 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -147,7 +147,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen * * @internal */ - @Prop({ mutable: true }) slottedInShell: boolean; + @Prop({ mutable: true }) embedded: boolean; @Watch("autoCloseDuration") updateDuration(): void { @@ -205,7 +205,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen window.clearTimeout(this.queueTimeout); disconnectLocalized(this); disconnectMessages(this); - this.slottedInShell = false; + this.embedded = false; } render(): VNode { @@ -227,7 +227,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen [CSS.container]: true, [CSS.containerQueued]: queued, [`${CSS.container}--${placement}`]: true, - [CSS.containerSlottedInShell]: this.slottedInShell, + [CSS.containerEmbedded]: this.embedded, [CSS.focused]: this.keyBoardFocus, }} onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null} diff --git a/packages/calcite-components/src/components/alert/resources.ts b/packages/calcite-components/src/components/alert/resources.ts index 38c9a988058..901b6560060 100644 --- a/packages/calcite-components/src/components/alert/resources.ts +++ b/packages/calcite-components/src/components/alert/resources.ts @@ -27,7 +27,7 @@ export const CSS = { dismissProgress: "dismiss-progress", footer: "footer", icon: "icon", - containerSlottedInShell: "container--slotted-in-shell", + containerEmbedded: "container--embedded", queueCount: "queue-count", queueCountActive: "queue-count--active", textContainer: "text-container", diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss index 2df1d60f7db..b87a057ebd5 100644 --- a/packages/calcite-components/src/components/modal/modal.scss +++ b/packages/calcite-components/src/components/modal/modal.scss @@ -411,7 +411,7 @@ slot[name="primary"] { * Conditional styles for when Modal is slotted in Shell */ -.container.slotted-in-shell { +.container.embedded { position: absolute; pointer-events: auto; calcite-scrim { diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index a95fdbdbb70..c2600cc854d 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -162,7 +162,7 @@ export class Modal * * @internal */ - @Prop({ mutable: true }) slottedInShell: boolean; + @Prop({ mutable: true }) embedded: boolean; //-------------------------------------------------------------------------- // @@ -202,7 +202,7 @@ export class Modal deactivateFocusTrap(this); disconnectLocalized(this); disconnectMessages(this); - this.slottedInShell = false; + this.embedded = false; } render(): VNode { @@ -217,7 +217,7 @@ export class Modal class={{ [CSS.container]: true, [CSS.containerOpen]: this.opened, - [CSS.slottedInShell]: this.slottedInShell, + [CSS.embedded]: this.embedded, }} > @@ -534,7 +534,7 @@ export class Modal this.titleId = ensureId(titleEl); this.contentId = ensureId(contentEl); - if (!this.slottedInShell) { + if (!this.embedded) { if (totalOpenModals === 0) { initialDocumentOverflowStyle = document.documentElement.style.overflow; } diff --git a/packages/calcite-components/src/components/modal/resources.ts b/packages/calcite-components/src/components/modal/resources.ts index aa5f9954dfe..5052e49238b 100644 --- a/packages/calcite-components/src/components/modal/resources.ts +++ b/packages/calcite-components/src/components/modal/resources.ts @@ -14,7 +14,7 @@ export const CSS = { contentNoFooter: "content--no-footer", contentBottom: "content-bottom", contentTop: "content-top", - slottedInShell: "slotted-in-shell", + embedded: "embedded", // these classes help apply the animation in phases to only set transform on open/close // this helps avoid a positioning issue for any floating-ui-owning children diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index 0bce0e9cc3b..fce4c700c9a 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/packages/calcite-components/src/components/panel/panel.e2e.ts @@ -178,6 +178,24 @@ describe("calcite-panel", () => { expect(calcitePanelToggle).toHaveReceivedEventTimes(1); }); + it("should set embedded on slotted alerts", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + Hello World! + +
Hello there!
+
This is an alert with a general piece of information. Cool, innit?
+ + `, + ); + await page.waitForChanges(); + + const alert = await page.find("calcite-alert"); + + expect(await alert.getProperty("embedded")).toBe(true); + }); + describe("accessible", () => { accessible(html` diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts index eacf225e83b..49f721bb0fd 100644 --- a/packages/calcite-components/src/components/panel/panel.stories.ts +++ b/packages/calcite-components/src/components/panel/panel.stories.ts @@ -8,7 +8,7 @@ const { collapseDirection, scale } = ATTRIBUTES; interface PanelStoryArgs extends Pick< Panel, - "closed" | "disabled" | "closable" | "collapsed" | "collapsible" | "collapseDirection" | "loading" + "closed" | "disabled" | "closable" | "collapsed" | "collapsible" | "collapseDirection" | "loading" | "scale" > { heightScale: string; } @@ -421,6 +421,24 @@ export const footerStartAndEndSlots = (): string => html` `; +export const withSlottedAlert = (): string => html` + + +
Hello there!
+
This is an alert with a general piece of information. Cool, innit?
+ +
header-content slot
+

Slotted content!

+
Slot for a content-bottom.
+ Footer start + Footer end + +`; + export const footerSlotPrecedence = (): string => html`

Slotted content!

diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 1e63dc7ac15..fc885f44c1f 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -50,6 +50,7 @@ import { CSS, ICONS, SLOTS } from "./resources"; /** * @slot - A slot for adding custom content. * @slot action-bar - A slot for adding a `calcite-action-bar` to the component. + * @slot alerts - A slot for adding `calcite-alert`s to the component. * @slot content-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). * @slot header-actions-start - A slot for adding actions or content to the start side of the header. @@ -650,6 +651,14 @@ export class Panel ); } + handleAlertsSlotChange = (event: Event): void => { + slotChangeGetAssignedElements(event)?.map((el) => { + if (el.nodeName === "CALCITE-ALERT") { + (el as HTMLCalciteAlertElement).embedded = true; + } + }); + }; + render(): VNode { const { disabled, loading, panelKeyDownHandler, closed, closable } = this; @@ -665,6 +674,7 @@ export class Panel {this.renderContent()} {this.renderContentBottom()} {this.renderFooterNode()} + ); diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts index b76560c9571..6fd7f4d449d 100644 --- a/packages/calcite-components/src/components/panel/resources.ts +++ b/packages/calcite-components/src/components/panel/resources.ts @@ -30,6 +30,7 @@ export const ICONS = { export const SLOTS = { actionBar: "action-bar", + alerts: "alerts", contentBottom: "content-bottom", contentTop: "content-top", headerActionsStart: "header-actions-start", diff --git a/packages/calcite-components/src/components/sheet/resources.ts b/packages/calcite-components/src/components/sheet/resources.ts index d0f941f40f7..25d55a3c949 100644 --- a/packages/calcite-components/src/components/sheet/resources.ts +++ b/packages/calcite-components/src/components/sheet/resources.ts @@ -3,5 +3,5 @@ export const CSS = { container: "container", containerOpen: "container--open", content: "content", - containerSlottedInShell: "container--slotted-in-shell", + containerEmbedded: "container--embedded", }; diff --git a/packages/calcite-components/src/components/sheet/sheet.scss b/packages/calcite-components/src/components/sheet/sheet.scss index 3b2d134b6d9..50d9dd990f3 100644 --- a/packages/calcite-components/src/components/sheet/sheet.scss +++ b/packages/calcite-components/src/components/sheet/sheet.scss @@ -213,7 +213,7 @@ /** * Conditional styles for when Sheet is slotted in Shell */ -:host([position]) .container--slotted-in-shell { +:host([position]) .container--embedded { @apply absolute pointer-events-auto; inline-size: 100%; max-inline-size: 100%; diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index 173a4fe16d9..cb402fba03b 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -125,7 +125,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo * * @internal */ - @Prop() slottedInShell: boolean; + @Prop() embedded: boolean; /** * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. @@ -159,7 +159,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo this.removeOverflowHiddenClass(); this.mutationObserver?.disconnect(); deactivateFocusTrap(this); - this.slottedInShell = false; + this.embedded = false; } render(): VNode { @@ -175,7 +175,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo class={{ [CSS.container]: true, [CSS.containerOpen]: this.opened, - [CSS.containerSlottedInShell]: this.slottedInShell, + [CSS.containerEmbedded]: this.embedded, [CSS_UTILITY.rtl]: dir === "rtl", }} > @@ -310,7 +310,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo private openSheet(): void { this.el.addEventListener("calciteSheetOpen", this.openEnd); this.opened = true; - if (!this.slottedInShell) { + if (!this.embedded) { this.initialOverflowCSS = document.documentElement.style.overflow; // use an inline style instead of a utility class to avoid global class declarations. document.documentElement.style.setProperty("overflow", "hidden"); diff --git a/packages/calcite-components/src/components/shell/shell.tsx b/packages/calcite-components/src/components/shell/shell.tsx index 461703e9ff2..51fdcf7b0d7 100755 --- a/packages/calcite-components/src/components/shell/shell.tsx +++ b/packages/calcite-components/src/components/shell/shell.tsx @@ -120,7 +120,7 @@ export class Shell implements ConditionalSlotComponent { this.hasAlerts = !!slotChangeHasAssignedElement(event); slotChangeGetAssignedElements(event)?.map((el) => { if (el.nodeName === "CALCITE-ALERT") { - (el as HTMLCalciteAlertElement).slottedInShell = true; + (el as HTMLCalciteAlertElement).embedded = true; } }); }; @@ -129,7 +129,7 @@ export class Shell implements ConditionalSlotComponent { this.hasSheets = !!slotChangeHasAssignedElement(event); slotChangeGetAssignedElements(event)?.map((el) => { if (el.nodeName === "CALCITE-SHEET") { - (el as HTMLCalciteSheetElement).slottedInShell = true; + (el as HTMLCalciteSheetElement).embedded = true; } }); }; @@ -138,7 +138,7 @@ export class Shell implements ConditionalSlotComponent { this.hasModals = !!slotChangeHasAssignedElement(event); slotChangeGetAssignedElements(event)?.map((el) => { if (el.nodeName === "CALCITE-MODAL") { - (el as HTMLCalciteModalElement).slottedInShell = true; + (el as HTMLCalciteModalElement).embedded = true; } }); }; From 606b78a2f17c9c5728fd8b993046b01edfb62e5d Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 15 Jul 2024 11:39:27 -0700 Subject: [PATCH 2/6] add to flow-item --- .../src/components/flow-item/flow-item.e2e.ts | 17 +++++++++++++++++ .../components/flow-item/flow-item.stories.ts | 12 +++++++++++- .../src/components/flow-item/flow-item.tsx | 2 ++ .../src/components/flow-item/resources.ts | 1 + 4 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts index f6da9a4c6e2..6bf577651b7 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts @@ -305,4 +305,21 @@ describe("calcite-flow-item", () => { expect(toggleSpy).toHaveReceivedEventTimes(1); expect(await panel.getProperty("closed")).toBe(true); }); + + it("should set embedded on slotted alerts", async () => { + const page = await newE2EPage({ + html: html` + test + +
Hello there!
+
This is an alert with a general piece of information. Cool, innit?
+ + `, + }); + await page.waitForChanges(); + + const alert = await page.find("calcite-alert"); + + expect(await alert.getProperty("embedded")).toBe(true); + }); }); diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts index f24da6bca2f..6e44129892b 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts @@ -8,7 +8,7 @@ const { collapseDirection, scale } = ATTRIBUTES; interface FlowItemStoryArgs extends Pick< FlowItem, - "closed" | "disabled" | "closable" | "collapsible" | "collapsed" | "collapseDirection" | "loading" + "closed" | "disabled" | "closable" | "collapsible" | "collapsed" | "collapseDirection" | "loading" | "scale" > { heightScale: string; } @@ -263,3 +263,13 @@ export const withNoHeaderBorderBlockEnd_TestOnly = (): string => html`Slotted content!`; + +export const withAlertsSlot = (): string => html` + + Slotted content! + +
Hello there!
+
This is an alert with a general piece of information. Cool, innit?
+ + +`; diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index cdf1b1e9543..2ad3ea31b29 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -44,6 +44,7 @@ import { CSS, ICONS, SLOTS } from "./resources"; /** * @slot - A slot for adding custom content. * @slot action-bar - A slot for adding a `calcite-action-bar` to the component. + * @slot alerts - A slot for adding `calcite-alert`s to the component. * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). * @slot content-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header. @@ -391,6 +392,7 @@ export class FlowItem > {this.renderBackButton()} + diff --git a/packages/calcite-components/src/components/flow-item/resources.ts b/packages/calcite-components/src/components/flow-item/resources.ts index 8efec758a71..0f94804aa07 100644 --- a/packages/calcite-components/src/components/flow-item/resources.ts +++ b/packages/calcite-components/src/components/flow-item/resources.ts @@ -9,6 +9,7 @@ export const ICONS = { export const SLOTS = { actionBar: "action-bar", + alerts: "alerts", contentTop: "content-top", contentBottom: "content-bottom", headerActionsStart: "header-actions-start", From bd3ad16d01e930475e87e7005008b1b6380bda8b Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 15 Jul 2024 12:57:06 -0700 Subject: [PATCH 3/6] cleanup --- packages/calcite-components/src/components/alert/alert.tsx | 2 +- packages/calcite-components/src/components/modal/modal.tsx | 2 +- packages/calcite-components/src/components/sheet/sheet.e2e.ts | 4 ++++ packages/calcite-components/src/components/sheet/sheet.tsx | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 48e21ce2218..8d3dc5d297a 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -147,7 +147,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen * * @internal */ - @Prop({ mutable: true }) embedded: boolean; + @Prop({ mutable: true }) embedded = false; @Watch("autoCloseDuration") updateDuration(): void { diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index c2600cc854d..e0381baeede 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -162,7 +162,7 @@ export class Modal * * @internal */ - @Prop({ mutable: true }) embedded: boolean; + @Prop({ mutable: true }) embedded = false; //-------------------------------------------------------------------------- // diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts index 5bab2cbaefb..d37aab9f41b 100644 --- a/packages/calcite-components/src/components/sheet/sheet.e2e.ts +++ b/packages/calcite-components/src/components/sheet/sheet.e2e.ts @@ -11,6 +11,10 @@ describe("calcite-sheet properties", () => { propertyName: "open", defaultValue: false, }, + { + propertyName: "embedded", + defaultValue: false, + }, { propertyName: "displayMode", defaultValue: "overlay", diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index cb402fba03b..1112a5d7994 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -125,7 +125,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo * * @internal */ - @Prop() embedded: boolean; + @Prop() embedded = false; /** * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. From 29a16f84e0b7d2f61617d839b9a21c5fdaa8c7ec Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 15 Jul 2024 14:32:48 -0700 Subject: [PATCH 4/6] test cleanup --- .../src/components/flow-item/flow-item.e2e.ts | 8 ++++++-- .../src/components/panel/panel.e2e.ts | 11 +++++++---- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts index 8ff220458f7..de7141a3d79 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts @@ -12,8 +12,13 @@ import { t9n, } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { GlobalTestProps } from "../../tests/utils"; import { CSS, SLOTS } from "./resources"; +type TestWindow = GlobalTestProps<{ + beforeClose: () => Promise; +}>; + describe("calcite-flow-item", () => { describe("renders", () => { renders("calcite-flow-item", { display: "flex" }); @@ -210,8 +215,7 @@ describe("calcite-flow-item", () => { await page.$eval( "calcite-flow-item", - (el: HTMLCalciteFlowItemElement) => - (el.beforeClose = (window as typeof window & Pick).beforeClose), + (el: HTMLCalciteFlowItemElement) => (el.beforeClose = (window as TestWindow).beforeClose), ); await page.waitForChanges(); diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index 8de9ce84ef9..d1e956a2d1b 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/packages/calcite-components/src/components/panel/panel.e2e.ts @@ -12,8 +12,13 @@ import { slots, t9n, } from "../../tests/commonTests"; +import { GlobalTestProps } from "../../tests/utils"; import { CSS, SLOTS } from "./resources"; +type TestWindow = GlobalTestProps<{ + beforeClose: () => Promise; +}>; + const panelTemplate = (scrollable = false) => html`
@@ -143,8 +148,7 @@ describe("calcite-panel", () => { await page.$eval( "calcite-panel", - (el: HTMLCalcitePanelElement) => - (el.beforeClose = (window as typeof window & Pick).beforeClose), + (el: HTMLCalcitePanelElement) => (el.beforeClose = (window as TestWindow).beforeClose), ); await page.waitForChanges(); @@ -164,8 +168,7 @@ describe("calcite-panel", () => { await page.$eval( "calcite-panel", - (el: HTMLCalcitePanelElement) => - (el.beforeClose = (window as typeof window & Pick).beforeClose), + (el: HTMLCalcitePanelElement) => (el.beforeClose = (window as TestWindow).beforeClose), ); const panel = await page.find("calcite-panel"); From c9a207828c04fceae9cec87326f64852f841d62b Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 15 Jul 2024 16:07:06 -0700 Subject: [PATCH 5/6] cleanup --- packages/calcite-components/src/components/modal/modal.scss | 2 +- packages/calcite-components/src/components/modal/modal.tsx | 2 +- packages/calcite-components/src/components/modal/resources.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss index b87a057ebd5..6d0985576d9 100644 --- a/packages/calcite-components/src/components/modal/modal.scss +++ b/packages/calcite-components/src/components/modal/modal.scss @@ -411,7 +411,7 @@ slot[name="primary"] { * Conditional styles for when Modal is slotted in Shell */ -.container.embedded { +.container--embedded { position: absolute; pointer-events: auto; calcite-scrim { diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index e0381baeede..a0f8443698c 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -217,7 +217,7 @@ export class Modal class={{ [CSS.container]: true, [CSS.containerOpen]: this.opened, - [CSS.embedded]: this.embedded, + [CSS.containerEmbedded]: this.embedded, }} > diff --git a/packages/calcite-components/src/components/modal/resources.ts b/packages/calcite-components/src/components/modal/resources.ts index 5052e49238b..d9fd23662e8 100644 --- a/packages/calcite-components/src/components/modal/resources.ts +++ b/packages/calcite-components/src/components/modal/resources.ts @@ -10,11 +10,11 @@ export const CSS = { primary: "primary", container: "container", containerOpen: "container--open", + containerEmbedded: "container--embedded", content: "content", contentNoFooter: "content--no-footer", contentBottom: "content-bottom", contentTop: "content-top", - embedded: "embedded", // these classes help apply the animation in phases to only set transform on open/close // this helps avoid a positioning issue for any floating-ui-owning children From fe2e51e8cf67c0127a0bad23cc29a19c6dddda26 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 15 Jul 2024 16:10:45 -0700 Subject: [PATCH 6/6] cleanup --- .../src/components/alert/alert.tsx | 16 ++++++++-------- .../src/components/modal/modal.tsx | 16 ++++++++-------- .../src/components/sheet/sheet.tsx | 16 ++++++++-------- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 8d3dc5d297a..2ba97cd4a11 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -93,6 +93,14 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen /** Specifies the duration before the component automatically closes - only use with `autoClose`. */ @Prop({ reflect: true }) autoCloseDuration: AlertDuration = "medium"; + /** + * This internal property, managed by a containing calcite-shell, is used + * to inform the component if special configuration or styles are needed + * + * @internal + */ + @Prop({ mutable: true }) embedded = false; + /** Specifies the kind of the component, which will apply to top border and icon. */ @Prop({ reflect: true }) kind: Extract< "brand" | "danger" | "info" | "success" | "warning", @@ -141,14 +149,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen /* wired up by t9n util */ } - /** - * This internal property, managed by a containing calcite-shell, is used - * to inform the component if special configuration or styles are needed - * - * @internal - */ - @Prop({ mutable: true }) embedded = false; - @Watch("autoCloseDuration") updateDuration(): void { if (this.autoClose && this.autoCloseTimeoutId) { diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index a0f8443698c..26f926da9e4 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -122,6 +122,14 @@ export class Modal /** When `true`, prevents the component from expanding to the entire screen on mobile devices. */ @Prop({ reflect: true }) docked: boolean; + /** + * This internal property, managed by a containing calcite-shell, is used + * to inform the component if special configuration or styles are needed + * + * @internal + */ + @Prop({ mutable: true }) embedded = false; + /** When `true`, disables the default close on escape behavior. */ @Prop({ reflect: true }) escapeDisabled = false; @@ -156,14 +164,6 @@ export class Modal /* wired up by t9n util */ } - /** - * This internal property, managed by a containing calcite-shell, is used - * to inform the component if special configuration or styles are needed - * - * @internal - */ - @Prop({ mutable: true }) embedded = false; - //-------------------------------------------------------------------------- // // Lifecycle diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index 1112a5d7994..27b52aeb25f 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -58,6 +58,14 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo */ @Prop({ reflect: true }) displayMode: DisplayMode = "overlay"; + /** + * This internal property, managed by a containing calcite-shell, is used + * to inform the component if special configuration or styles are needed + * + * @internal + */ + @Prop() embedded = false; + /** When `true`, disables the default close on escape behavior. */ @Prop({ reflect: true }) escapeDisabled = false; @@ -119,14 +127,6 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo /** Determines where the component will be positioned. */ @Prop({ reflect: true }) position: LogicalFlowPosition = "inline-start"; - /** - * This internal property, managed by a containing calcite-shell, is used - * to inform the component if special configuration or styles are needed - * - * @internal - */ - @Prop() embedded = false; - /** * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. */