feat(toast): S2 migration #3643

cdransf · 2025-03-26T22:29:53Z

Description

CSS-619

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.

Tokens

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

Mods

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

Validation steps

Open the URL for the PR.
Navigate to the toast component and verify no regressions have occurred.

Tokens should match the provided designs.
Visual presentation should match associated Figma doc.

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 · 2025-03-26T22:29:57Z

🦋 Changeset detected

Latest commit: 5514df5

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

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/toast	Major

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 · 2025-03-26T22:35:43Z

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

github-actions · 2025-03-26T22:40:39Z

File metrics

Summary

Total size: 1.37 MB^*

Package	Size	Minified	Gzipped
toast	6.97 KB	6.66 KB	1.44 KB

toast

Filename	Head	Minified	Gzipped	Compared to base
index.css	6.97 KB	6.66 KB	1.44 KB	🟢 ⬇ 0.91 KB
metadata.json	4.12 KB	-	-	🔴 ⬆ 0.03 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

marissahuysentruyt

Another old PR, resurrected! I had some comments that I couldn't find a good place to put inline:

I noticed this at line 81 of the CSS: color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default));. Should color be set to the --spectrum-toast-text-and-icon-color (which is white) instead? It's set later in the file for .spectrum-Toast-content and .spectrum-Toast-typeIcon, but I'm curious why it's set to the background color. If we set the font/icon color in .spectrum-Toast, will it cascade correctly? And then we can delete all of those repetitive color declarations for negative, -typeIcon, and content. Quickly, testing that, I think it works.
In the stories file, could we revisit the documentation? Specifically, I think the Action story is worded oddly. I misunderstood it a few times in a few places while reading, partially because the accepted button variant is so specific. Maybe we use something like:
"A toast can offer up to one user action using a secondary static white button, with the outline treatment. That button's label should be kept concise, and it should only be used when there’s a direct action available that is related to the toast text."

components/toast/index.css

.changeset/red-kiwis-flash.md

components/toast/index.css

marissahuysentruyt · 2025-04-03T17:33:35Z

components/toast/index.css

 	padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)));
 	padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)));


Do these calcs resolve to the spacing-100 value then? I didn't see that token in the custom properties, but are we achieving that value with these?

I just wanted to make sure that when the toast wraps, we've included whatever spacing-100 is supposed to be, somewhere. I think that's what these are doing?

marissahuysentruyt · 2025-04-03T17:36:44Z

components/toast/index.css


 	--spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
 	--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);

 	/* Color */
+	--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
 	--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
 	--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
 	--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);

 	--spectrum-toast-text-and-icon-color: var(--spectrum-white);


This is sort of connected to the question I had about neutral-subdued-background-color-default.

During testing, I changed from the subdued background to the regular neutral-background-color-default, just to match Figma. I flipped on dark mode and saw this:

So...if neutral-background-color-default is actually correct (it's used in Figma, but NOT what is specified in the token specs), we may need to ALSO ask about the text colors. With --spectrum-white, that token doesn't flip between light and dark mode.

Anyways, all of that is to say- we should double check on the background color token first. I think neutral-subdued-background-color-default as it is in the token specs is probably correct since it's got light and dark values. (and works with white text better) It would be good for design to know that Figma should probably be updated to use that same token.

marissahuysentruyt · 2025-04-03T17:51:19Z

components/toast/index.css

-
-		border-inline-start-width: 1px;
-		border-inline-start-style: solid;
+		padding-inline-start: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));


I'm a little confused with the specs here. When there's an "Undo" button let's say, and the toast close button, that space between them should be spacing-200, corrrect?

But then when it's just text to the close button, that space should be spacing-300? Have we accounted for that? I think that may be missing.

Am I reading/understanding the specs correctly? Tell me if I'm not!

github-actions · 2025-04-04T20:01:23Z

components/toast/index.css

+	--spectrum-toast-spacing-toast-to-edge: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-close-button-to-edge: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-close-button-top-edge-to-close-button: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-text-to-close-button: var(--spectrum-spacing-300);


