Skip to content

feat(toast): S2 migration #3643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cdransf merged 11 commits into from
Apr 29, 2025
Merged

feat(toast): S2 migration #3643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4414661
feat(toast): S2 migration
cdransf Mar 26, 2025
fdb0d15
fix(toast): vertical and horizontal spacing
cdransf Apr 3, 2025
fe1f2cb
chore(toast): remove unused properties
cdransf Apr 14, 2025
cf674bb
chore(toast): additional spacing refinements and explanatory comments
cdransf Apr 14, 2025
b8df74c
marissa wip
marissahuysentruyt Apr 18, 2025
f6c246e
styles wip
marissahuysentruyt Apr 18, 2025
a633da4
chore(toast): add .spectrum-Toast--noButton for SWC use
cdransf Apr 17, 2025
c8a36af
fix(toast): update toast test case message w/out button
cdransf Apr 18, 2025
899a1ea
fix(toast): update toast has button story
cdransf Apr 18, 2025
5a807ef
fix(toast): scope close button styles to toast
cdransf Apr 18, 2025
1641138
fix(toast): clean up a few typos
cdransf Apr 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions .changeset/red-kiwis-flash.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
"@spectrum-css/toast": major
---

#### S2 toast migration

This migrates the `toast` component to S2. Custom properties have been remapped per the design spec. Mods have been added and placeholder icons have been updated from the new workflow icons. The toast no longer supports a divider.

##### Tokens

| Before | After |
| ---------------------------- | ---------------------------- |
| --spectrum-corner-radius-100 | --spectrum-corner-radius-800 |

##### Mods
Comment thread
cdransf marked this conversation as resolved.

The following mods have been added.

`--mod-toast-font-family`
`--mod-toast-font-style`
`--mod-toast-icon-block-size`
`--mod-toast-spacing-action-button-to-close`
`--mod-toast-spacing-bottom-edge-to-close-button`
`--mod-toast-spacing-close-button-to-edge`
`--mod-toast-spacing-text-to-close-button`
`--mod-toast-spacing-top-edge-to-close-button`

##### Passthroughs

The following passthrough has been added.

