feat(alert dialog): S2 migration#3725
Merged
Merged
Conversation
cdransf
added
wip
🦋 Changeset detectedLatest commit: 0c646ed The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Contributor
|
🚀 Deployed on https://pr-3725--spectrum-css.netlify.app |
Contributor
File metricsSummaryTotal size: 1.41 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
File change detailsalertdialog
tokens
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
cdransf
force-pushed
the
cdransf/s2-alert-dialog-migration
branch
4 times, most recently
from
393e919 to
7a4d68f
Compare
cdransf
requested review from
5t3ph,
aramos-adobe,
castastrophe,
marissahuysentruyt and
rise-erpelding
and removed request for
marissahuysentruyt
cdransf
force-pushed
the
cdransf/s2-alert-dialog-migration
branch
from
f48db01 to
178a298
Compare
cdransf
added
size-8 XL
cdransf
force-pushed
the
cdransf/s2-alert-dialog-migration
branch
from
178a298 to
2f040e0
Compare
cdransf
force-pushed
the
cdransf/s2-alert-dialog-migration
branch
2 times, most recently
from
68ce9b0 to
879e039
Compare
cdransf
force-pushed
the
cdransf/s2-alert-dialog-migration
branch
4 times, most recently
from
00ef68d to
829c762
Compare
cdransf
force-pushed
the
cdransf/s2-alert-dialog-migration
branch
from
829c762 to
bd46f2b
Compare
cdransf
added
the
size-5 L
Collaborator
marissahuysentruyt
left a comment
marissahuysentruyt
left a comment
There was a problem hiding this comment.
Looks great! Thanks for working on this one! I'm happy to approve once we've revisited the icon spacing in the header!
marissahuysentruyt
approved these changes
May 22, 2025
Collaborator
marissahuysentruyt
left a comment
marissahuysentruyt
left a comment
There was a problem hiding this comment.
Brilliant work! (looks like it needs a rebase, but approved!)
cdransf
force-pushed
the
cdransf/s2-alert-dialog-migration
branch
2 times, most recently
from
70a3ac9 to
900c87b
Compare
… to fix case where header + footer wouldn't fill width appropriately with short content (CSS-1133)
cdransf
force-pushed
the
cdransf/s2-alert-dialog-migration
branch
from
900c87b to
0c646ed
Compare
aramos-adobe
approved these changes
May 22, 2025
3 tasks
11 tasks
This was referenced Aug 27, 2025
14 tasks
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
CSS-1017+CSS-1133This migrates the
alert dialogcomponent to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.The icon in the dialog header has been moved from the right side to the left.
The dialog divider has been removed.
Primary button style has been updated to filled.
Multiple variants are now supported:
AlertDiamondicon)AlertTriangleicon)Dialog buttons may be displayed either horizontally or vertically.
Removed custom properties
--spectrum-alert-dialog-body-font-size--spectrum-alert-dialog-description-to-buttons--spectrum-alert-dialog-divider-to-description--spectrum-alert-dialog-padding--spectrum-alert-dialog-title-size--spectrum-alert-dialog-title-to-divider--spectrum-alert-dialog-title-to-iconNew custom properties
--spectrum-alert-dialog-background-color--spectrum-alert-dialog-corner-radius--spectrum-alert-dialog-description-to-button-group--spectrum-alert-dialog-edge-to-content--spectrum-alert-dialog-minimum-title-to-icon--spectrum-alert-dialog-title-to-descriptionRemoved mods
--mod-alert-dialog-body-font-size--mod-alert-dialog-description-to-buttons--mod-alert-dialog-divider-to-description--mod-alert-dialog-padding--mod-alert-dialog-title-to-divider--mod-alert-dialog-title-to-iconNew mods
--mod-alert-dialog-background-color--mod-alert-dialog-corner-radius--mod-alert-dialog-description-size--mod-alert-dialog-description-to-button-group--mod-alert-dialog-edge-to-content--mod-alert-dialog-minimum-title-to-icon--mod-alert-dialog-title-to-descriptionHow 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
Regression testing
Validate:
Screenshots
To-do list