26af4d951a
* update Modal to add sheet variant * dont use prompt title for modal sheet stories, to better reflect intended purpose * Apply suggestions from code review Co-authored-by: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com> Co-authored-by: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com>
69 lines
2.4 KiB
Text
69 lines
2.4 KiB
Text
# Modals
|
|
|
|
Modals should be positioned centered in relation to entire viewport. So relation
|
|
to its trigger doesn't really matter.
|
|
|
|
Use your best judgements when choosing the right size.
|
|
|
|
## Sizes
|
|
|
|
We have 3 possible sizes to use:
|
|
|
|
- Small - 480px - for displaying small amount of data/text.
|
|
- Medium - 640px (this is default one) - you will probably want to use this one in most cases.
|
|
- Large - 768px - use for long and/or complex content.
|
|
|
|
## Sheets
|
|
|
|
Sheets are a special variant of the modal, which will occupy the full height of the screen. Sheets may also be anchored to the left or right side of the page by using the `sheetAlign` prop.
|
|
|
|
## Prompts
|
|
|
|
Classic modals excluded, you can also use the `prompt` style (prop) to apply _special styling_.
|
|
It will work best with really short messages or some sort of confirmation prompts, for example:
|
|
|
|
> Are you sure you want to remove Ben's account?
|
|
>
|
|
> [YES] [NO]
|
|
|
|
The "special styling" means it will:
|
|
|
|
- always use Small (480px) size,
|
|
- remove the divider between title and content so it all looks more like a one message.
|
|
|
|
### Centered prompt
|
|
|
|
Some prompts may visually benefit from centering the content.
|
|
Leave the decision to designers but keep in mind this is possible with `centered` prop
|
|
(and it will only work in combination with `prompt`).
|
|
|
|
## Backdrop
|
|
|
|
By default, Modals come with a dark backdrop (a layer overlaying underlaying content).
|
|
It is possible to not show it but it should be used in some very rare scenarios, when underlaying
|
|
content might still be important as additional context.
|
|
|
|
Because of having that backdrop is a "good default", you should use `noBackdrop` prop cerfaully,
|
|
ideally after consulting with your desinger.
|
|
|
|
## Modal accessibility
|
|
|
|
The Preact Modal component utilises the `focus-trap` library to ensure that:
|
|
|
|
- When the modal is opened, focus is transferred to the first interactive item
|
|
in that modal
|
|
- When the modal is closed, focus is transferred back to the button that
|
|
activated the modal
|
|
- While the modal is open, focus is trapped inside so that when a user presses
|
|
the Tab key, interactive items behind the modal are not focused
|
|
- When the modal is open, pressing the Escape key will close it
|
|
|
|
## Design
|
|
|
|
<iframe
|
|
style="border: 1px solid rgba(0, 0, 0, 0.1);"
|
|
width="100%"
|
|
height="450"
|
|
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FgHpwugeu9jFGW4d9u3ReuR%2FCrayons%3Fnode-id%3D456%253A215"
|
|
allowfullscreen
|
|
></iframe>
|