⚠️ [stylelint] <spectrum-tools/no-unused-custom-properties> _{reported by reviewdog 🐶}
Unused custom property --spectrum-toast-spacing-text-to-close-button defined

github-actions · 2025-04-04T20:01:23Z

components/toast/index.css

+	--spectrum-toast-spacing-text-to-close-button: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-text-to-button-horizontal: var(--spectrum-spacing-400);
+	--spectrum-toast-spacing-button-to-close-button-horizontal: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-text-to-button-vertical: var(--spectrum-spacing-100);


⚠️ [stylelint] <spectrum-tools/no-unused-custom-properties> _{reported by reviewdog 🐶}
Unused custom property --spectrum-toast-spacing-text-to-button-vertical defined

github-actions · 2025-04-04T20:01:23Z

components/toast/index.css


 	--spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300);
-	--spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-button-to-close-button: var(--spectrum-spacing-200);


⚠️ [stylelint] <spectrum-tools/no-unused-custom-properties> _{reported by reviewdog 🐶}
Unused custom property --spectrum-toast-spacing-button-to-close-button defined

github-actions · 2025-04-04T20:01:23Z

components/toast/index.css


-	--spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100);
-	--spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-top-edge-to-button: var(--spectrum-spacing-200);


⚠️ [stylelint] <spectrum-tools/no-unused-custom-properties> _{reported by reviewdog 🐶}
Unused custom property --spectrum-toast-spacing-top-edge-to-button defined

github-actions · 2025-04-04T20:01:23Z

components/toast/index.css

-	--spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100);
-	--spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-top-edge-to-button: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-bottom-edge-to-button: var(--spectrum-spacing-300);


⚠️ [stylelint] <spectrum-tools/no-unused-custom-properties> _{reported by reviewdog 🐶}
Unused custom property --spectrum-toast-spacing-bottom-edge-to-button defined

github-actions · 2025-04-04T20:01:23Z

components/toast/index.css

-	--spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-top-edge-to-button: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-bottom-edge-to-button: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-bottom-edge-to-close-button: var(--spectrum-spacing-200);


⚠️ [stylelint] <spectrum-tools/no-unused-custom-properties> _{reported by reviewdog 🐶}
Unused custom property --spectrum-toast-spacing-bottom-edge-to-close-button defined

github-actions · 2025-04-04T20:01:24Z

components/toast/index.css

-	--spectrum-toast-spacing-block-start: var(--spectrum-spacing-100);
-	--spectrum-toast-spacing-block-end: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-block-start: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-block-end: var(--spectrum-spacing-200);

 	--spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);


⚠️ [stylelint] <spectrum-tools/no-unused-custom-properties> _{reported by reviewdog 🐶}
Unused custom property --spectrum-toast-spacing-top-edge-to-text defined

github-actions · 2025-04-04T20:01:24Z

components/toast/index.css

-	--spectrum-toast-spacing-block-start: var(--spectrum-spacing-100);
-	--spectrum-toast-spacing-block-end: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-block-start: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-block-end: var(--spectrum-spacing-200);

 	--spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
 	--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);


⚠️ [stylelint] <spectrum-tools/no-unused-custom-properties> _{reported by reviewdog 🐶}
Unused custom property --spectrum-toast-spacing-bottom-edge-to-text defined

cdransf added size-5 L ~30-42hrs; lots of effort or complexity, most of a sprint needed to complete. wip This is a work in progress, don't judge. do not merge A flag for a branch indicating it should not be merged. labels Mar 26, 2025

cdransf force-pushed the cdransf/s2-toast-migration branch 2 times, most recently from 3a3e923 to 1027d4e Compare March 27, 2025 14:40

cdransf self-assigned this Mar 27, 2025

cdransf force-pushed the cdransf/s2-toast-migration branch 3 times, most recently from 3942a21 to 61add5d Compare March 27, 2025 17:47

cdransf requested review from castastrophe, 5t3ph and rise-erpelding March 27, 2025 17:48

