Add info variant to toast component

[ghabriel25]

Currently, there are 3 variants for toast (success, warning, and danger) but there is no info variant for case like updating resources.

This PR adds new info variant icon to toast component

Dark mode

Light mode

The icon is from https://heroicons.com/micro and adjusted like danger variant with coloring text-cyan-500 dark:text-cyan-400

[hebbet]

i don't think an exclamation mark is the right symbol for info.

i would use information-circle

[ghabriel25]

@hebbet First thought yes but after seeing the actual icon from website

Where all icon used by toast is micro variant, this one feels too tiny and I can barely know what icon is that.

However, I'm happy to change it to information-circle.

[ganyicz]

Thanks @ghabriel25

Looks good to me! But I would definitely go with the info icon instead. Also can you just double-check if cyan is the right color choice here? Do we have any other "info" variant of a component or anything neutral we use blue-ish color for? Just to make sure we're consistent

[ghabriel25]

Hi, @ganyicz

I can't find any component that use info variant but callout component use secondary variant along with information-circle icon.

Let me know about variant name whether it should be info or align with secondary variant of callout.

[ganyicz]

Ugh, that's unfortunate. I don't think secondary works for the toast as there is no primary variant to begin with. The inconsistency is a bit of a turn off.

Let's keep it as info, please update the screenshots in the PR with the correct icon.

I'll leave it for @calebporzio to decide.

[ganyicz]

Also this just made me realize, the default variant with no icon is kind of the "info" variant.

Can you share how you would want to use this in your app and why isn't the default variant sufficient?

[ghabriel25]

For my case, I use toast variants for different message based on action. For example

• Create a post (success)
• Validation error (danger)
• Updating resources with race condition (warning if locked)
• Changing the visibility status from public to private (info)

All of them use session key (based on variant) which I want it consistent (using icon)

[ghabriel25]

@calebporzio Thanks!