Modal
Opened this issue · 3 comments
Modal
A modal is a dialog box that is displayed on top of the current page or another dialog box.
Functionality
→ Appear as a result of user interaction.
→ Used to provide additional information in context.
→ Used when you want to interrupt the user flow to something more important (e.g alertdialog)
→ Used for requesting input from the user.
Best practices
- always give clear exit routes to the user.
- give a descriptive title
- give the action buttons inside the modal clear names
- give context to the modal (it should never occupy the whole screen)
- add a darkened/dimmed layer underneath the modal
- never disrupt the user journey, the modal should be triggered as a result of user interaction with the page, such as a button click.
Implementation
TODO
Examples
https://react-bootstrap.github.io/components/modal/
https://reach.tech/dialog/
https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
https://design.nib.com.au/language/master/#/organism/modal?_k=bezgi3
Accessibility
https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
https://www.w3.org/TR/wai-aria-1.1/#dialog
Resources
https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/
https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
https://www.w3.org/TR/wai-aria-1.1/#dialog
Visuals
Any relevant visuals that help describe the component.Additional context
Anything that does not fit into the other categories.Hey, thanks so much for the submission! This is a great start.
A few notes:
A modal is a dialog box that is displayed on top of the current page or another dialog box.
I've used the word "overlay" previously. What do you think about something like:
Modal is an overlay displayed on top of the current page.
I think that nested modals aren't very common so it might be unnecessary to specify "or another dialog box"
I like the points under best practices! Do you think we could elaborate a bit on some of those points?
For example:
When mentioning clear exit routes, specify what kind of exit routes do we mean? Clicking on the backdrop, a visual close button, and Escape key come to mind at first.
Speaking of descriptive titles, let's add some example use cases and copywriting tips. Something like we have for Notification.
I think we can also take some content from the following resources I've used on Modals:
If you'd like, feel free to start working on the article locally and throw up a pull request whenever you feel ready. We can iterate from there onwards!
Hey! thanks for the tips, I`ll work on the article this weekend :D