cdransf added skip_vrt Add to a PR to skip running VRT (but still pass the action) ready-for-review and removed wip This is a work in progress, don't judge. do not merge A flag for a branch indicating it should not be merged. labels Mar 27, 2025

cdransf marked this pull request as ready for review March 27, 2025 17:48

cdransf force-pushed the cdransf/s2-toast-migration branch 3 times, most recently from 7f16d35 to 4a670f9 Compare March 27, 2025 18:49

cdransf changed the title ~~chore(toast): begin carrying over old migration + correct icons~~ feat(toast): S2 migration Mar 28, 2025

cdransf force-pushed the cdransf/s2-toast-migration branch 3 times, most recently from d6f0671 to 6c327b2 Compare April 2, 2025 15:45

marissahuysentruyt requested changes Apr 3, 2025

View reviewed changes

cdransf force-pushed the cdransf/s2-toast-migration branch from e3f7710 to 04e1ba3 Compare April 3, 2025 22:46

github-actions bot reviewed Apr 4, 2025

View reviewed changes

cdransf added 6 commits April 4, 2025 15:44

feat(toast): S2 migration

4dd1b90

fix(toast): update font token

2877132

fix(toast): correct font property organization and header

b4561ac

fix(toast): action-button -> button naming

a12e40f

chore(toast): update changelog

57cc1d8

fix(toast): wip additional spacing and token validation

5514df5

cdransf force-pushed the cdransf/s2-toast-migration branch from accc37b to 5514df5 Compare April 4, 2025 22:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(toast): S2 migration #3643

feat(toast): S2 migration #3643

cdransf commented Mar 26, 2025 •

edited

Loading

changeset-bot bot commented Mar 26, 2025 •

edited

Loading

github-actions bot commented Mar 26, 2025 •

edited

Loading

github-actions bot commented Mar 26, 2025 •

edited

Loading

marissahuysentruyt left a comment

marissahuysentruyt Apr 3, 2025

marissahuysentruyt Apr 3, 2025

marissahuysentruyt Apr 3, 2025

github-actions bot Apr 4, 2025

github-actions bot Apr 4, 2025

github-actions bot Apr 4, 2025

github-actions bot Apr 4, 2025

github-actions bot Apr 4, 2025

github-actions bot Apr 4, 2025

github-actions bot Apr 4, 2025

github-actions bot Apr 4, 2025

		padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)));
		padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)));

feat(toast): S2 migration #3643

Are you sure you want to change the base?

feat(toast): S2 migration #3643

Conversation

cdransf commented Mar 26, 2025 • edited Loading

Description

S2 toast migration

Tokens

Mods

Passthroughs

Validation steps

Screenshots

To-do list

changeset-bot bot commented Mar 26, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Mar 26, 2025 • edited Loading

github-actions bot commented Mar 26, 2025 • edited Loading

File metrics

Summary

toast

marissahuysentruyt left a comment

Choose a reason for hiding this comment

marissahuysentruyt Apr 3, 2025

Choose a reason for hiding this comment

marissahuysentruyt Apr 3, 2025

Choose a reason for hiding this comment

marissahuysentruyt Apr 3, 2025

Choose a reason for hiding this comment

github-actions bot Apr 4, 2025

Choose a reason for hiding this comment

github-actions bot Apr 4, 2025

Choose a reason for hiding this comment

github-actions bot Apr 4, 2025

Choose a reason for hiding this comment

github-actions bot Apr 4, 2025

Choose a reason for hiding this comment

github-actions bot Apr 4, 2025

Choose a reason for hiding this comment

github-actions bot Apr 4, 2025

Choose a reason for hiding this comment

github-actions bot Apr 4, 2025

Choose a reason for hiding this comment

github-actions bot Apr 4, 2025

Choose a reason for hiding this comment

cdransf commented Mar 26, 2025 •

edited

Loading

changeset-bot bot commented Mar 26, 2025 •

edited

Loading

github-actions bot commented Mar 26, 2025 •

edited

Loading

github-actions bot commented Mar 26, 2025 •

edited

Loading