mirror of
https://github.com/penpot/penpot.git
synced 2025-03-18 10:41:29 -05:00
📚 Add documentation for toast*
This commit is contained in:
parent
9455b56c07
commit
604f80de20
2 changed files with 44 additions and 1 deletions
|
@ -2,7 +2,7 @@ import { Canvas, Meta } from '@storybook/blocks';
|
|||
import * as ButtonStories from "./button.stories";
|
||||
import * as IconButtonStories from "./icon_button.stories";
|
||||
|
||||
<Meta title="Buttons/Buttons" />
|
||||
<Meta title="Buttons/Docs" />
|
||||
|
||||
# Buttons
|
||||
|
||||
|
|
43
frontend/src/app/main/ui/ds/notifications/notifications.mdx
Normal file
43
frontend/src/app/main/ui/ds/notifications/notifications.mdx
Normal file
|
@ -0,0 +1,43 @@
|
|||
import { Canvas, Meta } from '@storybook/blocks';
|
||||
import * as ToastStories from "./toast.stories";
|
||||
|
||||
<Meta title="Notifications/Docs" />
|
||||
|
||||
# Notifications
|
||||
|
||||
`toast*` and `context-notification` accept a `level` prop to indicate the type of message. If this prop is `nil`,
|
||||
the default variant will be shown:
|
||||
|
||||
<Canvas of={ToastStories.Default} />
|
||||
|
||||
Info:
|
||||
|
||||
<Canvas of={ToastStories.Info} />
|
||||
|
||||
Warning:
|
||||
|
||||
<Canvas of={ToastStories.Warning} />
|
||||
|
||||
Error:
|
||||
|
||||
<Canvas of={ToastStories.Error} />
|
||||
|
||||
Success:
|
||||
|
||||
<Canvas of={ToastStories.Success} />
|
||||
|
||||
## Toasts
|
||||
|
||||
Toast notifications are temporary floating elements that provide information
|
||||
that requires user acknowledgement.
|
||||
|
||||
### Usage guidelines (design)
|
||||
|
||||
#### Where to use
|
||||
|
||||
Displayed in the top right corner of the page, in absolute position.
|
||||
|
||||
#### When to use
|
||||
|
||||
When the notification is temporary and is related or affects the whole context
|
||||
of the page the user is viewing or interacting with.
|
Loading…
Add table
Reference in a new issue