feat(toast): S2 migration

[cdransf]

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

1. Open the URL for the PR.
2. 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]

🦋 Changeset detected

Latest commit: 1641138

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]

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

[github-actions]

File metrics

Summary

Total size: 1.38 MB^*

Package	Size	Minified	Gzipped
toast	6.55 KB	6.25 KB	1.42 KB

toast

Filename	Head	Minified	Gzipped	Compared to base
index.css	6.55 KB	6.25 KB	1.42 KB	🟢 ⬇ 1.31 KB
metadata.json	3.78 KB	-	-	🟢 ⬇ 0.31 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."

[marissahuysentruyt]

I think I have more changes to request, but I didn't want to hold up the comments I did have. I'll be back to see if I can work out the calcs/max functions!

[marissahuysentruyt]

I think this is looking great! Thanks for getting back to me on the --noButton question I had.

Also- feel free to reword my WIP commits! I wouldn't want them to accidentally get merged or something with my very helpful "style wip" message 😆

Closing out + merging with 2 existing reviewers.