Skip to content

feat(notice): support custom icons - #2419

Merged
asblanco merged 5 commits into
mainfrom
STACKS-931/notice-icon-override
Oct 1, 2026
Merged

asblanco merged 5 commits into
mainfrom
STACKS-931/notice-icon-override

Conversation

@dancormier

@dancormier dancormier commented Sep 28, 2026 •

Copy link
Copy Markdown
Contributor

https://stackoverflow.atlassian.net/browse/STACKS-931

Summary

Allow neutral notices to use an information icon without recreating the component’s markup or dismissal behavior. An optional icon prop overrides the icon independently of variant, while existing callers retain their default icons, titles, and styling.

Changes

  • Add a trusted SVG-string icon prop, consistent with other Stacks Svelte components.
  • Custom icons use iconTitle when supplied and are decorative otherwise, without inheriting the variant’s title.
  • Add a neutral information-icon Storybook example and three focused tests; strengthen existing default-icon and dismissal assertions.
  • Include a minor changeset for @stackoverflow/stacks-svelte. No Toast API, Classic CSS, or dependency changes.

How to test

  1. From the repository root, run npm run storybook -w packages/stacks-svelte. Dependencies must be installed.
  2. Open http://localhost:6006/?path=/story/components-notice--custom-icon. Expect a neutral grey notice with an information icon, without blue info styling. Compare the Base and Variants stories to confirm their existing presentations.
  3. Open the Dismissible story, focus its dismiss button, and press Enter. Close the demo alert; the notice should disappear. Confirm the Actions story’s button still works.
  4. Run npm run lint -w packages/stacks-svelte, npm run build -w packages/stacks-svelte, and npm run test -w packages/stacks-svelte.

Latest verification: all 11 Notice tests, including an automated accessibility check, pass. Lint/type checks, formatting, and diff checks pass. Before the test-only reduction, the full Svelte suite passed with 602 browser tests and 29 tooling tests; package and Storybook builds also passed. The full suite was not rerun after reducing the tests.

Local visual review completed. Manual screen-reader verification remains outstanding.

Netlify Storybook preview — Custom icon

Success criteria

  • Notice accepts an optional SVG-string icon prop.
  • A neutral notice can display IconInfo without receiving info-variant styling.
  • An icon override works independently of variant; existing icons, titles, and styling remain unchanged when omitted.
  • Custom icons use iconTitle when supplied and are decorative otherwise, without inheriting the variant’s default title.
  • Notice role, actions, and dismissal behavior remain intact.
  • Automated tests cover defaults, overrides, accessible-title behavior, and dismissal with a custom icon.
  • Storybook documents the override and includes a neutral information-icon example.
  • A minor changeset is included for @stackoverflow/stacks-svelte.

Screenshots

image

@changeset-bot

changeset-bot Bot commented Sep 28, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b97478b

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

This PR includes changesets to release 1 package
Name Type
@stackoverflow/stacks-svelte Minor

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

netlify Bot commented Sep 28, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for stacks ready!

Name Link
🔨 Latest commit b97478b
🔍 Latest deploy log https://app.netlify.com/projects/stacks/deploys/6abe2f089d6fd10008be0a51
😎 Deploy Preview https://deploy-preview-2419--stacks.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@netlify

netlify Bot commented Sep 28, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for stackoverflow-email ready!

Name Link
🔨 Latest commit b97478b
🔍 Latest deploy log https://app.netlify.com/projects/stackoverflow-email/deploys/6abe2f08de0e1800081915b4
😎 Deploy Preview https://deploy-preview-2419--stackoverflow-email.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@netlify

netlify Bot commented Sep 28, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for stacks-svelte ready!

Name Link
🔨 Latest commit b97478b
🔍 Latest deploy log https://app.netlify.com/projects/stacks-svelte/deploys/6abe2f0814025e0008fd23f2
😎 Deploy Preview https://deploy-preview-2419--stacks-svelte.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@dancormier
dancormier marked this pull request as ready for review September 28, 2026 17:23
@dancormier
dancormier requested a review from a team as a code owner September 28, 2026 17:23
asblanco
asblanco previously approved these changes Oct 1, 2026

@asblanco asblanco left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I just added the possibility to set icon on the Custom icon storybook case

@asblanco
asblanco enabled auto-merge (squash) October 1, 2026 09:54
@asblanco
asblanco disabled auto-merge October 1, 2026 10:07
@asblanco
asblanco merged commit 416a16a into main Oct 1, 2026
32 checks passed
@asblanco
asblanco deleted the STACKS-931/notice-icon-override branch October 1, 2026 10:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants