Skip to content

Commit 4f08fa7

Browse files
chore(dialog): create changeset
1 parent 02e88d7 commit 4f08fa7

File tree

1 file changed

+53
-0
lines changed

1 file changed

+53
-0
lines changed

.changeset/metal-fireants-switch.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
"@spectrum-css/dialog": major
3+
"@spectrum-css/underlay": patch
4+
"@spectrum-css/modal": minor
5+
---
6+
7+
Spectrum 2 Standard Dialog Migration
8+
9+
To separate itself from another component named "alert dialog," dialog was renamed to "standard dialog." The Divider component is no longer supported in S2 standard dialogs. The class names related to a standard dialog's size (i.e. `--small`, `--medium`, `--large`) have been refactored to reflect T-shirt sizing that other components also utilize. In addition, some new and updated tokens are in place to update the standard dialog corner rounding, font treatments, spacing/padding, and maximum/minimum widths. There were several missing elements of the standard dialog implemented, including optional header and footer content, hero/cover images, and supporting fullscreen layouts.
10+
11+
Modal now uses the updated corner rounding found in the standard dialog design specs. Underlay has an updated comment that addresses the overlay-color/overlay-opacity tokens.
12+
13+
Mod properties are either "new," have been renamed to reflect the "standard dialog" language, or were removed:
14+
15+
_New Mods_
16+
`--mod-standard-dialog-heading-font-size`
17+
`--mod-standard-dialog-max-width`
18+
`--mod-standard-dialog-max-width-large`
19+
`--mod-standard-dialog-max-width-small`
20+
`--mod-standard-dialog-spacing-description-to-footer`
21+
`--mod-standard-dialog-spacing-edge-to-close-button`
22+
`--mod-standard-dialog-spacing-title-to-header-content`
23+
`--mod-standard-dialog-spacing-footer-to-button-group`
24+
25+
_Renamed Mods_
26+
`--mod-dialog-confirm-border-radius` > `--mod-standard-dialog-border-radius`
27+
`--mod-dialog-confirm-description-text-size` > `--mod-standard-dialog-description-font-size`
28+
`--mod-dialog-confirm-description-text-line-height` > `--mod-standard-dialog-description-line-height`
29+
`--mod-dialog-confirm-description-text-color` > `--mod-standard-dialog-description-text-color`
30+
`--mod-dialog-confirm-description-font-weight` > `--mod-standard-dialog-description-font-weight`
31+
`--mod-dialog-heading-font-weight` > `--mod-standard-dialog-heading-font-weight`
32+
`--mod-dialog-confirm-title-text-line-height` > `--mod-standard-dialog-heading-line-height`
33+
`--mod-dialog-confirm-title-text-color` > `--mod-standard-dialog-heading-text-color`
34+
`--mod-dialog-confirm-hero-height` > `--mod-standard-dialog-min-hero-block-size`
35+
`--mod-dialog-min-inline-size` > `--mod-standard-dialog-min-inline-size`
36+
`--mod-dialog-confirm-padding-grid` > `--mod-standard-dialog-spacing-grid-padding`
37+
38+
_Removed Mods_
39+
`--mod-dialog-confirm-buttongroup-padding-top`
40+
`--mod-dialog-confirm-close-button-padding`
41+
`--mod-dialog-confirm-close-button-size`
42+
`--mod-dialog-confirm-description-margin`
43+
`--mod-dialog-confirm-description-padding`
44+
`--mod-dialog-confirm-divider-block-spacing-end`
45+
`--mod-dialog-confirm-divider-block-spacing-start`
46+
`--mod-dialog-confirm-divider-height`
47+
`--mod-dialog-confirm-footer-padding-top`
48+
`--mod-dialog-confirm-gap-size`
49+
`--mod-dialog-confirm-large-width`
50+
`--mod-dialog-confirm-medium-width`
51+
`--mod-dialog-confirm-small-width`
52+
`--mod-dialog-confirm-title-text-size`
53+
`--mod-dialog-fullscreen-header-text-size`

0 commit comments

Comments
 (0)