[toast] Create new Toast component#1467
Conversation
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
afa920e to
62be009
Compare
| let counter = 0; | ||
| export function generateId(prefix: string) { | ||
| counter += 1; | ||
| return `${prefix}-${Math.random().toString(36).slice(2, 6)}-${counter}`; |
There was a problem hiding this comment.
Wouldn't ${prefix}-${counter} alone be enough?
There was a problem hiding this comment.
Not with multiple independent versions of the library being used (e.g. extensions)
There was a problem hiding this comment.
I'm trying to play with the toast using just this page as a reference and I feel having a section about swiping and animating the toast position could be useful.
I found out that not having user-select: none on the toast can make the swipe interaction weirdly sticky - it's also something to underline in the docs (or fix if possible)
There was a problem hiding this comment.
I think user-select: none added to the examples is fine - it should be obvious that you don't want text selection while swiping. I added docs about stacking & animations though as that gets complex.
| } | ||
| ``` | ||
|
|
||
| The `title` and `description` strings are what are used to announce the toast to screen readers. Screen readers do not announce any extra content rendered inside `Toast.Root`, including the `Toast.Title` or `Toast.Description` components. |
There was a problem hiding this comment.
It would be convenient if these strings could be used as the default children of the Title/Description components so they can be used like <Toast.Title /> (like our *.Value) components, though I'm not sure if it's very unusual for components called Title/Description to not require children 🤔
There was a problem hiding this comment.
Since <Field.Error> and <Select.Value> both do this I think it's consistent actually
| setTimeout(() => resolve('world!'), 1000); | ||
| }), | ||
| { | ||
| // Each are a shortcut for the children of `Toast.Description` |
There was a problem hiding this comment.
Isn't this the strings and not the children?
Closes #220
Preview: https://deploy-preview-1467--base-ui.netlify.app/react/components/toast
Toastinterface/props APIs/placeholder code