search

raunofreiberg / ui-playbook

The documented collection of UI components 🤓
https://uiplaybook.dev
MIT License
1.37k stars 73 forks source link

Modal #25

Open weigelcinthya opened 3 years ago

weigelcinthya commented 3 years ago

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

  1. always give clear exit routes to the user.
  2. give a descriptive title
  3. give the action buttons inside the modal clear names
  4. give context to the modal (it should never occupy the whole screen)
  5. add a darkened/dimmed layer underneath the modal
  6. 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.
raunofreiberg commented 3 years ago

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:

raunofreiberg commented 3 years ago

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!

weigelcinthya commented 3 years ago

Hey! thanks for the tips, I`ll work on the article this weekend :D