From f80b4c274d9a2706604433e06460cfb9b1e6e03d Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Fri, 6 Dec 2024 13:05:05 -0800
Subject: [PATCH 1/5] docs: deprecate dialogs content slot for renamed
 custom-content slot

---
 .../calcite-components/src/components/dialog/dialog.e2e.ts     | 2 +-
 packages/calcite-components/src/components/dialog/dialog.tsx   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index 118a6fa2af4..9c4b9b8b8cc 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -579,7 +579,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>
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 91200bc101a..6c0281bf3d3 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -50,7 +50,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 adding custom content that will prevent the rendering of 'component chrome', 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.

From f38922f5c3d4f1f535815b696c8b7d46701ca221 Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Mon, 16 Dec 2024 09:52:15 -0800
Subject: [PATCH 2/5] Change description wording

---
 packages/calcite-components/src/components/dialog/dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 6c0281bf3d3..f28eb2fc57a 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -51,7 +51,7 @@ let initialDocumentOverflowStyle: string = "";
 /**
  * @slot - A slot for adding content.
  * @slot content - [Deprecated] Use `custom-content` slot instead.
- * @slot custom-content - A slot for adding custom content that will prevent the rendering of 'component chrome', except for `box-shadow` and `corner-radius`.
+ * @slot custom-content - A slot for adding custom content that. Will prevent the rendering of 'component chrome', 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.

From abe44667fa727bf9596ae83ab4c06db7ff31b32e Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Mon, 16 Dec 2024 10:54:40 -0800
Subject: [PATCH 3/5] fix wording

---
 packages/calcite-components/src/components/dialog/dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 4c4e31f3156..13c78087d52 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -51,7 +51,7 @@ let initialDocumentOverflowStyle: string = "";
 /**
  * @slot - A slot for adding content.
  * @slot content - [Deprecated] Use `custom-content` slot instead.
- * @slot custom-content - A slot for adding custom content that. Will prevent the rendering of 'component chrome', except for `box-shadow` and `corner-radius`.
+ * @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.

From 385654bbf641204c4e6ba27973da7d221f655e3d Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Tue, 28 Jan 2025 10:24:23 -0800
Subject: [PATCH 4/5] add custom content slot

---
 .../src/components/dialog/dialog.tsx          | 68 ++++++++++---------
 .../src/components/dialog/resources.ts        |  1 +
 .../calcite-components/src/demos/dialog.html  | 36 ++++++++++
 3 files changed, 72 insertions(+), 33 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index d4bbe1289ba..1aad7525706 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -806,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>
diff --git a/packages/calcite-components/src/components/dialog/resources.ts b/packages/calcite-components/src/components/dialog/resources.ts
index 31298ddf31a..77d71083954 100644
--- a/packages/calcite-components/src/components/dialog/resources.ts
+++ b/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",
diff --git a/packages/calcite-components/src/demos/dialog.html b/packages/calcite-components/src/demos/dialog.html
index b5df23532a2..4130f964503 100644
--- a/packages/calcite-components/src/demos/dialog.html
+++ b/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>

From 3eaf0b91bff9b0c23c6278dc3c1165307e6cfe46 Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Tue, 28 Jan 2025 11:04:13 -0800
Subject: [PATCH 5/5] add screenshot test

---
 .../src/components/dialog/dialog.stories.ts   | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index e63c2580f78..1547ff3f3d7 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/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"