Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-19 11:11:21 -05:00
Code Issues Activity

📚 Add documentation for toast*

Browse source
This commit is contained in:
Belén Albeza 2024-08-08 14:12:28 +02:00
parent 9455b56c07
commit 604f80de20
2 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/ds/buttons/buttons.mdx
View file

@ -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
View 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.