feat(panel, flow-item): add alerts slot (#9778)

**Related Issue:** #9772

## Summary

- add `alerts` slot to `panel` and `flow-item`
- rename existing internal property `slottedInShell` to `embedded` for
greater use beyond just shell
- add e2e test
- add screenshot tests

Author: driskull

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<void>;
-        /**
-          * 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 {
         /**
@@ -3388,6 +3388,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.
          */
@@ -3438,10 +3442,6 @@ export namespace Components {
           * Sets focus on the component's "close" button (the first focusable item).
          */
         "setFocus": () => Promise<void>;
-        /**
-          * 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.
          */
@@ -4331,6 +4331,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.
          */
@@ -4367,10 +4371,6 @@ export namespace Components {
           * Sets focus on the component's "close" button - the first focusable item.
          */
         "setFocus": () => Promise<void>;
-        /**
-          * 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.
          */
@@ -8273,6 +8273,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.
          */
@@ -8340,10 +8344,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 {
         /**
@@ -11359,6 +11359,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.
          */
@@ -11415,10 +11419,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.
          */
@@ -12330,6 +12330,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.
          */
@@ -12378,10 +12382,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.
          */

packages/calcite-components/src/components/alert/alert.e2e.ts

@@ -11,6 +11,10 @@ describe("defaults", () => {
       propertyName: "autoCloseDuration",
       defaultValue: "medium",
     },
+    {
+      propertyName: "embedded",
+      defaultValue: false,
+    },
   ]);
 });
 

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

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 }) slottedInShell: boolean;
-
   @Watch("autoCloseDuration")
   updateDuration(): void {
     if (this.autoClose && this.autoCloseTimeoutId) {
@@ -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}

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",

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<void>;
+}>;
+
 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<typeof el, "beforeClose">).beforeClose),
+      (el: HTMLCalciteFlowItemElement) => (el.beforeClose = (window as TestWindow).beforeClose),
     );
 
     await page.waitForChanges();
@@ -327,4 +331,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`<calcite-flow-item closable>
+        test
+        <calcite-alert slot="alerts" open label="this is a default alert">
+          <div slot="title">Hello there!</div>
+          <div slot="message">This is an alert with a general piece of information. Cool, innit?</div>
+        </calcite-alert>
+      </calcite-flow-item>`,
+    });
+    await page.waitForChanges();
+
+    const alert = await page.find("calcite-alert");
+
+    expect(await alert.getProperty("embedded")).toBe(true);
+  });
 });

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`<calcite-flow-item style="--calcite-flow-item-header-border-block-end:none;" height-scale="s" heading="My Panel"
     >Slotted content!</calcite-flow-item
   >`;
+
+export const withAlertsSlot = (): string => html`
+  <calcite-flow-item height-scale="s" heading="My Panel" style="width: 500px; height:200px">
+    Slotted content!
+    <calcite-alert slot="alerts" open label="this is a default alert" scale="s">
+      <div slot="title">Hello there!</div>
+      <div slot="message">This is an alert with a general piece of information. Cool, innit?</div>
+    </calcite-alert>
+  </calcite-flow-item>
+`;

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.
@@ -396,6 +397,7 @@ export class FlowItem
           >
             {this.renderBackButton()}
             <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />
+            <slot name={SLOTS.alerts} slot={PANEL_SLOTS.alerts} />
             <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />
             <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />
             <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />

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",

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 {

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 }) slottedInShell: boolean;
-
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -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.containerEmbedded]: this.embedded,
           }}
         >
           <calcite-scrim class={CSS.scrim} onClick={this.handleOutsideClose} />
@@ -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;
       }

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",
-  slottedInShell: "slotted-in-shell",
 
   // 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