Skip to content

Commit a132d00

Browse files
DitwanPDitwanP
authored
feat(dialog): add 'custom-content' slot (#11072)
**Related Issue:** #10323 ## Summary Deprecates the `"content"` slot in favor of a new `"custom-content"` slot that will clearly describes the behavior that a user can expect. This change should solve the issue of confusion that we've heard about from internal feedback. The description of the new slot would be: > **custom-content** - A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`. deprecate(dialog): deprecate the `content` slot
1 parent 91348b6 commit a132d00

File tree

5 files changed

+95
-35
lines changed

5 files changed

+95
-35
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -593,7 +593,7 @@ describe("calcite-dialog", () => {
593593
const page = await newE2EPage();
594594
await page.setContent(
595595
html`<calcite-dialog close-disabled>
596-
<div slot="content">
596+
<div slot="custom-content">
597597
<button id="${button1Id}">Focus1</button>
598598
<button id="${button2Id}">Focus2</button>
599599
</div>

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

+20
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,22 @@ const footerContent = html`<calcite-button
137137
<calcite-button slot="${SLOTS.footerEnd}" width="auto" appearance="outline">Cancel</calcite-button>
138138
<calcite-button slot="${SLOTS.footerEnd}" width="auto">Save</calcite-button>`;
139139

140+
const customContent = html` <div
141+
style="margin: auto;
142+
padding: 20px;
143+
display: flex;
144+
flex-direction: column;
145+
justify-content: center;
146+
align-items: center;
147+
background-color: var(--calcite-color-background);
148+
border: 1px solid var(--calcite-color-brand);
149+
border-radius: 5px;"
150+
slot="custom-content"
151+
>
152+
<p>This dialog has default content replaced with custom content.</p>
153+
<calcite-button id="custom-content-button" appearance="transparent" scale="s">Close</calcite-button>
154+
</div>`;
155+
140156
export const slots = (): string => html`
141157
<calcite-dialog heading="My Dialog" open scale="m" width-scale="s">
142158
<div slot="${SLOTS.contentTop}">Slot for a content-top.</div>
@@ -171,6 +187,10 @@ export const slotsWithModal = (): string => html`
171187
</calcite-dialog>
172188
`;
173189

190+
export const customContentSlot = (): string => html`
191+
<calcite-dialog heading="Custom content slot dialog" open placement="cover"> ${customContent} </calcite-dialog>
192+
`;
193+
174194
export const darkModeRTLCustomSizeCSSVars = (): string => html`
175195
<calcite-dialog
176196
heading="My Dialog"

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

+37-34
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ let initialDocumentOverflowStyle: string = "";
5151

5252
/**
5353
* @slot - A slot for adding content.
54-
* @slot content - A slot for adding custom content.
54+
* @slot content - [Deprecated] Use `custom-content` slot instead.
55+
* @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`.
5556
* @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
5657
* @slot alerts - A slot for adding `calcite-alert`s to the component.
5758
* @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
805806
{assistiveText}
806807
</div>
807808
) : null}
808-
<slot name={SLOTS.content}>
809-
<calcite-panel
810-
beforeClose={this.beforeClose}
811-
class={CSS.panel}
812-
closable={!this.closeDisabled}
813-
closed={!opened}
814-
description={description}
815-
heading={heading}
816-
headingLevel={this.headingLevel}
817-
loading={this.loading}
818-
menuOpen={this.menuOpen}
819-
messageOverrides={this.messageOverrides}
820-
onKeyDown={this.handlePanelKeyDown}
821-
oncalcitePanelClose={this.handleInternalPanelCloseClick}
822-
oncalcitePanelScroll={this.handleInternalPanelScroll}
823-
overlayPositioning={this.overlayPositioning}
824-
ref={this.panelEl}
825-
scale={this.scale}
826-
>
827-
<slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />
828-
<slot name={SLOTS.alerts} slot={PANEL_SLOTS.alerts} />
829-
<slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />
830-
<slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />
831-
<slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />
832-
<slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />
833-
<slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
834-
<slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />
835-
<slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />
836-
<slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
837-
<slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
838-
<slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
839-
<slot />
840-
</calcite-panel>
809+
<slot name={SLOTS.customContent}>
810+
<slot name={SLOTS.content}>
811+
<calcite-panel
812+
beforeClose={this.beforeClose}
813+
class={CSS.panel}
814+
closable={!this.closeDisabled}
815+
closed={!opened}
816+
description={description}
817+
heading={heading}
818+
headingLevel={this.headingLevel}
819+
loading={this.loading}
820+
menuOpen={this.menuOpen}
821+
messageOverrides={this.messageOverrides}
822+
onKeyDown={this.handlePanelKeyDown}
823+
oncalcitePanelClose={this.handleInternalPanelCloseClick}
824+
oncalcitePanelScroll={this.handleInternalPanelScroll}
825+
overlayPositioning={this.overlayPositioning}
826+
ref={this.panelEl}
827+
scale={this.scale}
828+
>
829+
<slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />
830+
<slot name={SLOTS.alerts} slot={PANEL_SLOTS.alerts} />
831+
<slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />
832+
<slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />
833+
<slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />
834+
<slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />
835+
<slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
836+
<slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />
837+
<slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />
838+
<slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
839+
<slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
840+
<slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
841+
<slot />
842+
</calcite-panel>
843+
</slot>
841844
</slot>
842845
</div>
843846
</div>

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

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const SLOTS = {
1515
actionBar: "action-bar",
1616
alerts: "alerts",
1717
content: "content",
18+
customContent: "custom-content",
1819
contentTop: "content-top",
1920
contentBottom: "content-bottom",
2021
headerActionsStart: "header-actions-start",

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

+36
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,18 @@
2626
text-align: right;
2727
}
2828

29+
.custom-content-slot-test-div {
30+
margin: auto;
31+
padding: 20px;
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
align-items: center;
36+
background-color: var(--calcite-color-background);
37+
border: 1px solid var(--calcite-color-brand);
38+
border-radius: 5px;
39+
}
40+
2941
hr {
3042
margin: 25px 0;
3143
border-top: 1px solid var(--calcite-color-border-2);
@@ -1679,12 +1691,32 @@ <h1 style="margin: 0 auto; text-align: center">Dialog</h1>
16791691
</div>
16801692
</div>
16811693

1694+
<hr />
1695+
1696+
<div class="parent">
1697+
<div class="child right-aligned-text"></div>
1698+
<div class="child">
1699+
<calcite-dialog heading="Custom content slot dialog" id="js-dialog-custom-content-slot" placement="cover">
1700+
<div class="custom-content-slot-test-div" slot="custom-content">
1701+
<p>This dialog has default content replaced with custom content.</p>
1702+
<calcite-button id="custom-content-button" appearance="outline" scale="s">Close</calcite-button>
1703+
</div>
1704+
</calcite-dialog>
1705+
1706+
<calcite-button data-dialog-ref="js-dialog-custom-content-slot" appearance="outline" scale="s">
1707+
custom content slot
1708+
</calcite-button>
1709+
</div>
1710+
</div>
1711+
16821712
<script>
16831713
const customSizeDialog = document.querySelector("#js-dialog-custom-size");
16841714
const heightInput = document.querySelector("#css-dialog-height-adjuster");
16851715
const widthInput = document.querySelector("#css-dialog-width-adjuster");
16861716
const optionsSelect = document.querySelector("#css-dialog-options-adjuster");
16871717
const beforeCloseRejected = document.getElementById("js-dialog-before-close");
1718+
const customContentDialog = document.getElementById("js-dialog-custom-content-slot");
1719+
const customContentButton = document.getElementById("custom-content-button");
16881720

16891721
beforeCloseRejected.beforeClose = () => {
16901722
return new Promise((_resolve, reject) => setTimeout(reject, 300));
@@ -1722,6 +1754,10 @@ <h1 style="margin: 0 auto; text-align: center">Dialog</h1>
17221754

17231755
dialog.open = true;
17241756
});
1757+
1758+
customContentButton.addEventListener("click", () => {
1759+
customContentDialog.open = false;
1760+
});
17251761
</script>
17261762
</demo-dom-swapper>
17271763
</body>

0 commit comments

Comments
 (0)