feat(dialog): add 'custom-content' slot

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

@@ -593,7 +593,7 @@ describe("calcite-dialog", () => {
       const page = await newE2EPage();
       await page.setContent(
         html`<calcite-dialog close-disabled>
-          <div slot="content">
+          <div slot="custom-content">
             <button id="${button1Id}">Focus1</button>
             <button id="${button2Id}">Focus2</button>
           </div>

packages/calcite-components/src/components/dialog/dialog.stories.ts

@@ -137,6 +137,22 @@ const footerContent = html`<calcite-button
   <calcite-button slot="${SLOTS.footerEnd}" width="auto" appearance="outline">Cancel</calcite-button>
   <calcite-button slot="${SLOTS.footerEnd}" width="auto">Save</calcite-button>`;
 
+const customContent = html` <div
+  style="margin: auto;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--calcite-color-background);
+        border: 1px solid var(--calcite-color-brand);
+        border-radius: 5px;"
+  slot="custom-content"
+>
+  <p>This dialog has default content replaced with custom content.</p>
+  <calcite-button id="custom-content-button" appearance="transparent" scale="s">Close</calcite-button>
+</div>`;
+
 export const slots = (): string => html`
   <calcite-dialog heading="My Dialog" open scale="m" width-scale="s">
     <div slot="${SLOTS.contentTop}">Slot for a content-top.</div>
@@ -171,6 +187,10 @@ export const slotsWithModal = (): string => html`
   </calcite-dialog>
 `;
 
+export const customContentSlot = (): string => html`
+  <calcite-dialog heading="Custom content slot dialog" open placement="cover"> ${customContent} </calcite-dialog>
+`;
+
 export const darkModeRTLCustomSizeCSSVars = (): string => html`
   <calcite-dialog
     heading="My Dialog"

packages/calcite-components/src/components/dialog/dialog.tsx

@@ -51,7 +51,8 @@ let initialDocumentOverflowStyle: string = "";
 
 /**
  * @slot - A slot for adding content.
- * @slot content - A slot for adding custom content.
+ * @slot content - [Deprecated] Use `custom-content` slot instead.
+ * @slot custom-content - A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`.
  * @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 - if populated - the `footer` slot.
@@ -805,39 +806,41 @@ export class Dialog
               {assistiveText}
             </div>
           ) : null}
-          <slot name={SLOTS.content}>
-            <calcite-panel
-              beforeClose={this.beforeClose}
-              class={CSS.panel}
-              closable={!this.closeDisabled}
-              closed={!opened}
-              description={description}
-              heading={heading}
-              headingLevel={this.headingLevel}
-              loading={this.loading}
-              menuOpen={this.menuOpen}
-              messageOverrides={this.messageOverrides}
-              onKeyDown={this.handlePanelKeyDown}
-              oncalcitePanelClose={this.handleInternalPanelCloseClick}
-              oncalcitePanelScroll={this.handleInternalPanelScroll}
-              overlayPositioning={this.overlayPositioning}
-              ref={this.panelEl}
-              scale={this.scale}
-            >
-              <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} />
-              <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />
-              <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
-              <slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />
-              <slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />
-              <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
-              <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
-              <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
-              <slot />
-            </calcite-panel>
+          <slot name={SLOTS.customContent}>
+            <slot name={SLOTS.content}>
+              <calcite-panel
+                beforeClose={this.beforeClose}
+                class={CSS.panel}
+                closable={!this.closeDisabled}
+                closed={!opened}
+                description={description}
+                heading={heading}
+                headingLevel={this.headingLevel}
+                loading={this.loading}
+                menuOpen={this.menuOpen}
+                messageOverrides={this.messageOverrides}
+                onKeyDown={this.handlePanelKeyDown}
+                oncalcitePanelClose={this.handleInternalPanelCloseClick}
+                oncalcitePanelScroll={this.handleInternalPanelScroll}
+                overlayPositioning={this.overlayPositioning}
+                ref={this.panelEl}
+                scale={this.scale}
+              >
+                <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} />
+                <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />
+                <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
+                <slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />
+                <slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />
+                <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
+                <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
+                <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
+                <slot />
+              </calcite-panel>
+            </slot>
           </slot>
         </div>
       </div>

packages/calcite-components/src/components/dialog/resources.ts

@@ -15,6 +15,7 @@ export const SLOTS = {
   actionBar: "action-bar",
   alerts: "alerts",
   content: "content",
+  customContent: "custom-content",
   contentTop: "content-top",
   contentBottom: "content-bottom",
   headerActionsStart: "header-actions-start",

packages/calcite-components/src/demos/dialog.html

@@ -26,6 +26,18 @@
         text-align: right;
       }
 
+      .custom-content-slot-test-div {
+        margin: auto;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--calcite-color-background);
+        border: 1px solid var(--calcite-color-brand);
+        border-radius: 5px;
+      }
+
       hr {
         margin: 25px 0;
         border-top: 1px solid var(--calcite-color-border-2);
@@ -1679,12 +1691,32 @@ <h1 style="margin: 0 auto; text-align: center">Dialog</h1>
         </div>
       </div>
 
+      <hr />
+
+      <div class="parent">
+        <div class="child right-aligned-text"></div>
+        <div class="child">
+          <calcite-dialog heading="Custom content slot dialog" id="js-dialog-custom-content-slot" placement="cover">
+            <div class="custom-content-slot-test-div" slot="custom-content">
+              <p>This dialog has default content replaced with custom content.</p>
+              <calcite-button id="custom-content-button" appearance="outline" scale="s">Close</calcite-button>
+            </div>
+          </calcite-dialog>
+
+          <calcite-button data-dialog-ref="js-dialog-custom-content-slot" appearance="outline" scale="s">
+            custom content slot
+          </calcite-button>
+        </div>
+      </div>
+
       <script>
         const customSizeDialog = document.querySelector("#js-dialog-custom-size");
         const heightInput = document.querySelector("#css-dialog-height-adjuster");
         const widthInput = document.querySelector("#css-dialog-width-adjuster");
         const optionsSelect = document.querySelector("#css-dialog-options-adjuster");
         const beforeCloseRejected = document.getElementById("js-dialog-before-close");
+        const customContentDialog = document.getElementById("js-dialog-custom-content-slot");
+        const customContentButton = document.getElementById("custom-content-button");
 
         beforeCloseRejected.beforeClose = () => {
           return new Promise((_resolve, reject) => setTimeout(reject, 300));
@@ -1722,6 +1754,10 @@ <h1 style="margin: 0 auto; text-align: center">Dialog</h1>
 
           dialog.open = true;
         });
+
+        customContentButton.addEventListener("click", () => {
+          customContentDialog.open = false;
+        });
       </script>
     </demo-dom-swapper>
   </body>