feat(dialog): add padding to default slot (#9871)

**Related Issue:** #9869 ## Summary - adds css var `--calcite-dialog-content-space` - sets padding on dialog by default - adds screenshot test
Esri · Jul 30, 2024 · 9d89d1d · 9d89d1d
1 parent 4549f54
commit 9d89d1d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -6,6 +6,7 @@
  * @prop --calcite-dialog-scrim-background-color: Specifies the background color of the component's scrim.
  * @prop --calcite-dialog-size-x: Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement="cover"` is set.
  * @prop --calcite-dialog-size-y: Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement="cover"` is set.
+ * @prop --calcite-dialog-content-space: Specifies the padding of the component's content.
  * @prop --calcite-dialog-footer-space: Specifies the padding of the component's footer.
  * @prop --calcite-dialog-border-color: Specifies the component's border color.
  */
@@ -75,20 +76,23 @@
 }
 
 :host([scale="s"]) {
+  --calcite-internal-dialog-content-padding: var(--calcite-spacing-sm);
   --calcite-internal-dialog-padding: theme("spacing.3");
   --calcite-internal-dialog-padding-large: theme("spacing.4");
   --calcite-internal-dialog-title-text: theme("fontSize.1h");
   --calcite-internal-dialog-content-text: theme("fontSize.n1");
 }
 
 :host([scale="m"]) {
+  --calcite-internal-dialog-content-padding: var(--calcite-spacing-md);
   --calcite-internal-dialog-padding: theme("spacing.4");
   --calcite-internal-dialog-padding-large: theme("spacing.5");
   --calcite-internal-dialog-title-text: theme("fontSize.2h");
   --calcite-internal-dialog-content-text: theme("fontSize.0");
 }
 
 :host([scale="l"]) {
+  --calcite-internal-dialog-content-padding: var(--calcite-spacing-lg);
   --calcite-internal-dialog-padding: theme("spacing.5");
   --calcite-internal-dialog-padding-large: theme("spacing.6");
   --calcite-internal-dialog-title-text: theme("fontSize.3h");
@@ -113,6 +117,10 @@ calcite-panel {
   --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
@@ -351,7 +351,8 @@ export const footerSlot = (): string => html`
 `;
 
 const themedStyle = html` --calcite-dialog-scrim-background-color: purple; --calcite-dialog-size-x: 400px;
---calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;`;
+--calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;
+--calcite-dialog-content-space: 50px;`;
 
 export const themed = (): string =>
   html`<calcite-dialog
@@ -363,6 +364,7 @@ export const themed = (): string =>
     scale="m"
     width-scale="s"
   >
-    <p>Slotted content!</p>
+    Slotted content!
     <div slot="footer">Footer!</div>
+    <calcite-fab slot="${SLOTS.fab}"></calcite-fab>
   </calcite-dialog>`;
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -262,7 +262,9 @@ 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} />
-                <slot />
+                <div class={CSS.content}>
+                  <slot />
+                </div>
               </calcite-panel>
             </slot>
           </div>

diff --git a/packages/calcite-components/src/components/dialog/resources.ts b/packages/calcite-components/src/components/dialog/resources.ts
@@ -7,6 +7,7 @@ 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