feat(dialog): s2 takeover dialog migration #3347

marissahuysentruyt · 2024-10-29T14:08:37Z

Description

This implements the design updates and new tokens for the fullscreen and fullscreen takeover dialogs in S2. 🎉 The majority of the migration has been done in the default, standard dialog (from #2860). The effected stories are called Takeover Dialog in Figma. New tokens were utilized to match the design specs. Fullscreen and fullscreenTakeover dialogs do not support additional footer content, checkboxes, or hero images. They are also not dismissible.

Documentation has been updated with info on the takeover dialog variants and the divider story was removed since dividers are no longer supported in dialog components in S2.

Takeover dialogs in Figma support swapping out text for other components in the header content and body areas. The template for dialogs changed to reflect that, utilizing renderContent. Additionally, some class names were corrected to follow our typical naming convention (.spectrum-Dialog-header-content > .spectrum-Dialog-headerContent and
.spectrum-Dialog-footer-content > .spectrum-Dialog-footerContent).

New mod properties should reflect the "takeover dialog" language:

New Mods
--mod-takeover-dialog-grid-spacing
--mod-takeover-dialog-spacing-header-content-gap
--mod-takeover-dialog-title-font-size

New modal custom property
--spectrum-modal-takeover-window-to-edge

New aliased tokens were created for mobile value changes:
For .spectrum--large:
--spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-400);
--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-300);
--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-400);

For .spectrum--medium:
--spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-500);
--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-400);
--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-500);

Designs

S2 Takeover Dialog Token specs
S2 / Desktop Takeover dialog

Jira

This work was captured as "follow up" work in CSS-829
(The bulk of the dialog migration occurred in CSS-714)

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Additional validation

