-
Notifications
You must be signed in to change notification settings - Fork 195
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
- Loading branch information
1 parent
1aaab21
commit e767496
Showing
23 changed files
with
697 additions
and
434 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@spectrum-css/buttongroup": patch | ||
| --- | ||
|
|
||
| Adds a new `--mod-buttongroup-flex-wrap` custom property to leverage if a user wishes to customize the `flex-wrap` property. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@spectrum-css/tokens": patch | ||
| --- | ||
|
|
||
| Adds `--spectrum-standard-dialog-spacing-edge-to-content` to properly adjust the spacing for desktop/mobile dialog styles. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| --- | ||
| "@spectrum-css/dialog": major | ||
| "@spectrum-css/modal": patch | ||
| "@spectrum-css/underlay": patch | ||
| --- | ||
|
|
||
| Spectrum 2 Standard Dialog Migration | ||
|
|
||
| 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. | ||
|
|
||
| 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`. | ||
|
|
||
| Mod properties are either "new," have been renamed to reflect the respective dialog language, or were removed: | ||
|
|
||
| _New Mods_ | ||
| `--mod-standard-dialog-spacing-title-to-header-content` | ||
| `--mod-standard-dialog-spacing-title-to-description` | ||
| `--mod-standard-dialog-header-content-font-size` | ||
|
|
||
| _Renamed Mods_ | ||
| `--mod-dialog-confirm-small-width` > `--mod-standard-dialog-max-width-small` | ||
| `--mod-dialog-confirm-medium-width` > `--mod-standard-dialog-max-width` | ||
| `--mod-dialog-confirm-large-width` > `--mod-standard-dialog-max-width-large` | ||
| `--mod-dialog-confirm-border-radius` > `--mod-standard-dialog-border-radius` | ||
| `--mod-dialog-confirm-description-text-size` > `--mod-standard-dialog-description-font-size` | ||
| `--mod-dialog-confirm-description-text-line-height` > `--mod-standard-dialog-description-line-height` | ||
| `--mod-dialog-confirm-description-text-color` > `--mod-standard-dialog-description-text-color` | ||
| `--mod-dialog-confirm-description-font-weight` > `--mod-standard-dialog-description-font-weight` | ||
| `--mod-dialog-heading-font-weight` > `--mod-standard-dialog-heading-font-weight` | ||
| `--mod-dialog-confirm-title-text-line-height` > `--mod-standard-dialog-heading-line-height` | ||
| `--mod-dialog-confirm-title-text-color` > `--mod-standard-dialog-heading-text-color` | ||
| `--mod-dialog-confirm-title-text-size` > `--mod-standard-dialog-heading-font-size` | ||
| `--mod-dialog-confirm-hero-height` > `--mod-standard-dialog-hero-block-size` | ||
| `--mod-dialog-min-inline-size` > `--mod-standard-dialog-min-inline-size` | ||
| `--mod-dialog-confirm-padding-grid` > `--mod-standard-dialog-spacing-grid-padding` | ||
| `--mod-dialog-confirm-footer-padding-top` > `--mod-standard-dialog-spacing-description-to-footer` | ||
| `--mod-dialog-confirm-close-button-padding` > `--mod-standard-dialog-spacing-edge-to-close-button` | ||
| `--mod-dialog-confirm-gap-size` > `--mod-standard-dialog-spacing-footer-to-button-group` | ||
|
|
||
| _Removed Mods_ | ||
| `--mod-dialog-confirm-buttongroup-padding-top` | ||
| `--mod-dialog-confirm-close-button-size` | ||
| `--mod-dialog-confirm-description-margin` | ||
| `--mod-dialog-confirm-description-padding` | ||
| `--mod-dialog-confirm-divider-block-spacing-end` | ||
| `--mod-dialog-confirm-divider-block-spacing-start` | ||
| `--mod-dialog-confirm-divider-height` | ||
|
|
||
| Modal and underlay updates | ||
|
|
||
| - Modal component now uses the updated corner rounding. | ||
| - Underlay has an updated comment that addresses the overlay-color/overlay-opacity tokens. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| | Modifiable custom properties | | ||
| | ----------------------------------- | | ||
| | `--mod-buttongroup-flex-wrap` | | ||
| | `--mod-buttongroup-justify-content` | | ||
| | `--mod-buttongroup-spacing` | |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,24 @@ | ||
| | Modifiable custom properties | | ||
| | --------------------------------------------------- | | ||
| | `--mod-dialog-confirm-border-radius` | | ||
| | `--mod-dialog-confirm-buttongroup-padding-top` | | ||
| | `--mod-dialog-confirm-close-button-padding` | | ||
| | `--mod-dialog-confirm-close-button-size` | | ||
| | `--mod-dialog-confirm-description-font-weight` | | ||
| | `--mod-dialog-confirm-description-margin` | | ||
| | `--mod-dialog-confirm-description-padding` | | ||
| | `--mod-dialog-confirm-description-text-color` | | ||
| | `--mod-dialog-confirm-description-text-line-height` | | ||
| | `--mod-dialog-confirm-description-text-size` | | ||
| | `--mod-dialog-confirm-divider-block-spacing-end` | | ||
| | `--mod-dialog-confirm-divider-block-spacing-start` | | ||
| | `--mod-dialog-confirm-divider-height` | | ||
| | `--mod-dialog-confirm-footer-padding-top` | | ||
| | `--mod-dialog-confirm-gap-size` | | ||
| | `--mod-dialog-confirm-hero-height` | | ||
| | `--mod-dialog-confirm-large-width` | | ||
| | `--mod-dialog-confirm-medium-width` | | ||
| | `--mod-dialog-confirm-padding-grid` | | ||
| | `--mod-dialog-confirm-small-width` | | ||
| | `--mod-dialog-confirm-title-text-color` | | ||
| | `--mod-dialog-confirm-title-text-line-height` | | ||
| | `--mod-dialog-confirm-title-text-size` | | ||
| | `--mod-dialog-fullscreen-header-text-size` | | ||
| | `--mod-dialog-heading-font-weight` | | ||
| | `--mod-dialog-min-inline-size` | | ||
| | `--mod-dialog-width` | | ||
| | Modifiable custom properties | | ||
| | ------------------------------------------------------- | | ||
| | `--mod-standard-dialog-background-color` | | ||
| | `--mod-standard-dialog-border-radius` | | ||
| | `--mod-standard-dialog-description-font-size` | | ||
| | `--mod-standard-dialog-description-font-weight` | | ||
| | `--mod-standard-dialog-description-line-height` | | ||
| | `--mod-standard-dialog-description-text-color` | | ||
| | `--mod-standard-dialog-header-content-font-size` | | ||
| | `--mod-standard-dialog-heading-font-size` | | ||
| | `--mod-standard-dialog-heading-font-weight` | | ||
| | `--mod-standard-dialog-heading-line-height` | | ||
| | `--mod-standard-dialog-heading-text-color` | | ||
| | `--mod-standard-dialog-hero-block-size` | | ||
| | `--mod-standard-dialog-max-width` | | ||
| | `--mod-standard-dialog-max-width-large` | | ||
| | `--mod-standard-dialog-max-width-small` | | ||
| | `--mod-standard-dialog-min-inline-size` | | ||
| | `--mod-standard-dialog-spacing-description-to-footer` | | ||
| | `--mod-standard-dialog-spacing-edge-to-close-button` | | ||
| | `--mod-standard-dialog-spacing-footer-to-button-group` | | ||
| | `--mod-standard-dialog-spacing-grid-padding` | | ||
| | `--mod-standard-dialog-spacing-title-to-description` | | ||
| | `--mod-standard-dialog-spacing-title-to-header-content` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.