feat(notice/toast): update styles for SHINE #2109

mukunku · 2025-12-19T13:26:48Z

Summary

This PR updates the Notice and Toast components according to the latest SHINE designs.

How to Test

To test the Notice component:

Stacks Docs: https://deploy-preview-2109--stacks.netlify.app/product/components/notices/
Stacks Svelte: https://deploy-preview-2109--stacks-svelte.netlify.app/?path=/docs/components-notice--docs

To test the Toast component:

Stacks Docs: https://deploy-preview-2109--stacks.netlify.app/product/components/notices/#toast
Stacks Svelte: https://deploy-preview-2109--stacks-svelte.netlify.app/?path=/docs/components-toast--docs

changeset-bot · 2025-12-19T13:26:52Z

🦋 Changeset detected

Latest commit: 0bc9779

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

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

netlify · 2025-12-19T13:26:53Z

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	`0bc9779`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/696135c62b366e00086a25e0
😎 Deploy Preview	https://deploy-preview-2109--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-12-19T13:26:53Z

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	`0bc9779`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/696135c5272e1a000779c62a
😎 Deploy Preview	https://deploy-preview-2109--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

mukunku · 2025-12-19T13:28:06Z

packages/stacks-classic/lib/components/notice/notice.less

-        // TODO: decouple .s-notice--btn from .s-btn
+    button&--dismiss {


Introduced s-notice--dismiss class here to make the dismiss button more explicit and style it accordingly.

mukunku · 2025-12-19T13:29:18Z

packages/stacks-svelte/src/components/Notice/Notice.svelte

+        /**
+         * Whether to include a dismiss button on the notice or not
+         */
+        dismissable: boolean;
+
+        /**
+         * Optional dismiss event handler
+         */
+        onDismiss?: MouseEventHandler<HTMLButtonElement>;
+
+        /**
+         * Dismiss button label override
+         */
+        i18nDismissButtonLabel?: string;
+


I made the dismiss button a boolean flag here with additional props instead of a special NoticeAction case like it was before. I think this make more sense and improves usability. Hopefully other folks agree 🙏🏾

mukunku · 2025-12-19T13:30:05Z

packages/stacks-classic/lib/components/notice/notice.less

+    align-items: center;
+    gap: var(--su4);
+
+    &--icon {


Introduced the s-notice--icon class for the icons

mukunku · 2025-12-19T16:38:59Z

packages/stacks-docs/product/components/notices.html

+            <button type="button" class="s-link s-link__underlined">Undo</button>
+            <button type="button" class="s-link s-notice--dismiss js-toast-close" aria-label="Dismiss" data-action="s-toast#hide">{% icon "ClearSm" %}</button>


I opted to style the buttons with s-link but not sure if I should've used s-btn s-btn__link instead like we do in the Svelte component for Notices.

CGuindon

Looking great, just noticing some weirdness when I resize the screen smaller:

the whole browser starts to shrink instead of resize when I go below 600px width — feels like a docs issue but not sure if the toast is affecting this somehow
Notices can wrap to multiple lines when needed:
- Padding right should maintain a minimum of 12px (even when there's no X or under button, the description text shouldn't touch the right edge of the notice)
- Links on the end shouldn't wrap within itself (keep as single line unless the whole description is wrapping)
- Code snipets shouldn't wrap within itself either

Added an extra example in the variations section to make that a bit clearer

For the toast not banner (possibly for the other ticket):

I noticed when I add the s-notice__important to the toast example, the undo link and close icon stay black instead of turning white as well.

CGuindon · 2025-12-19T18:14:11Z

I also had a note to myself to write a warning note to add to the docs right below the Toast description text. Can you use a warning in-page notice there that says:

Usage Warning: We are phasing out Toasts due to significant accessibility barriers. Avoid this component for new features. Instead, prioritize integrated alternatives—such as component state changes or inline messages—to provide accessible feedback directly where the user is focused.

mukunku · 2026-01-07T19:20:51Z

Thanks for the review @CGuindon ! I believe I addressed all your findings around responsiveness and multi-line content. Please take a look and let me know how it looks now.

I also decided to do Toasts as part of this PR because the changes left were so small. I additionally added the warning you mentioned:

CGuindon

I think you're using the old X icon, you can use the new cross for the dismiss icon button. Otherwise LGTM

CGuindon

OOOooooooooh even some fancy stacking and animations (not that we see this often) — looking good!

mukunku · 2026-01-09T20:12:45Z

OOOooooooooh even some fancy stacking and animations (not that we see this often) — looking good!

FWIW That was already there; I didn't add that feature 😅

dancormier

Looking sharp 😎 I'd be happy to see this merged.

The only issue worth mentioning that I can see is with the margin-left on the button. In the Svelte Toast example for "With actions", I noticed the actions butting up against one another.

This is the sort of thing I'd expect to be resolved with a gap applied. The issue with this is it will add another xpx to the 22px margin-left on the notice button. I'd make a suggestion but I didn't have time to dig into it and I don't think this needs to hold up merging this PR.

Thanks for the nice work here @mukunku

mukunku added 7 commits December 18, 2025 11:54

base styles for notice and toast

d1f6f55

dark mode

778cd9e

light hc

f836c24

cleanup

87a6862

update svelte component

be59125

update links

6ab0a97

remove commented code

43cffb7

mukunku commented Dec 19, 2025

View reviewed changes

mukunku added 9 commits December 19, 2025 08:33

lint

4b2641b

Create lazy-teachers-wink.md

b2119a3

update migration guide

de80843

update baseline

8e7b706

fix lint, tests, and storybook

db68836

lint harder

c2b44f2

fix tests

56d1bef

Merge branch 'beta' into sal/SPARK-72

e8d8db5

lint again

bbaf531

mukunku requested review from CGuindon, dancormier, giamir and ttaylor-stack December 19, 2025 16:24

mukunku commented Dec 19, 2025

View reviewed changes

CGuindon requested changes Dec 19, 2025

View reviewed changes

mukunku marked this pull request as ready for review December 19, 2025 18:10

mukunku added 2 commits January 7, 2026 09:47

Handle word wrapping for code blocks

4e219ed

make notices support multi-line properly

368d209

mukunku added 5 commits January 7, 2026 13:33

fix responsiveness of examples

7aa8ca1

adjust examples

5fb95bd

adjust comment

4e5df34

cleanup stories (#2117)

11cc41b

Update lazy-teachers-wink.md

89d8800

mukunku changed the title ~~feat(notice): update styles for SHINE~~ feat(notice/toast): update styles for SHINE Jan 7, 2026

lint

7d5eb66

mukunku requested a review from CGuindon January 7, 2026 19:21

CGuindon requested changes Jan 7, 2026

View reviewed changes

mukunku added 2 commits January 8, 2026 09:17

update icon to cross

9c8615d

fix test

f5b30c0

mukunku requested a review from CGuindon January 8, 2026 14:31

Merge branch 'beta' into sal/SPARK-72

0bc9779

mukunku mentioned this pull request Jan 9, 2026

feat(banner): update styles for SHINE #2118

Open

CGuindon approved these changes Jan 9, 2026

View reviewed changes

dancormier approved these changes Jan 9, 2026

View reviewed changes

		// TODO: decouple .s-notice--btn from .s-btn
		button&--dismiss {

		<button type="button" class="s-link s-link__underlined">Undo</button>
		<button type="button" class="s-link s-notice--dismiss js-toast-close" aria-label="Dismiss" data-action="s-toast#hide">{% icon "ClearSm" %}</button>

feat(notice/toast): update styles for SHINE #2109

Are you sure you want to change the base?

feat(notice/toast): update styles for SHINE #2109

Conversation

mukunku commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How to Test

Uh oh!

changeset-bot bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for stacks-svelte ready!

Uh oh!

netlify bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for stacks ready!

Uh oh!

mukunku Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

mukunku Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

mukunku Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

mukunku Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

CGuindon left a comment

Choose a reason for hiding this comment

Uh oh!

CGuindon commented Dec 19, 2025

Uh oh!

mukunku commented Jan 7, 2026

Uh oh!

CGuindon left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CGuindon left a comment

Choose a reason for hiding this comment

Uh oh!

mukunku commented Jan 9, 2026

Uh oh!

dancormier left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mukunku commented Dec 19, 2025 •

edited

Loading

changeset-bot bot commented Dec 19, 2025 •

edited

Loading

netlify bot commented Dec 19, 2025 •

edited

Loading

netlify bot commented Dec 19, 2025 •

edited

Loading

CGuindon left a comment •

edited

Loading