diff options
author | Marcia Ramos <virtua.creative@gmail.com> | 2017-11-08 03:51:58 +0300 |
---|---|---|
committer | Marcia Ramos <virtua.creative@gmail.com> | 2017-11-08 03:51:58 +0300 |
commit | a845cf24ad1c0f5f26cb5b57e2d09c71637af0a3 (patch) | |
tree | a87e316bd8cd27e567607058be219c3c05200530 /doc/development/ux_guide | |
parent | 2f644452523cd7f30bf61d15a88e1aab5d818a48 (diff) | |
parent | 8efbba33852d57c08507cbe3a1654dd9de9dae73 (diff) |
Merge branch 'ux-guide-components-modal' into 'master'
Modals in UX guide
See merge request gitlab-org/gitlab-ce!14886
Diffstat (limited to 'doc/development/ux_guide')
-rw-r--r-- | doc/development/ux_guide/components.md | 33 | ||||
-rw-r--r-- | doc/development/ux_guide/img/modals-general-confimation-dialog.png | bin | 0 -> 51205 bytes | |||
-rw-r--r-- | doc/development/ux_guide/img/modals-layout-for-modals.png | bin | 0 -> 68203 bytes | |||
-rw-r--r-- | doc/development/ux_guide/img/modals-special-confimation-dialog.png | bin | 0 -> 89978 bytes | |||
-rw-r--r-- | doc/development/ux_guide/img/modals-three-buttons.png | bin | 0 -> 54927 bytes |
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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew file mode 100644 index 00000000000..519439e64e4 --- /dev/null +++ b/doc/development/ux_guide/img/modals-three-buttons.png |