From ea3a6dee87bb2f0476fa826f593453ba1c8b4d8b Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 22 Aug 2024 09:59:29 -0700
Subject: [PATCH] fix(dialog): allow shell to be slotted inside (#10118)

**Related Issue:** #10095

## Summary

- sets the `--calcite-panel-content-space` on panel
- maps `--calcite-dialog-content-space` to
`--calcite-panel-content-space`
- adds screenshot test
- removes use of content div internally
---
 .../src/components/dialog/dialog.scss         |  5 +----
 .../src/components/dialog/dialog.stories.ts   | 21 +++++++++++++++++++
 .../src/components/dialog/dialog.tsx          |  4 +---
 .../src/components/dialog/resources.ts        |  1 -
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 6d23836d51f..1d5d4fa9339 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -115,14 +115,11 @@
 }
 
 calcite-panel {
+  --calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
   --calcite-panel-footer-padding: var(--calcite-dialog-footer-space);
   --calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);
 }
 
-.content {
-  padding: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
-}
-
 .dialog {
   @apply pointer-events-none
     float-none
diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index d89822b27da..97670089cc0 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -360,6 +360,27 @@ const themedStyle = html`--calcite-dialog-scrim-background-color: purple; --calc
 --calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;
 --calcite-dialog-content-space: 50px; --calcite-dialog-offset-x: 50px; --calcite-dialog-offset-y: -30px;`;
 
+export const withShellInside = (): string =>
+  html`<calcite-dialog open modal heading="heading" description="description" scale="m" width-scale="l">
+    <calcite-shell>
+      <calcite-shell-panel slot="panel-start">
+        <calcite-action-bar slot="action-bar" expanded>
+          <calcite-action-group>
+            <calcite-action text-enabled text="Action 1"></calcite-action>
+            <calcite-action text-enabled text="Action 2"></calcite-action>
+            <calcite-action text-enabled text="Action 3"></calcite-action>
+            <calcite-action text-enabled text="Action 4"></calcite-action>
+          </calcite-action-group>
+        </calcite-action-bar>
+      </calcite-shell-panel>
+      <calcite-shell-center-row>
+        <calcite-button>button</calcite-button>
+      </calcite-shell-center-row>
+    </calcite-shell>
+    <calcite-button slot="footer-end" appearance="outline"> Cancel </calcite-button>
+    <calcite-button slot="footer-end"> Save </calcite-button>
+  </calcite-dialog>`;
+
 export const themed = (): string =>
   html`<calcite-dialog
     style="${themedStyle}"
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 94760d6b5ba..991f3b66d18 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -275,9 +275,7 @@ export class Dialog
                 <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
                 <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
                 <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
-                <div class={CSS.content}>
-                  <slot />
-                </div>
+                <slot />
               </calcite-panel>
             </slot>
           </div>
diff --git a/packages/calcite-components/src/components/dialog/resources.ts b/packages/calcite-components/src/components/dialog/resources.ts
index 7265d7e5a75..db9ab305dcc 100644
--- a/packages/calcite-components/src/components/dialog/resources.ts
+++ b/packages/calcite-components/src/components/dialog/resources.ts
@@ -7,7 +7,6 @@ export const CSS = {
   container: "container",
   containerOpen: "container--open",
   containerEmbedded: "container--embedded",
-  content: "content",
 
   // 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