diff options
| author | Winnie Hellmann <winnie@gitlab.com> | 2017-12-11 20:50:24 +0100 |
|---|---|---|
| committer | Winnie Hellmann <winnie@gitlab.com> | 2017-12-12 13:07:03 +0100 |
| commit | 16a8a594f42f4d1f74dab21656ab98e7f9204fd7 (patch) | |
| tree | 2929feb666c2dcbab46ac500f61e7c3f1c542e5a /doc/development/ux_guide/components.md | |
| parent | d5d2d7b2e007e7d1c8675e07cb198bec9b31b962 (diff) | |
| download | gitlab-ce-winh-unify-modals.tar.gz | |
Update UX guidewinh-unify-modals
Diffstat (limited to 'doc/development/ux_guide/components.md')
| -rw-r--r-- | doc/development/ux_guide/components.md | 18 |
1 files changed, 9 insertions, 9 deletions
diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 16a811dbc74..d396964e7c1 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -10,7 +10,7 @@ * [Tables](#tables) * [Blocks](#blocks) * [Panels](#panels) -* [Dialog modals](#dialog-modals) +* [Modals](#modals) * [Alerts](#alerts) * [Forms](#forms) * [Search box](#search-box) @@ -255,18 +255,18 @@ Skeleton loading can replace any existing UI elements for the period in which th --- -## Dialog modals +## 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. +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. +* When the action is irreversible, modals provide the details and confirm with the user before they take an advanced action. +* When the action will affect privacy or authorization, modals provide advanced information and confirm with the user. ### Style -* Dialog modals contain the header, body, and actions. +* 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 @@ -277,13 +277,13 @@ Dialog modals are only used for having a conversation and confirmation with the ### Placement -* Dialog modals should always be the center of the screen horizontally and be positioned **72px** from the top. +* 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 | +| Modal with 2 actions | Modal with 3 actions | Special confirmation | | --------------------- | --------------------- | -------------------- | |  |  |  | -> TODO: Special case for dialog modal. +> TODO: Special case for modal. --- |