[Toast] Updates to fit a more compact layout

[n-filatov]

WHY are these changes introduced?

Resolves: #7766

Updates the toast to fit a more compact layout.

Figma: https://www.figma.com/file/wgbt21f1PZm5lrUecbB5oY/%F0%9F%8D%9E-Toast-component-rework?t=t1DGV6KQXGXBfkaQ-0

WHAT is this pull request doing?

Redesign screenshots:

Default

Before:

After:

With Action

Before:

After:

Error

Before:

After:

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Test in spin

Spin instance: https://admin.web.nf-tost-web.nikita-filatov.eu.spin.dev/store/shop1/products?selectedView=all

Default toast

Create a new product here: link

Expected result

Toast with error

1. Create a new product here: link

2. Before clicking on the Save button disable the wifi:
   

Expected result:

Test on local machine

1. Open http://localhost:6006/?path=/story/all-components-toast--default
2. Check
   2.1 Default toast
   2.2. Toast with action
   2.3 Toast with error

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	210.7 KB (+0.02% 🔺)
polaris-react-esm	136.08 KB (+0.04% 🔺)
polaris-react-esnext	191.81 KB (+0.03% 🔺)
polaris-react-css	42.05 KB (+0.01% 🔺)

[n-filatov]

/snapit

[github-actions]

🫰✨ Thanks @n-filatov! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221122113531

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20221122113531

yarn add @shopify/polaris@0.0.0-snapshot-release-20221122113531

[sarahill]

This looks great!

[kyledurand]

Looks great to me 👍

[kyledurand]

Suggested change

	Redesign the Toast component to a more compact layout
	Updated the Toast component to a more compact layout

[n-filatov]

Thanks, fixed!

[kyledurand]

Can we call this LeadingIcon or just Icon instead? We're working towards removing left / right / top / bottom phrasing from the system. Not a blocker but if you could make the change here and to leftIconMarkup => leadingIconMarkup or iconMarkup that would be awesome

[n-filatov]

Got it, thank you for feedback 🙏

Fixed:

polaris/polaris-react/src/components/Frame/components/Toast/Toast.tsx

Lines 65 to 69 in 173bbf9

	const leadingIconMarkup = error ? (
	<div className={styles.LeadingIcon}>
	<Icon source={AlertMinor} color="base" />
	</div>
	) : null;

[heyjoethomas]

Can we double check the tokens being used here? In the Figma doc there are lots of incorrect tokens being used. For example, we shouldn't be using border tokens to style text.

[n-filatov]

Can we double check the tokens being used here? In the Figma doc there are lots of incorrect tokens being used. For example, we shouldn't be using border tokens to style text.

Thanks for the very useful comment, Joe!
@jameswfindlater is now on vacation till the next week. I will meet with him to clarify the tokens which we should use here. Until then, I will mark the PR WIP

[heyjoethomas]

Can we double check the tokens being used here? In the Figma doc there are lots of incorrect tokens being used. For example, we shouldn't be using border tokens to style text.

Thanks for the very useful comment, Joe! @jameswfindlater is now on vacation till the next week. I will meet with him to clarify the tokens which we should use here. Until then, I will mark the PR WIP

Sounds good. If y'all want to jam together on it just reach out. Happy to jump in a session and collab on it.

[sarahill]

Thanks for catching that @heyjoethomas. I noticed that when I was adding them to the UI Kit. Here's a link to the branch in Figma

[n-filatov]

Thanks for catching that @heyjoethomas. I noticed that when I was adding them to the UI Kit. Here's a link to the branch in Figma

@sarahill thanks for the Figma link. I have changed the tokens in my PR. The main UI difference is the color for action text, it will be like the main text(using --p-text-on-interactive token)

polaris/polaris-react/src/components/Frame/components/Toast/Toast.scss

Line 25 in e8d063d

color: var(--p-text-on-interactive);

polaris/polaris-react/src/components/Frame/components/Toast/Toast.scss

Line 51 in e8d063d

color: var(--p-icon-subdued);

It will look like this:

[sarahill]

Thanks for updating the tokens. Looks good 👍

[LauraAubin]

Great work! Tophat looks good

[LauraAubin]

I think we should also create an issue to update the action text/close button color when there are available tokens.

[sarahill]

Tokens are good but I just noticed 2 things:

• Close button isn't center aligned when there's an action present
• The designs look like they have a shadow but I'm not seeing that here.. correct me if I'm missing it though: shadow-popover

close button not center

shadow (it's subtle)

cc: @jameswfindlater

[n-filatov]

Tokens are good but I just noticed 2 things:

• Close button isn't center aligned when there's an action present
• The designs look like they have a shadow but I'm not seeing that here.. correct me if I'm missing it though: shadow-popover

close button not center

shadow (it's subtle)

cc: @jameswfindlater

Yea, my bad. Thanks for noticing 🙌.

1. Added box-shadow:
   

   polaris/polaris-react/src/components/Frame/components/Toast/Toast.scss

   Line 13 in 9cd7360

   box-shadow: var(--p-shadow-popover);

2. Fixed cross icon position:

[sarahill]

Following up on UI Kit updates here: I went ahead and merged in the Toast updates to the UI Kit and will publish those changes to the library one this branch is merged 😄

[jameswfindlater]

Looking great ... Thank you everyone for doing this!