Skip to content

Commit c297d1c

Browse files
marissahuysentruytmarissahuysentruyt
authored
feat(dialog): S2 takeover dialog migration (#3347)
* feat(dialog): adds new takeover dialog styles - new tokens and takeover dialog styles were implemented in index.css - rebuild tokens/metadata * 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 * chore(dialog): clean up dialog tests - adds hasHeroImage arg - adds background and margin customStyles for fullscreen dialog in Chromatic only (so we can see the rounded corners better) fix(modal): update modal with takeover dialog styles - builds metadata - adds tokens for modal that complement new takeover dialog styles/tokens chore(dialog,modal): create changeset
1 parent a2be4d1 commit c297d1c

File tree

14 files changed

+211
-81
lines changed

14 files changed

+211
-81
lines changed

‎.changeset/modern-chairs-sit.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
"@spectrum-css/dialog": major
3+
"@spectrum-css/modal": minor
4+
---
5+
6+
S2 Takeover dialog
7+
8+
This is the migration for the fullscreen/fullscreenTakeover dialog stories (these stories correspond to the "takeover dialog" in Figma). The Divider component support was removed in S2 standard dialog migration ([#2860](https://github.com/adobe/spectrum-css/pull/2860)). New and updated tokens are in place to update fullscreen/fullscreenTakeover dialog sizing, grid spacing, spacing in the header, and font sizes. Fullscreen/fullscreenTakeover dialogs do not support additional footer content or checkboxes (in comparison to the standard dialog).
9+
10+
Takeover dialogs also support replacing text in the header and body areas with other components. This required an additional `.spectrum-Dialog-headerContentWrapper` element that should center whatever component/content within.
11+
12+
Class names updated to match naming convention (remove hyphens and capitalize second word):
13+
`.spectrum-Dialog-header-content` > `.spectrum-Dialog-headerContent`
14+
`.spectrum-Dialog-footer-content` > `.spectrum-Dialog-footerContent`
15+
16+
_New Mods_
17+
`--mod-takeover-dialog-grid-spacing`
18+
`--mod-takeover-dialog-spacing-header-content-gap`
19+
`--mod-takeover-dialog-title-font-size`
20+
21+
Modal updates
22+
23+
- Modal component now uses the updated margin token (`window-to-edge`) found in the takeover dialog design specs. This work also introduced `--spectrum-modal-takeover-window-to-edge`

‎components/dialog/dist/metadata.json‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
".spectrum-Dialog--fullscreen .spectrum-Dialog-footer",
1313
".spectrum-Dialog--fullscreen .spectrum-Dialog-grid",
1414
".spectrum-Dialog--fullscreen .spectrum-Dialog-header",
15+
".spectrum-Dialog--fullscreen .spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper",
1516
".spectrum-Dialog--fullscreen .spectrum-Dialog-heading",
1617
".spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid",
1718
".spectrum-Dialog--fullscreenTakeover",
@@ -21,6 +22,7 @@
2122
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer",
2223
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid",
2324
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header",
25+
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper",
2426
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading",
2527
".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid",
2628
".spectrum-Dialog--sizeL",
@@ -30,12 +32,12 @@
3032
".spectrum-Dialog-closeButton",
3133
".spectrum-Dialog-content",
3234
".spectrum-Dialog-footer",
33-
".spectrum-Dialog-footer .spectrum-Dialog-footer-content",
35+
".spectrum-Dialog-footer .spectrum-Dialog-footerContent",
3436
".spectrum-Dialog-footer:has(.spectrum-Dialog-buttonGroup)",
35-
".spectrum-Dialog-footer:has(.spectrum-Dialog-footer-content)",
37+
".spectrum-Dialog-footer:has(.spectrum-Dialog-footerContent)",
3638
".spectrum-Dialog-grid",
3739
".spectrum-Dialog-header",
38-
".spectrum-Dialog-header > .spectrum-Dialog-header-content",
40+
".spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper",
3941
".spectrum-Dialog-heading",
4042
".spectrum-Dialog-hero"
4143
],
@@ -61,7 +63,10 @@
6163
"--mod-standard-dialog-spacing-footer-to-button-group",
6264
"--mod-standard-dialog-spacing-grid-padding",
6365
"--mod-standard-dialog-spacing-title-to-description",
64-
"--mod-standard-dialog-spacing-title-to-header-content"
66+
"--mod-standard-dialog-spacing-title-to-header-content",
67+
"--mod-takeover-dialog-grid-spacing",
68+
"--mod-takeover-dialog-spacing-header-content-gap",
69+
"--mod-takeover-dialog-title-font-size"
6570
],
6671
"component": [],
6772
"global": [
@@ -112,9 +117,21 @@
112117
"--spectrum-standard-dialog-spacing-title-to-description",
113118
"--spectrum-standard-dialog-spacing-title-to-header-content",
114119
"--spectrum-standard-dialog-title-font-size",
120+
"--spectrum-takeover-dialog-block-size",
121+
"--spectrum-takeover-dialog-grid-spacing",
122+
"--spectrum-takeover-dialog-height",
123+
"--spectrum-takeover-dialog-inline-size",
124+
"--spectrum-takeover-dialog-spacing-grid-padding",
125+
"--spectrum-takeover-dialog-spacing-header-content-gap",
126+
"--spectrum-takeover-dialog-spacing-header-gap",
127+
"--spectrum-takeover-dialog-spacing-title-to-body",
128+
"--spectrum-takeover-dialog-spacing-title-to-content",
129+
"--spectrum-takeover-dialog-title-font-size",
130+
"--spectrum-takeover-dialog-width",
115131
"--spectrum-title-line-height",
116132
"--spectrum-title-sans-serif-font-style",
117-
"--spectrum-title-sans-serif-font-weight"
133+
"--spectrum-title-sans-serif-font-weight",
134+
"--spectrum-title-size-xxl"
118135
],
119136
"passthroughs": [
120137
"--mod-buttongroup-flex-wrap",

‎components/dialog/index.css‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,14 @@
5353
/* Passthrough for nested component(s) */
5454
--mod-buttongroup-justify-content: flex-end;
5555
--mod-buttongroup-flex-wrap: nowrap;
56+
57+
/* Fullscreen/fullscreenTakeover */
58+
--spectrum-takeover-dialog-title-font-size: var(--spectrum-title-size-xxl);
59+
--spectrum-takeover-dialog-grid-spacing: var(--spectrum-takeover-dialog-spacing-grid-padding);
60+
--spectrum-takeover-dialog-spacing-header-content-gap: var(--spectrum-takeover-dialog-spacing-header-gap);
61+
--spectrum-takeover-dialog-spacing-title-to-content: var(--spectrum-takeover-dialog-spacing-title-to-body);
62+
--spectrum-takeover-dialog-inline-size: var(--spectrum-takeover-dialog-width);
63+
--spectrum-takeover-dialog-block-size: var(--spectrum-takeover-dialog-height);
5664
}
5765

5866
.spectrum-Dialog {
@@ -151,7 +159,7 @@
151159
outline: none; /* Hide focus outline around header */
152160

153161
/* additional header content should grow/shrink with the text, but only until it takes up half of the header */
154-
> .spectrum-Dialog-header-content {
162+
> .spectrum-Dialog-headerContentWrapper {
155163
max-inline-size: fit-content;
156164
flex: 1 1 100%;
157165
font-size: var(--mod-standard-dialog-header-content-font-size, var(--spectrum-standard-dialog-header-content-font-size));
@@ -188,12 +196,12 @@
188196

189197
outline: none; /* Hide focus outline */
190198

191-
.spectrum-Dialog-footer-content {
199+
.spectrum-Dialog-footerContent {
192200
/* this attempts to give as much space as possible for the button group, particularly to avoid stacking on mobile. Some sizes still may have to stack. */
193201
flex: 1 1 100%;
194202
}
195203

196-
&:has(.spectrum-Dialog-footer-content),
204+
&:has(.spectrum-Dialog-footerContent),
197205
&:has(.spectrum-Dialog-buttonGroup) {
198206
justify-content: space-between;
199207
}
@@ -248,13 +256,13 @@
248256
}
249257

250258
.spectrum-Dialog--fullscreen {
251-
inline-size: 100%;
252-
block-size: 100%;
259+
inline-size: var(--spectrum-takeover-dialog-inline-size);
260+
block-size: var(--spectrum-takeover-dialog-block-size);
253261
}
254262

255263
.spectrum-Dialog--fullscreenTakeover {
256-
inline-size: 100%;
257-
block-size: 100%;
264+
inline-size: var(--spectrum-takeover-dialog-inline-size);
265+
block-size: var(--spectrum-takeover-dialog-block-size);
258266
border-radius: 0;
259267
}
260268

@@ -266,16 +274,16 @@
266274
.spectrum-Dialog-grid {
267275
display: grid;
268276
grid-template-columns:
269-
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
277+
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing))
270278
1fr
271279
auto
272280
auto
273-
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
281+
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing));
274282
grid-template-rows:
275-
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
283+
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing))
276284
auto
277285
1fr
278-
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
286+
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing));
279287
grid-template-areas:
280288
". . . . ."
281289
". heading header buttonGroup ."
@@ -285,6 +293,20 @@
285293

286294
.spectrum-Dialog-header {
287295
grid-area: heading;
296+
gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
297+
margin-inline-end: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
298+
margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-content);
299+
300+
/* components in fullscreen/fullscreenTakeover dialogs are centered in the headerContentWrapper */
301+
> .spectrum-Dialog-headerContentWrapper {
302+
max-inline-size: unset;
303+
display: inline-flex;
304+
justify-content: center;
305+
}
306+
}
307+
308+
.spectrum-Dialog-heading {
309+
font-size: var(--mod-takeover-dialog-title-font-size, var(--spectrum-takeover-dialog-title-font-size));
288310
}
289311

290312
.spectrum-Dialog-closeButton {

‎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/dialog.test.js‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -42,41 +42,34 @@ export const DialogGroup = Variants({
4242
},
4343
{
4444
testHeading: "With hero/cover image",
45+
hasHeroImage: true,
4546
heroImageUrl: "example-card-portrait.png",
4647
},
4748
{
4849
testHeading: "With hero/cover image, dismissible",
50+
hasHeroImage: true,
4951
heroImageUrl: "example-card-portrait.png",
5052
isDismissible: true,
5153
hasFooter: false,
5254
},
53-
{
54-
testHeading: "No divider",
55-
hasDivider: false,
56-
},
57-
{
58-
testHeading: "No divider, dismissible",
59-
hasDivider: false,
60-
isDismissible: true,
61-
hasFooter: false,
62-
},
63-
{
64-
testHeading: "With hero/cover image, no divider",
65-
hasDivider: false,
66-
heroImageUrl: "example-card-portrait.png",
67-
},
68-
{
69-
testHeading: "With hero/cover image, no divider, dismissible",
70-
hasDivider: false,
71-
isDismissible: true,
72-
hasFooter: false,
73-
heroImageUrl: "example-card-portrait.png",
74-
},
7555
],
7656
});
7757

7858
export const DialogFullscreen = Variants({
79-
Template,
59+
Template: (args, context) => {
60+
const { parameters: { showTestingGrid = false } = {} } = context;
61+
62+
return Template({
63+
...args,
64+
/*
65+
* Custom styles were added to make sure the VRTs catch the rounded corners
66+
*/
67+
customStyles: {
68+
margin: showTestingGrid ? "16px" : undefined,
69+
"background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined,
70+
},
71+
}, context);
72+
},
8073
withSizes: false,
8174
wrapperStyles: {
8275
"background-color": "var(--spectrum-gray-50)"

0 commit comments

Comments
 (0)