If running the branch locally, feel free to test the renderContent function for the header controls for the takeover dialogs. For instance, put a different component, like help text or breadcrumbs (don't be alarmed if breadcrumb icons do not render- this is a known bug).
Verify that new header component is centered in the .spectrum-Dialog-headerContentWrapper element.
If running the branch locally, feel free to test other components for the content controls for the takeover dialogs. For instance, import a different component, like swatch group, or form (don't be alarmed if form styles do not render- this is a known bug).
Verify that new content component renders in the .spectrum-Dialog-content element.
Revert any changes you make 😊

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-10-29T14:08:41Z

🦋 Changeset detected

Latest commit: 1c491ed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@spectrum-css/dialog	Major
@spectrum-css/modal	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-10-29T14:11:58Z

🚀 Deployed on https://pr-3347--spectrum-css.netlify.app

github-actions · 2024-10-29T14:18:20Z

File metrics

Summary

Total size: 2.23 MB^*
Total change (Δ): 🔴 ⬆ 3.84 KB (0.17%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
dialog	16.36 KB	🔴 ⬆ 1.37 KB
modal	4.51 KB	🔴 ⬆ 0.06 KB
tokens	241.49 KB	🔴 ⬆ 0.47 KB

Details

dialog

Filename	Head	Compared to base
index.css	16.36 KB	🔴 ⬆ 1.37 KB (9.10%)
metadata.json	6.58 KB	🔴 ⬆ 0.94 KB (16.24%)

modal

Filename	Head	Compared to base
index.css	4.51 KB	🔴 ⬆ 0.06 KB (1.25%)
metadata.json	1.81 KB	🔴 ⬆ 0.12 KB (6.81%)

tokens

Filename	Head	Compared to base
css/dark-vars.css	46.32 KB	-
css/global-vars.css	69.69 KB	-
css/index.css	241.49 KB	🔴 ⬆ 0.47 KB (0.19%)
css/large-vars.css	40.75 KB	🔴 ⬆ 0.24 KB (0.57%)
css/light-vars.css	46.29 KB	-
css/medium-vars.css	40.88 KB	🔴 ⬆ 0.24 KB (0.57%)
index.css	241.49 KB	🔴 ⬆ 0.47 KB (0.19%)

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

marissahuysentruyt · 2024-10-31T16:43:28Z

.changeset/modern-chairs-sit.md

+"@spectrum-css/dialog": major
+"@spectrum-css/modal": minor


Do we agree with these version bumps? Is it a concern that the dialog component will have undergone 2 major version bumps for S2? I think the changes would be considered breaking changes. And really, the only reason for a second major version is because we split the standard dialog work from this takeover dialog work. Any thoughts there?

Same for modal- is it a minor version bump?

@castastrophe any reservations with the version bumps here? I wasn't sure if 2 major bumps for dialog (we had a major version change for #2860, and I'm proposing a secondary major version bump) was an issue or weird or something.

components/dialog/stories/dialog.stories.js

aramos-adobe

The only feature I was looking for has been added! Great work @marissahuysentruyt

- new tokens and takeover dialog styles were implemented in index.css - rebuild tokens/metadata * docs(dialog): updates dialog template and stories - adds layout: "fullscreen" to render dialogs in their canvases, instead of off the canvas - uses getRandomId and renderContent functions to render header and footer contents - implements "slotted" components for the new takeover dialog feature - removes hasDivider since s2 dialogs don't support a divider - updates Figma links for fullscreen and fullscreenTakeover stories - updates some class names to better follow naming conventions * chore(dialog): clean up dialog tests - adds hasHeroImage arg - adds background and margin customStyles for fullscreen dialog in Chromatic only (so we can see the rounded corners better) fix(modal): update modal with takeover dialog styles - builds metadata - adds tokens for modal that complement new takeover dialog styles/tokens chore(dialog,modal): create changeset

5t3ph

🎉

* feat(dialog): adds new takeover dialog styles - new tokens and takeover dialog styles were implemented in index.css - rebuild tokens/metadata * docs(dialog): updates dialog template and stories - adds layout: "fullscreen" to render dialogs in their canvases, instead of off the canvas - uses getRandomId and renderContent functions to render header and footer contents - implements "slotted" components for the new takeover dialog feature - removes hasDivider since s2 dialogs don't support a divider - updates Figma links for fullscreen and fullscreenTakeover stories - updates some class names to better follow naming conventions * chore(dialog): clean up dialog tests - adds hasHeroImage arg - adds background and margin customStyles for fullscreen dialog in Chromatic only (so we can see the rounded corners better) fix(modal): update modal with takeover dialog styles - builds metadata - adds tokens for modal that complement new takeover dialog styles/tokens chore(dialog,modal): create changeset

marissahuysentruyt added the wip This is a work in progress, don't judge. label Oct 29, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from 37d987f to b86d610 Compare October 29, 2024 14:13

marissahuysentruyt added the do not merge A flag for a branch indicating it should not be merged. label Oct 29, 2024

marissahuysentruyt mentioned this pull request Oct 29, 2024

feat(dialog): s2 standard dialog migration #2860

Merged

44 tasks

marissahuysentruyt changed the base branch from spectrum-two to marissahuysentruyt/css-714-s2-dialog October 29, 2024 18:19

marissahuysentruyt added the skip_vrt Add to a PR to skip running VRT (but still pass the action) label Oct 30, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-dialog branch from 5c3c954 to 179f3f8 Compare October 30, 2024 21:41

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from b86d610 to 3b5b527 Compare October 31, 2024 16:36

marissahuysentruyt commented Oct 31, 2024

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from 3b5b527 to 4c4d044 Compare October 31, 2024 16:54

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-dialog branch from 88db1a4 to 4168200 Compare November 4, 2024 14:26

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch 3 times, most recently from 8b79f9a to f63164c Compare November 8, 2024 21:53

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from f63164c to bff05df Compare November 19, 2024 17:48

aramos-adobe reviewed Nov 19, 2024

View reviewed changes

components/dialog/stories/dialog.stories.js Show resolved Hide resolved

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-dialog branch from f1e6597 to 70de6c8 Compare November 21, 2024 21:38

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from bff05df to bec02e7 Compare December 2, 2024 19:34

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-dialog branch 2 times, most recently from b71d0c6 to acde6e5 Compare December 6, 2024 02:59

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from bec02e7 to bec4b1c Compare December 6, 2024 03:48

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-dialog branch from acde6e5 to 531a17b Compare December 6, 2024 15:04

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch 2 times, most recently from a4619d1 to 65d15e2 Compare December 9, 2024 22:02

Base automatically changed from marissahuysentruyt/css-714-s2-dialog to spectrum-two December 9, 2024 22:36

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch 2 times, most recently from 2bcf5a9 to e3f01b8 Compare December 10, 2024 16:51

marissahuysentruyt requested a review from 5t3ph January 16, 2025 17:30

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from ccc13e7 to 90a7253 Compare January 16, 2025 18:11

castastrophe force-pushed the spectrum-two branch 3 times, most recently from 46ae687 to 8d65de0 Compare January 21, 2025 15:55

aramos-adobe reviewed Jan 21, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from 90a7253 to 7d12a13 Compare January 22, 2025 17:14

castastrophe force-pushed the spectrum-two branch from 7e783b6 to e3585cd Compare January 22, 2025 17:44

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch 2 times, most recently from 7bad7ad to e3e1efb Compare January 22, 2025 18:52

marissahuysentruyt requested a review from aramos-adobe January 22, 2025 18:54

aramos-adobe approved these changes Jan 22, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch 2 times, most recently from 822a5ce to 5ccfca9 Compare January 29, 2025 17:43

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from 5ccfca9 to 1c491ed Compare January 30, 2025 17:25

5t3ph approved these changes Jan 30, 2025

View reviewed changes

marissahuysentruyt merged commit c297d1c into spectrum-two Jan 30, 2025
12 checks passed

marissahuysentruyt deleted the marissahuysentruyt/css-714-s2-takeover-dialog branch January 30, 2025 17:54

najikahalsema mentioned this pull request Feb 11, 2025

[Dialog] spectrum-Dialog--dismissable and spectrum-Dialog--fullscreen* are not compatible #1105

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dialog): s2 takeover dialog migration #3347

feat(dialog): s2 takeover dialog migration #3347

marissahuysentruyt commented Oct 29, 2024 •

edited

Loading

changeset-bot bot commented Oct 29, 2024 •

edited

Loading

github-actions bot commented Oct 29, 2024 •

edited

Loading

github-actions bot commented Oct 29, 2024 •

edited

Loading

dialog

modal

tokens

marissahuysentruyt Oct 31, 2024 •

edited

Loading

marissahuysentruyt Jan 16, 2025 •

edited

Loading

aramos-adobe left a comment

5t3ph left a comment

		"@spectrum-css/dialog": major
		"@spectrum-css/modal": minor

feat(dialog): s2 takeover dialog migration #3347

feat(dialog): s2 takeover dialog migration #3347

Conversation

marissahuysentruyt commented Oct 29, 2024 • edited Loading

Description

Designs

Jira

How and where has this been tested?

Validation steps

Additional validation

Regression testing

Screenshots

To-do list

changeset-bot bot commented Oct 29, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Oct 29, 2024 • edited Loading

github-actions bot commented Oct 29, 2024 • edited Loading

File metrics

Summary

dialog

modal

tokens

marissahuysentruyt Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt Jan 16, 2025 • edited Loading

Choose a reason for hiding this comment

aramos-adobe left a comment

Choose a reason for hiding this comment

5t3ph left a comment

Choose a reason for hiding this comment

marissahuysentruyt commented Oct 29, 2024 •

edited

Loading

changeset-bot bot commented Oct 29, 2024 •

edited

Loading

github-actions bot commented Oct 29, 2024 •

edited

Loading

github-actions bot commented Oct 29, 2024 •

edited

Loading

marissahuysentruyt Oct 31, 2024 •

edited

Loading

marissahuysentruyt Jan 16, 2025 •

edited

Loading