`--mod-closebutton-icon-color-default`
75 changes: 36 additions & 39 deletions components/toast/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,103 +2,100 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Toast",
".spectrum-Toast .spectrum-Button",
".spectrum-Toast .spectrum-CloseButton",
".spectrum-Toast--info",
".spectrum-Toast--info .spectrum-Toast-closeButton:focus-visible:not(:active)",
".spectrum-Toast--negative",
".spectrum-Toast--negative .spectrum-Toast-closeButton:focus-visible:not(:active)",
".spectrum-Toast--positive",
".spectrum-Toast--positive .spectrum-Toast-closeButton:focus-visible:not(:active)",
".spectrum-Toast-body",
".spectrum-Toast-body + .spectrum-Toast-buttons",
".spectrum-Toast-body .spectrum-Button",
".spectrum-Toast-body .spectrum-Button:dir(rtl)",
".spectrum-Toast-buttons",
".spectrum-Toast-buttons .spectrum-CloseButton",
".spectrum-Toast-content",
".spectrum-Toast-content:lang(ja)",
".spectrum-Toast-content:lang(ko)",
".spectrum-Toast-content:lang(zh)",
".spectrum-Toast-text",
".spectrum-Toast-typeIcon",
"[dir=\"rtl\"] .spectrum-Toast-body .spectrum-Button"
".spectrum-Toast.spectrum-Toast--noButton",
".spectrum-Toast:not(:has(.spectrum-Button))"
],
"modifiers": [
"--mod-toast-background-color-default",
"--mod-toast-block-size",
"--mod-toast-border-width",
"--mod-toast-corner-radius",
"--mod-toast-divider-color",
"--mod-toast-font-family",
"--mod-toast-font-size",
"--mod-toast-font-style",
"--mod-toast-font-weight",
"--mod-toast-icon-block-size",
"--mod-toast-informative-background-color-default",
"--mod-toast-line-height",
"--mod-toast-line-height-cjk",
"--mod-toast-max-inline-size",
"--mod-toast-min-block-size",
"--mod-toast-negative-background-color-default",
"--mod-toast-positive-background-color-default",
"--mod-toast-spacing-block-end",
"--mod-toast-spacing-block-start",
"--mod-toast-spacing-bottom-edge-to-divider",
"--mod-toast-spacing-bottom-edge-to-text",
"--mod-toast-spacing-close-button",
"--mod-toast-spacing-block-close-button",
"--mod-toast-spacing-button-to-close-button-horizontal",
"--mod-toast-spacing-close-button-to-end-edge",
"--mod-toast-spacing-icon-to-text",
"--mod-toast-spacing-start-edge-to-text-and-icon",
"--mod-toast-spacing-text-and-action-button-to-divider",
"--mod-toast-spacing-text-to-action-button-horizontal",
"--mod-toast-spacing-top-edge-to-divider",
"--mod-toast-spacing-top-edge-to-icon",
"--mod-toast-spacing-top-edge-to-text",
"--mod-toast-spacing-text-to-button-vertical",
"--mod-toast-spacing-text-to-close-button",
"--mod-toast-spacing-toast-to-edge",
"--mod-toast-text-and-icon-color"
],
"component": [
"--spectrum-toast-background-color-default",
"--spectrum-toast-block-size",
"--spectrum-toast-border-width",
"--spectrum-toast-bottom-to-text",
"--spectrum-toast-corner-radius",
"--spectrum-toast-divider-color",
"--spectrum-toast-font-family",
"--spectrum-toast-font-size",
"--spectrum-toast-font-style",
"--spectrum-toast-font-weight",
"--spectrum-toast-height",
"--spectrum-toast-icon-block-size",
"--spectrum-toast-informative-background-color-default",
"--spectrum-toast-line-height",
"--spectrum-toast-line-height-cjk",
"--spectrum-toast-max-inline-size",
"--spectrum-toast-maximum-width",
"--spectrum-toast-min-block-size",
"--spectrum-toast-negative-background-color-default",
"--spectrum-toast-positive-background-color-default",
"--spectrum-toast-spacing-block-end",
"--spectrum-toast-spacing-block-start",
"--spectrum-toast-spacing-bottom-edge-to-divider",
"--spectrum-toast-spacing-block-close-button",
"--spectrum-toast-spacing-bottom-edge-to-text",
"--spectrum-toast-spacing-close-button",
"--spectrum-toast-spacing-button-to-close-button-horizontal",
"--spectrum-toast-spacing-close-button-to-end-edge",
"--spectrum-toast-spacing-edge-to-button-vertical",
"--spectrum-toast-spacing-icon-to-text",
"--spectrum-toast-spacing-start-edge-to-text-and-icon",
"--spectrum-toast-spacing-text-and-action-button-to-divider",
"--spectrum-toast-spacing-text-to-action-button-horizontal",
"--spectrum-toast-spacing-top-edge-to-divider",
"--spectrum-toast-spacing-text-to-button-horizontal",
"--spectrum-toast-spacing-text-to-close-button",
"--spectrum-toast-spacing-toast-to-edge",
"--spectrum-toast-spacing-top-edge-to-icon",
"--spectrum-toast-spacing-top-edge-to-text",
"--spectrum-toast-text-and-icon-color",
"--spectrum-toast-top-to-text",
"--spectrum-toast-top-to-workflow-icon"
],
"global": [
"--spectrum-border-width-100",
"--spectrum-cjk-line-height-100",
"--spectrum-corner-radius-100",
"--spectrum-corner-radius-800",
"--spectrum-default-font-style",
"--spectrum-font-size-100",
"--spectrum-informative-background-color-default",
"--spectrum-line-height-100",
"--spectrum-negative-background-color-default",
"--spectrum-neutral-subdued-background-color-default",
"--spectrum-positive-background-color-default",
"--spectrum-regular-font-weight",
"--spectrum-sans-font-family-stack",
"--spectrum-spacing-100",
"--spectrum-spacing-200",
"--spectrum-spacing-300",
"--spectrum-text-to-visual-100",
"--spectrum-transparent-white-400",
"--spectrum-white"
"--spectrum-spacing-400",
"--spectrum-text-to-visual-300",
"--spectrum-white",
"--spectrum-workflow-icon-size-100"
],
"passthroughs": [],
"high-contrast": ["--highcontrast-toast-border-color"]
"passthroughs": ["--mod-closebutton-icon-color-default"],
"high-contrast": []
}
Loading
Loading