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: 90a7253

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: 1.74 MB^*
Total change (Δ): 🔴 ⬆ 2.79 KB (0.16%)

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.46 KB	🔴 ⬆ 1.37 KB
modal	4.42 KB	🔴 ⬆ 0.06 KB
tokens	478.62 KB	🔴 ⬆ 0.94 KB

Details

dialog

Filename	Head	Compared to base
index.css	16.46 KB	🔴 ⬆ 1.37 KB (9.06%)

modal

Filename	Head	Compared to base
index.css	4.42 KB	🔴 ⬆ 0.06 KB (1.28%)

tokens

Filename	Head	Compared to base
css/dark-vars.css	46.29 KB	-
css/global-vars.css	69.52 KB	-
css/index.css	237.27 KB	🔴 ⬆ 0.47 KB (0.19%)
css/large-vars.css	40.67 KB	🔴 ⬆ 0.23 KB (0.56%)
css/light-vars.css	46.25 KB	-
css/medium-vars.css	40.79 KB	🔴 ⬆ 0.23 KB (0.56%)
index.css	241.35 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.

aramos-adobe · 2024-11-19T20:15:21Z

components/dialog/stories/dialog.stories.js

Maybe we can add an example with content in the middle of spectrum-Dialog-header. In the design, it appears the intention is to have the header content in the middle of this selector. The --spectrum-takeover-dialog-spacing-header-gap adds space between the title, content and buttons.

Good idea- I'll look into adding an example. It may end up as an additional, follow-up card, because we don't support actually adding a different component to that spectrum-Dialog-header-content space. We only support text right now, but I don't think we want just text centered.

@aramos-adobe ok I used the fullscreen story as an example. Both the header content is a different component (the steplist) and then I swapped the body content for a table.

I'm not sure how we handle the centered text now in the fullscreenTakeover dialog. I think we need the justify-content: centered for when there's components in the .spectrum-Dialog-headerContent element. The only issue I'm seeing is that if a user just has text, like "* Required," it just looks funny to me.

I guess I could add some extra controls to see if a user wants to preview just text (which would bring back the justify-content: space-between and removing the max-inline-size: unset on the wrapper) or preview a different component (which would look like it is now, centered). What do you think?

@marissahuysentruyt do we still need a resolution here?

@marissahuysentruyt This is a great addition!

components/modal/index.css

marissahuysentruyt · 2025-01-06T17:01:34Z

components/dialog/stories/dialog.stories.js

-		hasDivider: {
-			name: "Divider",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "Component",
-			},
-			control: "boolean",
-		},


This must have been brought over accidentally- it is supposed to be removed (dialogs don't support dividers in S2).

…3471) * fix(popover): define --spectrum-popover-border-width in index.css * fix(well): define --spectrum-well-border-color in index.css * fix(tabs): define --spectrum-tabs-font-weight * fix(toast): define default background color and divider color * fix(tag): define undefined custom properties * fix(menu): define menu item background colors * fix(textfield): define undefined custom properties

5t3ph

Looking really good, nice work!!

This may be a fast-follow but I was wondering about thinking through providing a utility class or mod tokens to adjust the max-width for title vs content, and allowing an earlier break to more flexibly accommodate different types of components (maybe even a good job for a container query as a pro-active defense?):

components/dialog/stories/dialog.stories.js

components/modal/index.css

…tom properties (#3487) * fix(pickerbutton): add missing custom properties * fix(radio): add missing custom props * fix(calendar): add missing custom properties * fix(stepper): define unused custom props * fix(progressbar): remove unused custom properties; change background-color to background see #2929; fix static color * fix(dial): remove unused custom properties; add undefined custom properties

- removed the space between full & screen in docs - added docs pertaining to the close button not being allowed in full- screen/takeover dialogs

- adds new takeover-dialog tokens to control the desktop/mobile spacing - rebuilds mods

- removes is-hidden-story tags - uses the test templates (DialogGroup, DialogFullscreen, etc.)

- removes divider control - adds tokens, mods and selectors to metadata.json

- missing justify content: space-between - reimplement missing modal-max-height and modal-max-width mods

- adds hasHeroImage arg - adds background and margin customStyles for fullscreen dialog in Chromatic only (so we can see the rounded corners better)

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

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 commented Jan 6, 2025

View reviewed changes

components/modal/index.css Show resolved Hide resolved

marissahuysentruyt commented Jan 6, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from 9ca5bf9 to 88fb5b5 Compare January 6, 2025 17:04

marissahuysentruyt removed the wip This is a work in progress, don't judge. label Jan 6, 2025

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from db5ff96 to cd894f5 Compare January 6, 2025 17:38

marissahuysentruyt added the ready-for-review label Jan 6, 2025

5t3ph reviewed Jan 7, 2025

View reviewed changes

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

components/modal/index.css Show resolved Hide resolved

marissahuysentruyt and others added 15 commits January 8, 2025 13:45

docs(avatar): update sizing documentation (#3483)

dd96363

chore: commit token assets

be892d9

refactor(modal): add new takeover dialog tokens

3c12119

refactor(dialog): implement takeover dialog design changes

b00efde

chore(dialog,modal): creates changeset

1193f25

docs(dialog): docs fixed and change to layout: fullscreen

90e0045

- removed the space between full & screen in docs - added docs pertaining to the close button not being allowed in full- screen/takeover dialogs

fix(dialog,tokens): custom tokens created

c471a47

- adds new takeover-dialog tokens to control the desktop/mobile spacing - rebuilds mods

chore(dialog): use getRandomId and renderContent functions

ce39cab

docs(dialog): do TODOs

52979a2

- removes is-hidden-story tags - uses the test templates (DialogGroup, DialogFullscreen, etc.)

fix(dialog): class naming corrections

0430d14

refactor(dialog): styles added for components in takeover dialogs

faa4da3

chore(dialog): rebase edits

985d0fb

- removes divider control - adds tokens, mods and selectors to metadata.json

chore(dialog,modal): fixes from rebase

5268b3d

- missing justify content: space-between - reimplement missing modal-max-height and modal-max-width mods

docs(dialog): add takeover figma links

ddb7714

marissahuysentruyt force-pushed the marissahuysentruyt/css-714-s2-takeover-dialog branch from cd894f5 to ccc13e7 Compare January 16, 2025 17:28

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

marissahuysentruyt added 2 commits January 16, 2025 13:10

chore(dialog): clean up dialog tests

2f989da

- adds hasHeroImage arg - adds background and margin customStyles for fullscreen dialog in Chromatic only (so we can see the rounded corners better)

fix(tokens): rebuild tokens

90a7253

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 2 times, most recently from b438a55 to 46ae687 Compare January 17, 2025 03:43

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 Nov 19, 2024

marissahuysentruyt Dec 2, 2024

marissahuysentruyt Dec 10, 2024 •

edited

Loading

5t3ph Jan 16, 2025

aramos-adobe Jan 17, 2025

marissahuysentruyt Jan 6, 2025

5t3ph left a comment

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

feat(dialog): s2 takeover dialog migration #3347

Are you sure you want to change the base?

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 Nov 19, 2024

Choose a reason for hiding this comment

marissahuysentruyt Dec 2, 2024

Choose a reason for hiding this comment

marissahuysentruyt Dec 10, 2024 • edited Loading

Choose a reason for hiding this comment

5t3ph Jan 16, 2025

Choose a reason for hiding this comment

aramos-adobe Jan 17, 2025

Choose a reason for hiding this comment

marissahuysentruyt Jan 6, 2025

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

marissahuysentruyt Dec 10, 2024 •

edited

Loading