wobsoriano/svelte-sonner

class and descriptionClass are not applied since 0.3.8

Closed this issue · 9 comments

kyngs commented

Describe the bug

Since 0.3.8, class and descriptionClass defined in toastOptions are not applied.
Before 0.3.8, this works just fine.

Reproduction

After 0.3.8 -> https://stackblitz.com/edit/sveltejs-kit-template-default-iwms5q?file=src%2Froutes%2F%2Bpage.svelte You can see that it does not work. The class is simply not used.
image

Before 0.3.8 -> https://stackblitz.com/edit/sveltejs-kit-template-default-l21smf?file=src%2Froutes%2F%2Bpage.svelte
The class is applied correctly:
image

Logs

No relevant logs

System Info

System:
    OS: Linux 6.6 Arch Linux
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 41.47 GB / 62.70 GB
    Container: Yes
    Shell: 3.7.0 - /usr/bin/fish
  Binaries:
    Node: 18.18.2 - /usr/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.2.5 - /usr/bin/npm
    pnpm: 8.14.0 - /usr/bin/pnpm
    bun: 1.0.18 - /usr/bin/bun
  Browsers:
    Chromium: 120.0.6099.199
  npmPackages:
    @sveltejs/kit: ^1.20.4 => 1.30.3 
    svelte: ^4.0.5 => 4.2.8 
    svelte-sonner: ^0.3.0 => 0.3.11

Severity

blocking an upgrade

wobsoriano commented

Looks like the rewrite PR added a new property to the toastOptions named classes that accepts the toast and description class:

<Toaster
	toastOptions={{ classes: { toast: 'some-class', description: 'other-class' } }}
/>

I'll check why I missed that, thanks!

kyngs commented

Looks like the rewrite PR added a new property to the toastOptions named classes that accepts the toast and description class:

<Toaster
	toastOptions={{ classes: { toast: 'some-class', description: 'other-class' } }}
/>

I'll check why I missed that, thanks!

I think I've tried that one and it didn't work either? I remember that the one that you can use to style warning, error and other toasts separately worked. But I didn't want to specify it for each toast type

kyngs commented

Oh well that was fast, I'll check it out when a new release gets pushed

wobsoriano commented

@kyngs new release is available. Feel free to reopen this issue!

  • 👍1
kyngs commented

Yup, the release seems to have fixed that. However, where is descriptionClass supposed to apply?

kyngs commented

(I thought it was supposed to apply on the text, but that does not seem to be the case: https://stackblitz.com/edit/sveltejs-kit-template-default-2mnnam?file=src%2Froutes%2F%2Bpage.svelte)

wobsoriano commented

Oh, you want to apply it to the title instead:

<Toaster richColors toastOptions="{{
   duration: 500000,
   classes: { title:  'my-toast' } 
}}"/>
kyngs commented

Oh, you want to apply it to the title instead:

<Toaster richColors toastOptions="{{
   duration: 500000,
   classes: { title:  'my-toast' } 
}}"/>

Ahhh, I did not know that the toast can have a description, so I kinda assumed it was the title. Thanks for the explanation!

wobsoriano commented

Honestly the docs might need some updating so mb 😆

You can check the styling section as well - https://github.com/wobsoriano/svelte-sonner#styling

  • 👍1