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.

.changeset/few-doors-smile.md

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

.changeset/loud-vans-brush.md

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

.changeset/metal-fireants-switch.md

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

components/buttongroup/index.css

@@ -30,7 +30,7 @@
 .spectrum-ButtonGroup {
 	display: var(--spectrum-buttongroup-display);
 	flex-direction: var(--spectrum-buttongroup-flex-direction);
-	flex-wrap: wrap;
+	flex-wrap: var(--mod-buttongroup-flex-wrap, wrap);
 
 	gap: var(--spectrum-buttongroup-spacing);
 	justify-content: var(--spectrum-buttongroup-justify-content);

components/buttongroup/metadata/metadata.json

@@ -7,6 +7,7 @@
     ".spectrum-ButtonGroup-item"
   ],
   "modifiers": [
+    "--mod-buttongroup-flex-wrap",
     "--mod-buttongroup-justify-content",
     "--mod-buttongroup-spacing"
   ],

components/buttongroup/metadata/mods.md

@@ -1,4 +1,5 @@
 | Modifiable custom properties        |
 | ----------------------------------- |
+| `--mod-buttongroup-flex-wrap`       |
 | `--mod-buttongroup-justify-content` |
 | `--mod-buttongroup-spacing`         |

components/dialog/metadata/metadata.json

@@ -2,100 +2,124 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Dialog",
-    ".spectrum-Dialog .spectrum-Dialog-divider",
-    ".spectrum-Dialog .spectrum-Dialog-grid",
     ".spectrum-Dialog .spectrum-Dialog-header",
+    ".spectrum-Dialog--dismissible .spectrum-Dialog-grid",
+    ".spectrum-Dialog--dismissible .spectrum-Dialog-grid .spectrum-Dialog-footer",
     ".spectrum-Dialog--fullscreen",
     ".spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup",
+    ".spectrum-Dialog--fullscreen .spectrum-Dialog-closeButton",
     ".spectrum-Dialog--fullscreen .spectrum-Dialog-content",
     ".spectrum-Dialog--fullscreen .spectrum-Dialog-footer",
+    ".spectrum-Dialog--fullscreen .spectrum-Dialog-grid",
+    ".spectrum-Dialog--fullscreen .spectrum-Dialog-header",
     ".spectrum-Dialog--fullscreen .spectrum-Dialog-heading",
-    ".spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider",
     ".spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid",
     ".spectrum-Dialog--fullscreenTakeover",
     ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup",
+    ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-closeButton",
     ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-content",
     ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer",
+    ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid",
+    ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header",
     ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading",
     ".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid",
-    ".spectrum-Dialog--noDivider .spectrum-Dialog-divider",
-    ".spectrum-Dialog--noDivider .spectrum-Dialog-heading",
     ".spectrum-Dialog--sizeL",
     ".spectrum-Dialog--sizeS",
     ".spectrum-Dialog-buttonGroup",
-    ".spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter",
+    ".spectrum-Dialog-buttonGroup--noFooter",
     ".spectrum-Dialog-closeButton",
     ".spectrum-Dialog-content",
     ".spectrum-Dialog-footer",
-    ".spectrum-Dialog-footer > *",
-    ".spectrum-Dialog-footer > .spectrum-Button + .spectrum-Button",
+    ".spectrum-Dialog-footer .spectrum-Dialog-footer-content",
+    ".spectrum-Dialog-footer:has(.spectrum-Dialog-buttonGroup)",
+    ".spectrum-Dialog-footer:has(.spectrum-Dialog-footer-content)",
+    ".spectrum-Dialog-grid",
     ".spectrum-Dialog-header",
+    ".spectrum-Dialog-header > .spectrum-Dialog-header-content",
     ".spectrum-Dialog-heading",
-    ".spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader",
-    ".spectrum-Dialog-hero",
-    ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid",
-    ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup",
-    ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer"
+    ".spectrum-Dialog-hero"
   ],
   "modifiers": [
-    "--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"
-  ],
-  "component": [
-    "--spectrum-dialog-confirm-border-radius",
-    "--spectrum-dialog-confirm-buttongroup-padding-top",
-    "--spectrum-dialog-confirm-close-button-padding",
-    "--spectrum-dialog-confirm-close-button-size",
-    "--spectrum-dialog-confirm-description-padding",
-    "--spectrum-dialog-confirm-description-text-color",
-    "--spectrum-dialog-confirm-description-text-size",
-    "--spectrum-dialog-confirm-divider-block-spacing-end",
-    "--spectrum-dialog-confirm-divider-block-spacing-start",
-    "--spectrum-dialog-confirm-gap-size",
-    "--spectrum-dialog-confirm-hero-height",
-    "--spectrum-dialog-confirm-padding-grid",
-    "--spectrum-dialog-confirm-title-text-size"
+    "--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"
   ],
