Commit a845cf24 authored by Marcia Ramos's avatar Marcia Ramos

Merge branch 'ux-guide-components-modal' into 'master'

Modals in UX guide

See merge request gitlab-org/gitlab-ce!14886
parents 2f644452 8efbba33
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
* [Tables](#tables) * [Tables](#tables)
* [Blocks](#blocks) * [Blocks](#blocks)
* [Panels](#panels) * [Panels](#panels)
* [Dialog modals](#dialog-modals)
* [Alerts](#alerts) * [Alerts](#alerts)
* [Forms](#forms) * [Forms](#forms)
* [Search box](#search-box) * [Search box](#search-box)
...@@ -254,6 +255,38 @@ Skeleton loading can replace any existing UI elements for the period in which th ...@@ -254,6 +255,38 @@ Skeleton loading can replace any existing UI elements for the period in which th
--- ---
## Dialog modals
Dialog modals are only used for having a conversation and confirmation with the user. The user is not able to access the features on the main page until closing the modal.
### Usage
* When the action is irreversible, dialog modals provide the details and confirm with the user before they take an advanced action.
* When the action will affect privacy or authorization, dialog modals provide advanced information and confirm with the user.
### Style
* Dialog modals contain the header, body, and actions.
* **Header(1):** The header title is a question instead of a descriptive phrase.
* **Body(2):** The content in body should never be ambiguous and unclear. It provides specific information.
* **Actions(3):** Contains a affirmative action, a dismissive action, and an extra action. The order of actions from left to right: Dismissive action → Extra action → Affirmative action
* Confirmations regarding labels should keep labeling styling.
* References to commits, branches, and tags should be **monospaced**.
![layout-modal](img/modals-layout-for-modals.png)
### Placement
* Dialog modals should always be the center of the screen horizontally and be positioned **72px** from the top.
| Dialog with 2 actions | Dialog with 3 actions | Special confirmation |
| --------------------- | --------------------- | -------------------- |
| ![two-actions](img/modals-general-confimation-dialog.png) | ![three-actions](img/modals-three-buttons.png) | ![spcial-confirmation](img/modals-special-confimation-dialog.png) |
> TODO: Special case for dialog modal.
---
## Panels ## Panels
> TODO: Catalog how we are currently using panels and rationalize how they relate to alerts > TODO: Catalog how we are currently using panels and rationalize how they relate to alerts
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment