Skip to content

Commit e767496

Browse files
marissahuysentruytcastastrophe
marissahuysentruyt
authored and
castastrophe
committed
feat(dialog): s2 standard dialog migration (#2860)
* feat(dialog)!: s2 standard dialog migration * docs(dialog): dialog controls/coverage - adds new features/behaviors such as the checkbox in the footer, wrapping for footer/header content, being able to have close button and button group, hasHeroImage - removes Divider support in dialog - adds is-hidden-story to replicate what is on main and remove most stories from the sidebar - adds some comments and TODOs giving context to this choice - removes layout from control table from default argTypes - removes hasFooter from control table for fullscreen/fullscreenTakeover argTypes - adds a comment to explain the custom argTypes changes for those stories - also adds a comment about multiple conditionals for argTypes * refactor(modal): use corner-radius-extra-large-default to match design specs * fix(underlay): update comment notes for spectrum-overlay-color - also comments out a duplicated custom property and adds a TODO comment * refactor(dialog): new css for S2 dialog - adds some opportunities for mod properties - fixes dismissible grid spacing between additional header content and close button - scope passthrough mods to spectrum-Dialog class - add flex-direction: column to footer (this should allow the footer content and button group to stack at small screens at smallest dialog sizes on the mobile scale.) * feat(dialog): rebuild mods - lots of mods are renamed to use "standard dialog" language * chore(dialog): create changeset * chore(dialog): update peer deps data - remove divider from peerDependencies and peerDependenciesMeta - adds closebutton, checkbox and typography to peerDependenciesMeta * chore: remove divider tests * chore(buttongroup): add flex-wrap mod property * chore(buttongroup): creates buttongroup changeset * chore(buttongroup,dialog): rebuild mods * fix(dialog): platform custom variables - calls for --spectrum-standard-dialog-spacing-edge-to-content * chore(tokens): create changeset for custom standard dialog token * chore(tray): fix spelling of isDismissible arg * fix(dialog,modal): custom styles for modal background color - because modal was originally setting the background color of dialogs, there was some 'antialiasing bleed through' behind the dialog. By adding customStyles to Modal, we can set --mod-modal-background-color to transparent and get rid of the hairline color (especially noticeable behind a hero image in a dialog) * docs(dialog): adds modal background color documentation * fix(dialog): use font-stack instead of font-family * docs(dialog): rebase fixes - override layout:centered parameter with layout:padded instead so the dialogs are visible on their canvases on the docs page.
1 parent 1aaab21 commit e767496

23 files changed

+697
-434
lines changed

‎.changeset/few-doors-smile.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/buttongroup": patch
3+
---
4+
5+
Adds a new `--mod-buttongroup-flex-wrap` custom property to leverage if a user wishes to customize the `flex-wrap` property.

‎.changeset/loud-vans-brush.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/tokens": patch
3+
---
4+
5+
Adds `--spectrum-standard-dialog-spacing-edge-to-content` to properly adjust the spacing for desktop/mobile dialog styles.

‎.changeset/metal-fireants-switch.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
"@spectrum-css/dialog": major
3+
"@spectrum-css/modal": patch
4+
"@spectrum-css/underlay": patch
5+
---
6+
7+
Spectrum 2 Standard Dialog Migration
8+
9+
This is the migration for standard dialog. The Divider component is no longer supported in S2 dialogs. In addition, some new and updated tokens are in place to update dialog corner rounding, font treatments, spacing/padding, and maximum/minimum widths. There were several new elements implemented as well, including optional header and footer content, hero/cover images, checkbox and text-only options in the footer content area.
10+
11+
The `.spectrum-Dialog--small`, `.spectrum-Dialog--medium`, and `.spectrum-Dialog--large` sizing classes were deprecated and removed from the CSS in favor of the t-shirt sizes. Additionally, the spelling of the `.spectrum-Dialog--dismissable` class was corrected to `.spectrum-Dialog--dismissible`.
12+
13+
Mod properties are either "new," have been renamed to reflect the respective dialog language, or were removed:
14+
15+
_New Mods_
16+
`--mod-standard-dialog-spacing-title-to-header-content`
17+
`--mod-standard-dialog-spacing-title-to-description`
18+
`--mod-standard-dialog-header-content-font-size`
19+
20+
_Renamed Mods_
21+
`--mod-dialog-confirm-small-width` > `--mod-standard-dialog-max-width-small`
22+
`--mod-dialog-confirm-medium-width` > `--mod-standard-dialog-max-width`
23+
`--mod-dialog-confirm-large-width` > `--mod-standard-dialog-max-width-large`
24+
`--mod-dialog-confirm-border-radius` > `--mod-standard-dialog-border-radius`
25+
`--mod-dialog-confirm-description-text-size` > `--mod-standard-dialog-description-font-size`
26+
`--mod-dialog-confirm-description-text-line-height` > `--mod-standard-dialog-description-line-height`
27+
`--mod-dialog-confirm-description-text-color` > `--mod-standard-dialog-description-text-color`
28+
`--mod-dialog-confirm-description-font-weight` > `--mod-standard-dialog-description-font-weight`
29+
`--mod-dialog-heading-font-weight` > `--mod-standard-dialog-heading-font-weight`
30+
`--mod-dialog-confirm-title-text-line-height` > `--mod-standard-dialog-heading-line-height`
31+
`--mod-dialog-confirm-title-text-color` > `--mod-standard-dialog-heading-text-color`
32+
`--mod-dialog-confirm-title-text-size` > `--mod-standard-dialog-heading-font-size`
33+
`--mod-dialog-confirm-hero-height` > `--mod-standard-dialog-hero-block-size`
34+
`--mod-dialog-min-inline-size` > `--mod-standard-dialog-min-inline-size`
35+
`--mod-dialog-confirm-padding-grid` > `--mod-standard-dialog-spacing-grid-padding`
36+
`--mod-dialog-confirm-footer-padding-top` > `--mod-standard-dialog-spacing-description-to-footer`
37+
`--mod-dialog-confirm-close-button-padding` > `--mod-standard-dialog-spacing-edge-to-close-button`
38+
`--mod-dialog-confirm-gap-size` > `--mod-standard-dialog-spacing-footer-to-button-group`
39+
40+
_Removed Mods_
41+
`--mod-dialog-confirm-buttongroup-padding-top`
42+
`--mod-dialog-confirm-close-button-size`
43+
`--mod-dialog-confirm-description-margin`
44+
`--mod-dialog-confirm-description-padding`
45+
`--mod-dialog-confirm-divider-block-spacing-end`
46+
`--mod-dialog-confirm-divider-block-spacing-start`
47+
`--mod-dialog-confirm-divider-height`
48+
49+
Modal and underlay updates
50+
51+
- Modal component now uses the updated corner rounding.
52+
- Underlay has an updated comment that addresses the overlay-color/overlay-opacity tokens.

‎components/buttongroup/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
.spectrum-ButtonGroup {
3131
display: var(--spectrum-buttongroup-display);
3232
flex-direction: var(--spectrum-buttongroup-flex-direction);
33-
flex-wrap: wrap;
33+
flex-wrap: var(--mod-buttongroup-flex-wrap, wrap);
3434

3535
gap: var(--spectrum-buttongroup-spacing);
3636
justify-content: var(--spectrum-buttongroup-justify-content);

‎components/buttongroup/metadata/metadata.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
".spectrum-ButtonGroup-item"
88
],
99
"modifiers": [
10+
"--mod-buttongroup-flex-wrap",
1011
"--mod-buttongroup-justify-content",
1112
"--mod-buttongroup-spacing"
1213
],

‎components/buttongroup/metadata/mods.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
| Modifiable custom properties |
22
| ----------------------------------- |
3+
| `--mod-buttongroup-flex-wrap` |
34
| `--mod-buttongroup-justify-content` |
45
| `--mod-buttongroup-spacing` |

‎components/dialog/index.css

Lines changed: 233 additions & 153 deletions
Large diffs are not rendered by default.

‎components/dialog/metadata/metadata.json

Lines changed: 91 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,100 +2,124 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-Dialog",
5-
".spectrum-Dialog .spectrum-Dialog-divider",
6-
".spectrum-Dialog .spectrum-Dialog-grid",
75
".spectrum-Dialog .spectrum-Dialog-header",
6+
".spectrum-Dialog--dismissible .spectrum-Dialog-grid",
7+
".spectrum-Dialog--dismissible .spectrum-Dialog-grid .spectrum-Dialog-footer",
88
".spectrum-Dialog--fullscreen",
99
".spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup",
10+
".spectrum-Dialog--fullscreen .spectrum-Dialog-closeButton",
1011
".spectrum-Dialog--fullscreen .spectrum-Dialog-content",
1112
".spectrum-Dialog--fullscreen .spectrum-Dialog-footer",
13+
".spectrum-Dialog--fullscreen .spectrum-Dialog-grid",
14+
".spectrum-Dialog--fullscreen .spectrum-Dialog-header",
1215
".spectrum-Dialog--fullscreen .spectrum-Dialog-heading",
13-
".spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider",
1416
".spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid",
1517
".spectrum-Dialog--fullscreenTakeover",
1618
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup",
19+
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-closeButton",
1720
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-content",
1821
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer",
22+
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid",
23+
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header",
1924
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading",
2025
".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid",
21-
".spectrum-Dialog--noDivider .spectrum-Dialog-divider",
22-
".spectrum-Dialog--noDivider .spectrum-Dialog-heading",
2326
".spectrum-Dialog--sizeL",
2427
".spectrum-Dialog--sizeS",
2528
".spectrum-Dialog-buttonGroup",
26-
".spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter",
29+
".spectrum-Dialog-buttonGroup--noFooter",
2730
".spectrum-Dialog-closeButton",
2831
".spectrum-Dialog-content",
2932
".spectrum-Dialog-footer",
30-
".spectrum-Dialog-footer > *",
31-
".spectrum-Dialog-footer > .spectrum-Button + .spectrum-Button",
33+
".spectrum-Dialog-footer .spectrum-Dialog-footer-content",
34+
".spectrum-Dialog-footer:has(.spectrum-Dialog-buttonGroup)",
35+
".spectrum-Dialog-footer:has(.spectrum-Dialog-footer-content)",
36+
".spectrum-Dialog-grid",
3237
".spectrum-Dialog-header",
38+
".spectrum-Dialog-header > .spectrum-Dialog-header-content",
3339
".spectrum-Dialog-heading",
34-
".spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader",
35-
".spectrum-Dialog-hero",
36-
".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid",
37-
".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup",
38-
".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer"
40+
".spectrum-Dialog-hero"
3941
],
4042
"modifiers": [
41-
"--mod-dialog-confirm-border-radius",
42-
"--mod-dialog-confirm-buttongroup-padding-top",
43-
"--mod-dialog-confirm-close-button-padding",
44-
"--mod-dialog-confirm-close-button-size",
45-
"--mod-dialog-confirm-description-font-weight",
46-
"--mod-dialog-confirm-description-margin",
47-
"--mod-dialog-confirm-description-padding",
48-
"--mod-dialog-confirm-description-text-color",
49-
"--mod-dialog-confirm-description-text-line-height",
50-
"--mod-dialog-confirm-description-text-size",
51-
"--mod-dialog-confirm-divider-block-spacing-end",
52-
"--mod-dialog-confirm-divider-block-spacing-start",
53-
"--mod-dialog-confirm-divider-height",
54-
"--mod-dialog-confirm-footer-padding-top",
55-
"--mod-dialog-confirm-gap-size",
56-
"--mod-dialog-confirm-hero-height",
57-
"--mod-dialog-confirm-large-width",
58-
"--mod-dialog-confirm-medium-width",
59-
"--mod-dialog-confirm-padding-grid",
60-
"--mod-dialog-confirm-small-width",
61-
"--mod-dialog-confirm-title-text-color",
62-
"--mod-dialog-confirm-title-text-line-height",
63-
"--mod-dialog-confirm-title-text-size",
64-
"--mod-dialog-fullscreen-header-text-size",
65-
"--mod-dialog-heading-font-weight",
66-
"--mod-dialog-min-inline-size",
67-
"--mod-dialog-width"
68-
],
69-
"component": [
70-
"--spectrum-dialog-confirm-border-radius",
71-
"--spectrum-dialog-confirm-buttongroup-padding-top",
72-
"--spectrum-dialog-confirm-close-button-padding",
73-
"--spectrum-dialog-confirm-close-button-size",
74-
"--spectrum-dialog-confirm-description-padding",
75-
"--spectrum-dialog-confirm-description-text-color",
76-
"--spectrum-dialog-confirm-description-text-size",
77-
"--spectrum-dialog-confirm-divider-block-spacing-end",
78-
"--spectrum-dialog-confirm-divider-block-spacing-start",
79-
"--spectrum-dialog-confirm-gap-size",
80-
"--spectrum-dialog-confirm-hero-height",
81-
"--spectrum-dialog-confirm-padding-grid",
82-
"--spectrum-dialog-confirm-title-text-size"
43+
"--mod-standard-dialog-background-color",
44+
"--mod-standard-dialog-border-radius",
45+
"--mod-standard-dialog-description-font-size",
46+
"--mod-standard-dialog-description-font-weight",
47+
"--mod-standard-dialog-description-line-height",
48+
"--mod-standard-dialog-description-text-color",
49+
"--mod-standard-dialog-header-content-font-size",
50+
"--mod-standard-dialog-heading-font-size",
51+
"--mod-standard-dialog-heading-font-weight",
52+
"--mod-standard-dialog-heading-line-height",
53+
"--mod-standard-dialog-heading-text-color",
54+
"--mod-standard-dialog-hero-block-size",
55+
"--mod-standard-dialog-max-width",
56+
"--mod-standard-dialog-max-width-large",
57+
"--mod-standard-dialog-max-width-small",
58+
"--mod-standard-dialog-min-inline-size",
59+
"--mod-standard-dialog-spacing-description-to-footer",
60+
"--mod-standard-dialog-spacing-edge-to-close-button",
61+
"--mod-standard-dialog-spacing-footer-to-button-group",
62+
"--mod-standard-dialog-spacing-grid-padding",
63+
"--mod-standard-dialog-spacing-title-to-description",
64+
"--mod-standard-dialog-spacing-title-to-header-content"
8365
],
66+
"component": [],
8467
"global": [
85-
"--spectrum-component-bottom-to-text-300",
86-
"--spectrum-component-height-100",
87-
"--spectrum-component-pill-edge-to-text-100",
88-
"--spectrum-gray-800",
89-
"--spectrum-gray-900",
90-
"--spectrum-heading-sans-serif-font-weight",
91-
"--spectrum-line-height-100",
92-
"--spectrum-regular-font-weight",
68+
"--spectrum-background-layer-2-color",
69+
"--spectrum-black-rgb",
70+
"--spectrum-body-color",
71+
"--spectrum-body-sans-serif-font-style",
72+
"--spectrum-body-sans-serif-font-weight",
73+
"--spectrum-corner-radius-extra-large-default",
74+
"--spectrum-heading-color",
75+
"--spectrum-line-height-200",
76+
"--spectrum-overlay-opacity",
77+
"--spectrum-sans-font-family-stack",
9378
"--spectrum-spacing-200",
9479
"--spectrum-spacing-300",
95-
"--spectrum-spacing-50",
96-
"--spectrum-spacing-600"
80+
"--spectrum-spacing-400",
81+
"--spectrum-spacing-500",
82+
"--spectrum-standard-dialog-background-color",
83+
"--spectrum-standard-dialog-body-font-size",
84+
"--spectrum-standard-dialog-border-radius",
85+
"--spectrum-standard-dialog-description-font-family",
86+
"--spectrum-standard-dialog-description-font-size",
87+
"--spectrum-standard-dialog-description-font-style",
88+
"--spectrum-standard-dialog-description-font-weight",
89+
"--spectrum-standard-dialog-description-line-height",
90+
"--spectrum-standard-dialog-description-text-color",
91+
"--spectrum-standard-dialog-header-content-font-size",
92+
"--spectrum-standard-dialog-heading-font-family",
93+
"--spectrum-standard-dialog-heading-font-size",
94+
"--spectrum-standard-dialog-heading-font-style",
95+
"--spectrum-standard-dialog-heading-font-weight",
96+
"--spectrum-standard-dialog-heading-line-height",
97+
"--spectrum-standard-dialog-heading-text-color",
98+
"--spectrum-standard-dialog-hero-block-size",
99+
"--spectrum-standard-dialog-max-width",
100+
"--spectrum-standard-dialog-maximum-width-large",
101+
"--spectrum-standard-dialog-maximum-width-medium",
102+
"--spectrum-standard-dialog-maximum-width-small",
103+
"--spectrum-standard-dialog-min-inline-size",
104+
"--spectrum-standard-dialog-minimum-width",
105+
"--spectrum-standard-dialog-padding",
106+
"--spectrum-standard-dialog-spacing-description-to-footer",
107+
"--spectrum-standard-dialog-spacing-edge-to-close-button",
108+
"--spectrum-standard-dialog-spacing-edge-to-content",
109+
"--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end",
110+
"--spectrum-standard-dialog-spacing-footer-to-button-group",
111+
"--spectrum-standard-dialog-spacing-grid-padding",
112+
"--spectrum-standard-dialog-spacing-title-to-description",
113+
"--spectrum-standard-dialog-spacing-title-to-header-content",
114+
"--spectrum-standard-dialog-title-font-size",
115+
"--spectrum-title-line-height",
116+
"--spectrum-title-sans-serif-font-style",
117+
"--spectrum-title-sans-serif-font-weight"
97118
],
98119
"system-theme": [],
99-
"passthroughs": [],
100-
"high-contrast": []
120+
"passthroughs": [
121+
"--mod-buttongroup-flex-wrap",
122+
"--mod-buttongroup-justify-content"
123+
],
124+
"high-contrast": ["--highcontrast-standard-dialog-border-color"]
101125
}

‎components/dialog/metadata/mods.md

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
1-
| Modifiable custom properties |
2-
| --------------------------------------------------- |
3-
| `--mod-dialog-confirm-border-radius` |
4-
| `--mod-dialog-confirm-buttongroup-padding-top` |
5-
| `--mod-dialog-confirm-close-button-padding` |
6-
| `--mod-dialog-confirm-close-button-size` |
7-
| `--mod-dialog-confirm-description-font-weight` |
8-
| `--mod-dialog-confirm-description-margin` |
9-
| `--mod-dialog-confirm-description-padding` |
10-
| `--mod-dialog-confirm-description-text-color` |
11-
| `--mod-dialog-confirm-description-text-line-height` |
12-
| `--mod-dialog-confirm-description-text-size` |
13-
| `--mod-dialog-confirm-divider-block-spacing-end` |
14-
| `--mod-dialog-confirm-divider-block-spacing-start` |
15-
| `--mod-dialog-confirm-divider-height` |
16-
| `--mod-dialog-confirm-footer-padding-top` |
17-
| `--mod-dialog-confirm-gap-size` |
18-
| `--mod-dialog-confirm-hero-height` |
19-
| `--mod-dialog-confirm-large-width` |
20-
| `--mod-dialog-confirm-medium-width` |
21-
| `--mod-dialog-confirm-padding-grid` |
22-
| `--mod-dialog-confirm-small-width` |
23-
| `--mod-dialog-confirm-title-text-color` |
24-
| `--mod-dialog-confirm-title-text-line-height` |
25-
| `--mod-dialog-confirm-title-text-size` |
26-
| `--mod-dialog-fullscreen-header-text-size` |
27-
| `--mod-dialog-heading-font-weight` |
28-
| `--mod-dialog-min-inline-size` |
29-
| `--mod-dialog-width` |
1+
| Modifiable custom properties |
2+
| ------------------------------------------------------- |
3+
| `--mod-standard-dialog-background-color` |
4+
| `--mod-standard-dialog-border-radius` |
5+
| `--mod-standard-dialog-description-font-size` |
6+
| `--mod-standard-dialog-description-font-weight` |
7+
| `--mod-standard-dialog-description-line-height` |
8+
| `--mod-standard-dialog-description-text-color` |
9+
| `--mod-standard-dialog-header-content-font-size` |
10+
| `--mod-standard-dialog-heading-font-size` |
11+
| `--mod-standard-dialog-heading-font-weight` |
12+
| `--mod-standard-dialog-heading-line-height` |
13+
| `--mod-standard-dialog-heading-text-color` |
14+
| `--mod-standard-dialog-hero-block-size` |
15+
| `--mod-standard-dialog-max-width` |
16+
| `--mod-standard-dialog-max-width-large` |
17+
| `--mod-standard-dialog-max-width-small` |
18+
| `--mod-standard-dialog-min-inline-size` |
19+
| `--mod-standard-dialog-spacing-description-to-footer` |
20+
| `--mod-standard-dialog-spacing-edge-to-close-button` |
21+
| `--mod-standard-dialog-spacing-footer-to-button-group` |
22+
| `--mod-standard-dialog-spacing-grid-padding` |
23+
| `--mod-standard-dialog-spacing-title-to-description` |
24+
| `--mod-standard-dialog-spacing-title-to-header-content` |

‎components/dialog/package.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,26 @@
3131
"metadata/*"
3232
],
3333
"peerDependencies": {
34+
"@spectrum-css/checkbox": ">=9",
3435
"@spectrum-css/closebutton": ">=5",
35-
"@spectrum-css/divider": ">=3",
3636
"@spectrum-css/modal": ">=5",
3737
"@spectrum-css/tokens": ">=14.0.0-next.3",
38+
"@spectrum-css/typography": ">=6",
3839
"@spectrum-css/underlay": ">=3"
3940
},
4041
"peerDependenciesMeta": {
41-
"@spectrum-css/divider": {
42+
"@spectrum-css/checkbox": {
43+
"optional": true
44+
},
45+
"@spectrum-css/closebutton": {
4246
"optional": true
4347
},
4448
"@spectrum-css/modal": {
4549
"optional": true
4650
},
51+
"@spectrum-css/typography": {
52+
"optional": true
53+
},
4754
"@spectrum-css/underlay": {
4855
"optional": true
4956
}

0 commit comments

Comments
 (0)