Skip to content

[Toolkit][Shadcn] Add Sonner#3477

Open
makraz wants to merge 2 commits intosymfony:3.xfrom
makraz:feat/toolkit-toast
Open

[Toolkit][Shadcn] Add Sonner#3477
makraz wants to merge 2 commits intosymfony:3.xfrom
makraz:feat/toolkit-toast

Conversation

@makraz
Copy link
Copy Markdown
Contributor

@makraz makraz commented Apr 17, 2026

Q A
Bug fix? no
New feature? yes
Deprecations? no
Documentation? no
Issues Part of #3233
License MIT

Add Sonner component

@makraz makraz requested a review from Kocal as a code owner April 17, 2026 17:31
@carsonbot carsonbot added Feature New Feature Status: Needs Review Needs to be reviewed labels Apr 17, 2026
@carsonbot carsonbot changed the title Add Toast (Sonner) Add Toast (Sonner) Apr 17, 2026
@makraz makraz changed the title Add Toast (Sonner) [Toolkit][Shadcn] Add Toast (Sonner) Apr 17, 2026
@makraz makraz force-pushed the feat/toolkit-toast branch from 86ce6ae to a756085 Compare April 17, 2026 17:59
@makraz makraz changed the title [Toolkit][Shadcn] Add Toast (Sonner) [Toolkit][Shadcn] Add Sonner Apr 18, 2026
@makraz makraz force-pushed the feat/toolkit-toast branch from a04521a to eaf23de Compare April 18, 2026 15:07
@makraz makraz force-pushed the feat/toolkit-toast branch from eaf23de to b4b0fd5 Compare April 18, 2026 15:17
@makraz makraz force-pushed the feat/toolkit-toast branch from d7172da to 1ce0877 Compare April 19, 2026 18:47
const TOAST_BASE =
'group relative flex w-full items-start gap-3 rounded-lg border bg-background p-4 text-foreground shadow-lg transition-[transform,opacity] duration-300 pointer-events-auto absolute left-0 right-0';

const TOAST_RICH_COLORS = {
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.

Since the naming changes to Sonner, could you please adapt this also ?

this.isHovered = false;

this.onToastEvent = (e) => this.#createToast(e.detail || {});
window.addEventListener('toast', this.onToastEvent);
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.

Suggested change
window.addEventListener('toast', this.onToastEvent);
window.addEventListener('sonner', this.onSonnerEvent);

}

disconnect() {
window.removeEventListener('toast', this.onToastEvent);
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.

👍

@zairigimad
Copy link
Copy Markdown
Contributor

It will be great to add a video 🙏🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature New Feature Status: Needs Review Needs to be reviewed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants