feat(dialog): s2 standard dialog migration #2860
Conversation
🦋 Changeset detectedLatest commit: 6505da4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 19 packages
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 |
File metricsSummaryTotal size: 2.74 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
Detailsbuttongroup
dialog
modal
underlay
tokens
* Results are not gzipped or minified. * An ASCII character in UTF-8 is 8 bits or 1 byte. |
|
🚀 Deployed on https://pr-2860--spectrum-css.netlify.app |
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
from
6f90f2f to
1e8b017
Compare
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
from
1e8b017 to
596d2f6
Compare
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
3 times, most recently
from
abaf623 to
4f08fa7
Compare
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
from
49d137e to
a57836c
Compare
marissahuysentruyt
requested review from
rise-erpelding,
pfulton,
jawinn and
castastrophe
There was a problem hiding this comment.
Hey, this component is a beast and you did a nice job! There are so many changes for S2 and it matches the spec nicely for most typical cases! I'm going to go ahead and submit these initial thoughts so I'm not sitting on this for too long but I may come back and add more comments later!
Wrapping
I didn't dig into the minmax function that you added that you commented on, but I did note that there were some funky formatting/wrapping issues that may or may not be fixed by adjusting that grid-template-columns:
- Adding more "Additional header content" will stretch this container and push the heading text so that it wraps and eventually gets pushed out of the dialog on the left, that's probably not expected behavior. That's probably not expected behavior. On the plus side, I can see that the heading text is wrapping nicely!
- In the footer, adding too much footer content also does a weird thing where it doesn't wrap and pushes the action buttons out of the dialog on the right side (although the footer text does eventually wrap, which is good!), that's probably not ideal either. It might help to have some max-width values/tokens for these two content areas.
Fullscreen/Fullscreen Takeover Mode
- I called out the close button positioning in a comment, I think. It ends up being really funky if the close button is added, is the close button allowed to be used for fullscreen mode? Also, the close button is appearing in addition to the action buttons, and I had thought this should be an either/or situation (so correct me if I'm wrong!).
- The footer content disappears in fullscreen, is that expected?
- I made this callout in a comment but I'm going to leave it here too so it doesn't get forgotten: do we definitely want border-radius on the dialog for the fullscreen takeover mode?
- I cannot remove fullscreen/fullscreen takeover as an option once I select it, so I can't go back to the modal that it starts on without removing the parameter from the url. It would be nice to have this be an option so that I could go back to it after looking at fullscreen.
- The hero image control doesn't work in Storybook if I'm on fullscreen mode. I'm not sure whether or not this is intentional, but if fullscreen dialogs are not meant to have a hero image, we should remove controls for those if possible
Tray
I captured it with two dialogs but I just looked again and didn't see the issue 🤷♀️ But I also just saw it when I checked main so I don't think this is something you caused with this work.
|
@rise-erpelding thanks for all of this feedback!
I left a comment about all of these! They're things I've asked about, but I don't think have been decided on yet for S2. I have a Jira ticket to follow up on the 3 questions that still remain for the fullscreen layouts. (this is the hero & dismissible control removals: 0bfa1a8) for fullscreen layouts)
I agree. I ended up having to alter the template a little more and sort of rework some arguments, so I'd love for you to try to break things!! I think I got that figured out: 0bfa1a8
That was intentional on my part. Unfortunately, it seems like you found half of the work and I didn't fix the controls 😬 They should be removed now: 94220e6
Was there something going on with Tray? I know it uses a dialog, but that wasn't one of the components I intentionally touched. As for the header and footer overflow and grid placement- still working on it. 👍 EDIT: I moved the Chromatic testing templates to |
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
from
5c3c954 to
179f3f8
Compare
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
from
88db1a4 to
4168200
Compare
components/dialog/index.css
Outdated
| border-radius: var(--mod-standard-dialog-border-radius, var(--spectrum-standard-dialog-border-radius)); | ||
| overflow: hidden; | ||
|
|
||
| .spectrum--large & { |
There was a problem hiding this comment.
Can .spectrum--large be converted by SWC? I could be wrong, but I thought that part of the reason we have custom-vars in the tokens package was because they had trouble with us using large platform scale and light/dark classes like this.
There was a problem hiding this comment.
Thanks for calling this out. Glad we got confirmation from Cassondra that we cannot do this and I can correct it before it goes out to SWC.
For posterity, we cannot nest platform styles like this:
because the individual web components are not aware of the context they exist inside. Namely, we can't rely on the element having a ".spectrum--large" class to look up to. We can add...the default value to the custom medium styles (
custom-medium-vars) and the alt to custom large (custom-large-vars)and it should toggle accurately
Doing so ☝️ allows us to access it like a global variable.
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
from
f1e6597 to
70de6c8
Compare
There was a problem hiding this comment.
Lots of improvements here! What you've added is really nice, and I love that I don't have to upload a photo for the hero image.
I noted a few other small things this time around that might need some polishing:
- Small dialog breaks the layout in the footer
- Tokens package changeset?
- Footer controls logic or footer controls descriptions
| @@ -74,6 +74,8 @@ | |||
| --spectrum-dialog-confirm-description-text-size:15px; | |||
| --spectrum-dialog-confirm-padding-grid:24px; | |||
|
|
|||
| --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-400); | |||
There was a problem hiding this comment.
Does tokens need a changeset?
I'm realizing that I forgot to add one myself when I merged Melissa's Tooltip S2 migration. 🙈
| category: "Content", | ||
| }, | ||
| control: { type: "text" }, | ||
| if: { arg: "layout", eq: "default" }, |
There was a problem hiding this comment.
I'm wondering if this needs to be revisited or if I'm just misunderstanding the logic for hasFooter:
In Storybook I'm seeing that if hasFooter is false, I can still see Has checkbox and Footer text. That makes sense looking at the code, because the footer, hasFooter, and hasCheckbox controls only appear for the default layout, but is that what we want? This seems different from what you stated above:
If hasFooter is false, I've hidden the hasCheckbox and footer text controls
Given we'd want be able to apply multiple conditionals to get the controls appearing just right in certain situations but we can't, I'm fine if hasCheckbox and footer controls are visible all the time and not just when hasFooter is true. But maybe some clarity in the descriptions instead would help?
For instance, explaining that the footer contains the button group, checkbox, and footer text in the description might be nice. (Like, "Adds a footer to the dialog, containing the button group, checkbox, and footer text.") Another thing I noted that could be clarified in descriptions is that it looks like footer text is either the checkbox label if there's a checkbox, or it's just text that appears in the footer if not, that could be an updated description to something like "Text content of the dialog footer, represents the checkbox label if a checkbox is present, or stands alone if there is no checkbox".
Does that seem feasible? Or is there another reason why it's this way that I'm missing?
| font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); | ||
| } | ||
| } | ||
| .spectrum-Dialog-grid { |
There was a problem hiding this comment.
Revisiting this again, I shrunk my viewport down to make the dialog size a little closer to the min of 288px, but even at 327px, the layout in the footer starts to break (I am using platform scale large because that platform is maybe more likely to be used when the dialog is smaller in width, but even with medium it doesn't look great):
Since we're already here adjusting the grid for smaller screen sizes, maybe we could make a small fix to the grid-template-areas here to keep the footer and buttonGroup areas from looking funny?
.changeset/few-doors-smile.md
Outdated
| "@spectrum-css/buttongroup": patch | ||
| --- | ||
|
|
||
| Adds a new `--mod-buttongroup-flex-wrap` custom property to leverage if user wish to customize the flex-wrap property. |
castastrophe
force-pushed
the
spectrum-two
branch
3 times, most recently
from
cdb180d to
27d01df
Compare
There was a problem hiding this comment.
A couple of small, non-blocking items:
- You might add, optionally, to the description for the "Additional header content" control, something about this block not rendering if there's no text. Something similar to how it is in Alert Banner, maybe? It feels less necessary here, though, so I'll leave it to your discretion.
- At dialog's min-width of 288px, the layout isn't broken, but we're not technically giving it the right amount of padding. I think this is really an edge case though, and would propose we leave it as is for now and follow up when we address the responsive layout issues.
Otherwise, the responsive layout looks good, tokens changeset is added, footer controls are handled, and typos are fixed. Nice work and thanks for taking on such a massive migration here!
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
from
d99b529 to
b71d0c6
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| border: solid; | ||
| } | ||
| .spectrum-Dialog { | ||
| border: 1px solid var(--highcontrast-standard-dialog-border-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); |
There was a problem hiding this comment.
Custom property --highcontrast-standard-dialog-border-color not defined
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
from
b71d0c6 to
acde6e5
Compare
* 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
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-714-s2-dialog
branch
from
acde6e5 to
531a17b
Compare
- override layout:centered parameter with layout:padded instead so the dialogs are visible on their canvases on the docs page. - correct the t-shirt sizes for small and large dialogs on the docs page
* 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.
* 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.
* 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.
Description
This migrates the Standard Dialog to S2. 🎉 The default dialog story is called "Standard Dialog." New tokens were utilized to match the design specs. The template underwent significant changes (first uncovered in #2833) to accommodate missing elements such as optional header content, optional footer content, hero/cover images, and the button group. There is also a new option for the footer content, where a checkbox and text can be present, or just the text itself.
Documentation has been updated and the divider story was removed since dividers are no longer supported in dialog components in S2.
This PR pulls in certain features from
mainin preparation for whenspectrum-twomerges. That includes someimportstatements that are commented out and thedialog.test.jsfile. While the test file doesn't do anything on this branch at this time, it has been updated. Dialogs with dividers are no longer supported, so that test case has been removed.Because the dialog was renamed to "standard dialog" and the divider component was removed, mod properties are either "new," have been renamed to reflect the "standard dialog" language, or removed:
New Mods
--mod-standard-dialog-spacing-title-to-header-content--mod-standard-dialog-spacing-title-to-description--mod-standard-dialog-header-content-font-sizeRenamed 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-groupRemoved 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-heightNew mod for button group:
--mod-buttongroup-flex-wrapDesigns
S2 Standard Dialog Tokens specs
S2 / Desktop Standard Dialog
There will be subsequent work for the fullscreen and fullscreenTakeover dialogs, (draft PR: #3347).
Jira
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
Dividercomponent, so any JS or CSS referencing the dialog's divider has been removed from the stories andindex.cssfiles.spectrum-Dialogand.spectrum-Modalutilize the updated border-radius value (corner-radius-extra-large-default16px)--small,--mediumand--largehave been removed from the JS and CSS. Any sizing modifiers should now reflect T-shirt sizing (--sizeS,size--L), without a--sizeMas that is the default dialog size.standard-dialog-maximum-width-smallstandard-dialog-maximum-width-mediumstandard-dialog-maximum-width-largestandard-dialog-minimum-widthstandard-dialog-title-font-sizestandard-dialog-body-font-sizecorner-radius-extra-large-defaultspacing-500spacing-400spacing-300background-layer-2-color(in the designs, this is accidentally misnamed asbackground-color-layer2line-height-200dialog.test.jsfile) will include the default, with a hero image, both as non-dismissible (the default) and dismissible (isDismissible: true). The fullscreen and fullscreenTakeover are separate test templates, and do not have additional variations/test scenarios.Regression testing
Validate:
Screenshots
To-do list