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

Modals in UX guide

See merge request gitlab-org/gitlab-ce!14886

5 files changed, 33 insertions, 0 deletions

diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md
index fa31c496b30..16a811dbc74 100644
--- a/doc/development/ux_guide/components.md
+++ b/doc/development/ux_guide/components.md
@@ -10,6 +10,7 @@
 * [Tables](#tables)
 * [Blocks](#blocks)
 * [Panels](#panels)
+* [Dialog modals](#dialog-modals)
 * [Alerts](#alerts)
 * [Forms](#forms)
 * [Search box](#search-box)
@@ -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
 
 > TODO: Catalog how we are currently using panels and rationalize how they relate to alerts
diff --git a/doc/development/ux_guide/img/modals-general-confimation-dialog.png b/doc/development/ux_guide/img/modals-general-confimation-dialog.png
new file mode 100644
index 00000000000..00a17374a0b
--- /dev/null
+++ b/doc/development/ux_guide/img/modals-general-confimation-dialog.png
diff --git a/doc/development/ux_guide/img/modals-layout-for-modals.png b/doc/development/ux_guide/img/modals-layout-for-modals.png
new file mode 100644
index 00000000000..6c7bc09e750
--- /dev/null
+++ b/doc/development/ux_guide/img/modals-layout-for-modals.png
diff --git a/doc/development/ux_guide/img/modals-special-confimation-dialog.png b/doc/development/ux_guide/img/modals-special-confimation-dialog.png
new file mode 100644
index 00000000000..bf1e56326c5
--- /dev/null
+++ b/doc/development/ux_guide/img/modals-special-confimation-dialog.png
diff --git a/doc/development/ux_guide/img/modals-three-buttons.png b/doc/development/ux_guide/img/modals-three-buttons.png
new file mode 100644
index 00000000000..519439e64e4
--- /dev/null
+++ b/doc/development/ux_guide/img/modals-three-buttons.png