|
| 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