fix(dialog): no longer modifies slotted panels background color. #10809

Esri · Dec 13, 2024 · d5cd474 · d5cd474
1 parent 2555a61
commit d5cd474
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -121,6 +121,10 @@ calcite-panel {
   --calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));
 }
 
+::slotted(calcite-panel) {
+  --calcite-panel-background-color: initial;
+}
+
 .dialog {
   @apply pointer-events-none
     m-6

diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -232,6 +232,12 @@ export const withCustomContent = (): string => html`
   </calcite-dialog>
 `;
 
+export const withCustomContentPanel = (): string => html`
+  <calcite-dialog open modal heading="heading" description="description" scale="m" width-scale="s">
+    <calcite-panel heading="Custom Panel" slot="${SLOTS.content}">Custom Panel Content!</calcite-panel>
+  </calcite-dialog>
+`;
+
 export const loading = (): string => html`
   <calcite-dialog loading open modal heading="heading" description="description" scale="m" width-scale="s">
     <p>Slotted content!</p>