+  "component": [],
   "global": [
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-height-100",
-    "--spectrum-component-pill-edge-to-text-100",
-    "--spectrum-gray-800",
-    "--spectrum-gray-900",
-    "--spectrum-heading-sans-serif-font-weight",
-    "--spectrum-line-height-100",
-    "--spectrum-regular-font-weight",
+    "--spectrum-background-layer-2-color",
+    "--spectrum-black-rgb",
+    "--spectrum-body-color",
+    "--spectrum-body-sans-serif-font-style",
+    "--spectrum-body-sans-serif-font-weight",
+    "--spectrum-corner-radius-extra-large-default",
+    "--spectrum-heading-color",
+    "--spectrum-line-height-200",
+    "--spectrum-overlay-opacity",
+    "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-200",
     "--spectrum-spacing-300",
-    "--spectrum-spacing-50",
-    "--spectrum-spacing-600"
+    "--spectrum-spacing-400",
+    "--spectrum-spacing-500",
+    "--spectrum-standard-dialog-background-color",
+    "--spectrum-standard-dialog-body-font-size",
+    "--spectrum-standard-dialog-border-radius",
+    "--spectrum-standard-dialog-description-font-family",
+    "--spectrum-standard-dialog-description-font-size",
+    "--spectrum-standard-dialog-description-font-style",
+    "--spectrum-standard-dialog-description-font-weight",
+    "--spectrum-standard-dialog-description-line-height",
+    "--spectrum-standard-dialog-description-text-color",
+    "--spectrum-standard-dialog-header-content-font-size",
+    "--spectrum-standard-dialog-heading-font-family",
+    "--spectrum-standard-dialog-heading-font-size",
+    "--spectrum-standard-dialog-heading-font-style",
+    "--spectrum-standard-dialog-heading-font-weight",
+    "--spectrum-standard-dialog-heading-line-height",
+    "--spectrum-standard-dialog-heading-text-color",
+    "--spectrum-standard-dialog-hero-block-size",
+    "--spectrum-standard-dialog-max-width",
+    "--spectrum-standard-dialog-maximum-width-large",
+    "--spectrum-standard-dialog-maximum-width-medium",
+    "--spectrum-standard-dialog-maximum-width-small",
+    "--spectrum-standard-dialog-min-inline-size",
+    "--spectrum-standard-dialog-minimum-width",
+    "--spectrum-standard-dialog-padding",
+    "--spectrum-standard-dialog-spacing-description-to-footer",
+    "--spectrum-standard-dialog-spacing-edge-to-close-button",
+    "--spectrum-standard-dialog-spacing-edge-to-content",
+    "--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end",
+    "--spectrum-standard-dialog-spacing-footer-to-button-group",
+    "--spectrum-standard-dialog-spacing-grid-padding",
+    "--spectrum-standard-dialog-spacing-title-to-description",
+    "--spectrum-standard-dialog-spacing-title-to-header-content",
+    "--spectrum-standard-dialog-title-font-size",
+    "--spectrum-title-line-height",
+    "--spectrum-title-sans-serif-font-style",
+    "--spectrum-title-sans-serif-font-weight"
   ],
   "system-theme": [],
-  "passthroughs": [],
-  "high-contrast": []
+  "passthroughs": [
+    "--mod-buttongroup-flex-wrap",
+    "--mod-buttongroup-justify-content"
+  ],
+  "high-contrast": ["--highcontrast-standard-dialog-border-color"]
 }

components/dialog/metadata/mods.md

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

components/dialog/package.json

@@ -37,15 +37,22 @@
 		"@spectrum-css/divider": ">=4.0.0-s2-foundations.0",
 		"@spectrum-css/modal": ">=6.0.0-s2-foundations.0",
 		"@spectrum-css/tokens": ">=14.0.0-next.3",
+		"@spectrum-css/typography": ">=7.0.0-s2-foundations.0",
 		"@spectrum-css/underlay": ">=5.0.0-s2-foundations.0"
 	},
 	"peerDependenciesMeta": {
-		"@spectrum-css/divider": {
+		"@spectrum-css/checkbox": {
+			"optional": true
+		},
+		"@spectrum-css/closebutton": {
 			"optional": true
 		},
 		"@spectrum-css/modal": {
 			"optional": true
 		},
+		"@spectrum-css/typography": {
+			"optional": true
+		},
 		"@spectrum-css/underlay": {
 			"optional": true
 		}