Skip to content

Commit 174a739

Browse files
marissahuysentruytmarissahuysentruyt
committed
docs(dialog): updates dialog template and stories
- adds layout: "fullscreen" to render dialogs in their canvases, instead of off the canvas - uses getRandomId and renderContent functions to render header and footer contents - implements "slotted" components for the new takeover dialog feature - removes hasDivider since s2 dialogs don't support a divider - updates Figma links for fullscreen and fullscreenTakeover stories - updates some class names to better follow naming conventions
1 parent 3966cf4 commit 174a739

File tree

2 files changed

+79
-30
lines changed

2 files changed

+79
-30
lines changed

‎components/dialog/stories/dialog.stories.js

Lines changed: 69 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { size } from "@spectrum-css/preview/types";
4+
import { Template as Table } from "@spectrum-css/table/stories/template.js";
5+
import { Template as Steplist } from "@spectrum-css/steplist/stories/template.js";
46
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
57
import metadata from "../dist/metadata.json";
68
import packageJson from "../package.json";
@@ -10,10 +12,11 @@ import { Template } from "./template.js";
1012
/**
1113
* A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
1214
*
15+
* The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs).
16+
*
1317
* ## Usage with modal component
1418
* When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations should set `--mod-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peeking through from behind the dialog at the rounded corners, allowing the dialog's background color to take precedence.
1519
*
16-
* The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs).
1720
*/
1821
export default {
1922
title: "Dialog",
@@ -96,15 +99,6 @@ export default {
9699
control: "boolean",
97100
if: { arg: "layout", eq: "default" },
98101
},
99-
hasDivider: {
100-
name: "Divider",
101-
type: { name: "boolean" },
102-
table: {
103-
type: { summary: "boolean" },
104-
category: "Component",
105-
},
106-
control: "boolean",
107-
},
108102
showModal: {
109103
name: "Wrap the dialog in a modal",
110104
type: { name: "boolean" },
@@ -167,6 +161,7 @@ export default {
167161
},
168162
packageJson,
169163
metadata,
164+
layout: "fullscreen",
170165
},
171166
decorators: [
172167
withUnderlayWrapper,
@@ -267,16 +262,71 @@ WithScroll.parameters = {
267262
};
268263

269264
/**
270-
* The full screen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height.
265+
* The fullscreen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height.
266+
*
267+
* Fullscreen dialogs do not support a close button, and are not dismissible.
268+
*
269+
* Implementations may swap out the extra header content and body content for other components, like the [steplist](/docs/components-steplist--docs) and [table](/docs/components-table--docs) seen in this example. Components in the extra header content area will be centered.
271270
*/
272271
export const Fullscreen = DialogFullscreen.bind({});
273272
Fullscreen.args = {
274273
...Default.args,
274+
header:[
275+
(passthroughs, context) => Steplist({
276+
...passthroughs,
277+
items: [
278+
{
279+
label: "Enter records",
280+
isComplete: true,
281+
},
282+
{
283+
label: "Confirmation",
284+
isComplete: true,
285+
},
286+
{
287+
label: "Summary",
288+
isSelected: true,
289+
},
290+
],
291+
}, context),
292+
],
293+
content: [
294+
(passthroughs, context) => Table({
295+
...passthroughs,
296+
showThumbnails: true,
297+
rowItems: [
298+
{
299+
cellContent: ["Table Row Alpha", "Test", "2"],
300+
},
301+
{
302+
cellContent: ["Table Row Bravo", "Test", "28"],
303+
},
304+
{
305+
cellContent: [
306+
"Table Row Charlie. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
307+
"Test",
308+
"23",
309+
],
310+
},
311+
{
312+
cellContent: ["Table Row Delta", "Test", "7"],
313+
},
314+
{
315+
cellContent: ["Summary Row", "", "60"],
316+
isSummaryRow: true,
317+
},
318+
],
319+
}, context),
320+
],
275321
layout: "fullscreen",
276322
hasFooter: false,
277323
};
278324
Fullscreen.parameters = {
279325
chromatic: { disableSnapshot: true },
326+
design: {
327+
type: "figma",
328+
url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399",
329+
}
280330
};
281331

282332
// TODO: Because storybook doesn't support for multiple conditionals, we've removed the hasFooter
@@ -286,15 +336,22 @@ Fullscreen.parameters = {
286336
// https://github.com/storybookjs/storybook/discussions/18542
287337
Fullscreen.argTypes = {
288338
hasFooter: { table: { disable: true, } },
339+
header: { table: { disable: true, } },
289340
};
290341

291342
/**
292-
* The full screen takeover variant is similar to the full screen variant except that the background covers the entire screen. The page behind the dialog is not visible. This variant should be reserved for workflows where displaying a second dialog on top of the first one is to be expected.
343+
* The fullscreen takeover variant is similar to the fullscreen variant except that the background covers the entire screen. The page behind the dialog is not visible. This variant should be reserved for workflows where displaying a second dialog on top of the first one is to be expected.
344+
*
345+
* Fullscreen takeover dialogs do not support a close button, and are not dismissible.
293346
*/
294347
export const FullscreenTakeover = DialogFullscreenTakeover.bind({});
295348
FullscreenTakeover.storyName = "Fullscreen takeover";
296349
FullscreenTakeover.parameters = {
297350
chromatic: { disableSnapshot: true },
351+
design: {
352+
type: "figma",
353+
url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399",
354+
}
298355
};
299356
FullscreenTakeover.args = {
300357
...Default.args,

‎components/dialog/stories/template.js

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/templ
22
import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
33
import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
44
import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
5-
import { getRandomId } from "@spectrum-css/preview/decorators";
6-
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
5+
import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
76
import { html } from "lit";
87
import { classMap } from "lit/directives/class-map.js";
98
import { ifDefined } from "lit/directives/if-defined.js";
@@ -19,7 +18,7 @@ export const Template = ({
1918
showModal = false,
2019
hasFooter = false,
2120
heading,
22-
header,
21+
header = [],
2322
hasCheckbox = false,
2423
content = [],
2524
footer = [],
@@ -66,18 +65,15 @@ export const Template = ({
6665
<h1 class="${rootClass}-heading">${heading}</h1>
6766
`)}
6867
${when(header, () => html`
69-
<span class="${rootClass}-header-content">
70-
${Typography({
71-
semantics: "body",
72-
size: "m",
73-
// @todo: takeover dialogs can accept other components in their headers. could the renderContent function work here?
74-
content: [ header ]
75-
}, context)}
76-
</span>
68+
<div class="${rootClass}-headerContentWrapper">
69+
<div class="${rootClass}-headerContent">
70+
${renderContent(header)}
71+
</div>
72+
</div>
7773
`,
7874
)}
7975
</div>
80-
<section class="${rootClass}-content">${content.map((c) => (typeof c === "function" ? c({}) : c))}</section>
76+
<section class="${rootClass}-content">${renderContent(content)}</section>
8177
${when(isDismissible, () =>
8278
CloseButton({
8379
customClasses: [`${rootClass}-closeButton`],
@@ -108,18 +104,14 @@ export const Template = ({
108104
${when(hasFooter, () => html`
109105
<footer class="${rootClass}-footer">
110106
${when(typeof footer !== "undefined", () => html`
111-
<div class="${rootClass}-footer-content">
107+
<div class="${rootClass}-footerContent">
112108
${when(hasCheckbox, () => html`
113109
${Checkbox({
114110
label: footer,
115111
}, context)}
116112
`,
117113
() =>
118-
Typography({
119-
semantics: "body",
120-
size: "m",
121-
content: [ footer ]
122-
}, context)
114+
renderContent(footer)
123115
)}
124116
</div>
125117
<div class="${rootClass}-buttonGroup">

0 commit comments

Comments
 (0)