feat: toast #3704
feat: toast #3704
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@Hugos68 updated with the latest changes on Also, this is lacking a changeset. |
|
|
||
| export const classesToast = defineSkeletonClasses({ | ||
| root: [ | ||
| 'relative p-4 border-1 rounded-container min-w-sm', |
There was a problem hiding this comment.
A few style adjustments:
- Prepend
cardand removerounded-container p-4->p-3to provide a slimmer profilering ring-inset ring-surface-200-800for the outlinespreset-filled-surface-50-950for the fill
Additionally, we need some kind of width control. I'm thinking min-w-* is probably the wrong approach. Consider dropping that in favor of something responsive like Shadcn:
w-full md:w-md
NOTE: just make sure it doesn't touch the edges of the screen on mobile. If so, we need a padding on the wrapping element.
Let me know if you would like me to implement these changes.
| 'border-surface-200-800 data-[type=success]:border-success-200-800 data-[type=error]:border-error-200-800' | ||
| ], | ||
| group: '', | ||
| title: 'h4', |
There was a problem hiding this comment.
Let's go ahead and opt for font-medium or font-bold instead of h4. I'd like to keep the slim/sleek design similar to Shadcn:
If the title is one of those parts that Zag forces to be a H1-6, then let's discuss our options. Ephemeral interfaces like Toasts can't really follow the heading order for a11y, so it's nearly impossible to set a default. Given this, I think this would be better to forego the heading in favor of <p class="font-medium">
| title: 'h4', | ||
| description: '', | ||
| actionTrigger: '', | ||
| closeTrigger: 'absolute top-1/2 -translate-y-1/2 right-4 btn-icon hover:preset-tonal' |
There was a problem hiding this comment.
This works, but it's a bit messy. Zag's markup doesn't given us a proper option to fix this, so we may need to introduce a new custom element to wrap the text message. That'll allow us to do this:
Tailwind Playground:
https://play.tailwindcss.com/bfXTpqgqd9
This will also make it for users to implement leading icons on the far left of the flex-row.
|
|
||
| <button | ||
| class="btn preset-filled" | ||
| onclick={() => toaster.info({ title: 'Title', description: 'The value of foo is:', meta: { foo: 'bar' } })} |
There was a problem hiding this comment.
Can we wrap the inner object for readability; for both frameworks.
It's always helpful to show a practical example. Consider using this to showcase the template configuration per the discussion on Discord earlier. Examples layout ideas:
- With/without icons
- Rearranged the template order (ex: action first)
- Some kind of high styled variation outside of default/error/success (ex: warning)
| @@ -0,0 +1,75 @@ | |||
| --- | |||
There was a problem hiding this comment.
We need to explain that this works as a singleton. That the component should be configured at the broadest scope you can (ex: root +layout.svelte for SvelteKit). Then can be called on demand throughout the app.
| @@ -0,0 +1,75 @@ | |||
| --- | |||
| layout: '@layouts/LayoutDoc.astro' | |||
There was a problem hiding this comment.
We're also missing examples for:
- Action button
- Success/Error - See the v3 docs for inspiration.
Linked Issue
Closes #3648
Description
Implements the Toast component for React and Svelte
Checklist
Please read and apply all contribution requirements.
docs/,feature/,chore/,bugfix/mainbranchpnpm checkin the root of the monorepopnpm formatin the root of the monorepopnpm lintin the root of the monorepopnpm testin the root of the monorepo/packageprojects, please supply a ChangesetChangesets
View our documentation to learn more about Changesets. To create a Changeset:
pnpm changesetand follow the prompts