mirror of
https://gitlab.com/gitlab-org/gitlab-foss.git
synced 2025-08-15 21:39:00 +00:00
Update UX guide
This commit is contained in:
Winnie Hellmann
@ -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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -46,11 +46,11 @@ Avoid using periods in solitary sentences in these elements:
|
||||
* Labels
|
||||
* Hover text
|
||||
* Bulleted lists
|
||||
* Dialog body text
|
||||
* Modal body text
|
||||
|
||||
Periods should be used for:
|
||||
|
||||
* Lists or dialogs with multiple sentences
|
||||
* Lists or modals with multiple sentences
|
||||
* Any sentence followed by a link
|
||||
|
||||
| :white_check_mark: **Do** place periods after sentences followed by a link | :no_entry_sign: **Don’t** place periods after a link if it‘s not followed by a sentence |
|
||||
@ -80,7 +80,7 @@ Omit punctuation after phrases and labels to create a cleaner and more readable
|
||||
|
||||
| Punctuation mark | Copy and paste | HTML entity | Unicode | Mac shortcut | Windows shortcut | Description |
|
||||
|---|---|---|---|---|---|---|
|
||||
| Period | **.** | | | | | Omit for single sentences in affordances like labels, hover text, bulleted lists, and dialog body text.<br><br>Use in lists or dialogs with multiple sentences, and any sentence followed by a link or inline code.<br><br>Place inside quotation marks unless you’re telling the reader what to enter and it’s ambiguous whether to include the period. |
|
||||
| Period | **.** | | | | | Omit for single sentences in affordances like labels, hover text, bulleted lists, and modal body text.<br><br>Use in lists or modals with multiple sentences, and any sentence followed by a link or inline code.<br><br>Place inside quotation marks unless you’re telling the reader what to enter and it’s ambiguous whether to include the period. |
|
||||
| Comma | **,** | | | | | Place inside quotation marks.<br><br>Use a [serial comma][serial comma] in lists of three or more terms. |
|
||||
| Exclamation point | **!** | | | | | Avoid exclamation points as they tend to come across as shouting. Some exceptions include greetings or congratulatory messages. |
|
||||
| Colon | **:** | `:` | `\u003A` | | | Omit from labels, for example, in the labels for fields in a form. |
|
||||
@ -88,7 +88,7 @@ Omit punctuation after phrases and labels to create a cleaner and more readable
|
||||
| Quotation marks | **“**<br><br>**”**<br><br>**‘**<br><br>**’** | `“`<br><br>`”`<br><br>`‘`<br><br>`’` | `\u201C`<br><br>`\u201D`<br><br>`\u2018`<br><br>`\u2019` | <kbd>⌥ Option</kbd>+<kbd>[</kbd><br><br><kbd>⌥ Option</kbd>+<kbd>⇧ Shift</kbd>+<kbd>[</kbd><br><br><kbd>⌥ Option</kbd>+<kbd>]</kbd><br><br><kbd>⌥ Option</kbd>+<kbd>⇧ Shift</kbd>+<kbd>]</kbd> | <kbd>Alt</kbd>+<kbd>0 1 4 7</kbd><br><br><kbd>Alt</kbd>+<kbd>0 1 4 8</kbd><br><br><kbd>Alt</kbd>+<kbd>0 1 4 5</kbd><br><br><kbd>Alt</kbd>+<kbd>0 1 4 6</kbd> | Use proper quotation marks (also known as smart quotes, curly quotes, or typographer’s quotes) for quotes. Single quotation marks are used for quotes inside of quotes.<br><br>The right single quotation mark symbol is also used for apostrophes.<br><br>Don’t use primes, straight quotes, or free-standing accents for quotation marks. |
|
||||
| Primes | **′**<br><br>**″** | `′`<br><br>`″` | `\u2032`<br><br>`\u2033` | | <kbd>Alt</kbd>+<kbd>8 2 4 2</kbd><br><br><kbd>Alt</kbd>+<kbd>8 2 4 3</kbd> | Use prime (′) only in abbreviations for feet, arcminutes, and minutes: 3° 15′<br><br>Use double-prime (″) only in abbreviations for inches, arcseconds, and seconds: 3° 15′ 35″<br><br>Don’t use quotation marks, straight quotes, or free-standing accents for primes. |
|
||||
| Straight quotes and accents | **"**<br><br>**'**<br><br>**`**<br><br>**´** | `"`<br><br>`'`<br><br>```<br><br>`´` | `\u0022`<br><br>`\u0027`<br><br>`\u0060`<br><br>`\u00B4` | | | Don’t use straight quotes or free-standing accents for primes or quotation marks.<br><br>Proper typography never uses straight quotes. They are left over from the age of typewriters and their only modern use is for code. |
|
||||
| Ellipsis | **…** | `…` | | <kbd>⌥ Option</kbd>+<kbd>;</kbd> | <kbd>Alt</kbd>+<kbd>0 1 3 3</kbd> | Use to indicate an action in progress (“Downloading…”) or incomplete or truncated text. No space before the ellipsis.<br><br>Omit from menu items or buttons that open a dialog or start some other process. |
|
||||
| Ellipsis | **…** | `…` | | <kbd>⌥ Option</kbd>+<kbd>;</kbd> | <kbd>Alt</kbd>+<kbd>0 1 3 3</kbd> | Use to indicate an action in progress (“Downloading…”) or incomplete or truncated text. No space before the ellipsis.<br><br>Omit from menu items or buttons that open a modal or start some other process. |
|
||||
| Chevrons | **«**<br><br>**»**<br><br>**‹**<br><br>**›**<br><br>**<**<br><br>**>** | `«`<br><br>`»`<br><br>`‹`<br><br>`›`<br><br>`<`<br><br>`>` | `\u00AB`<br><br>`\u00BB`<br><br>`\u2039`<br><br>`\u203A`<br><br>`\u003C`<br><br>`\u003E`<br><br> | | | Omit from links or buttons that open another page or move to the next or previous step in a process. Also known as angle brackets, angular quote brackets, or guillemets. |
|
||||
| Em dash | **—** | `—` | `\u2014` | <kbd>⌥ Option</kbd>+<kbd>⇧ Shift</kbd>+<kbd>-</kbd> | <kbd>Alt</kbd>+<kbd>0 1 5 1</kbd> | Avoid using dashes to separate text. If you must use dashes for this purpose — like this — use an em dash surrounded by spaces. |
|
||||
| En dash | **–** | `–` | `\u2013` | <kbd>⌥ Option</kbd>+<kbd>-</kbd> | <kbd>Alt</kbd>+<kbd>0 1 5 0</kbd> | Use an en dash without spaces instead of a hyphen to indicate a range of values, such as numbers, times, and dates: “3–5 kg”, “8:00 AM–12:30 PM”, “10–17 Jan” |
|
||||
@ -175,7 +175,7 @@ A **comment** is a written piece of text that users of GitLab can create. Commen
|
||||
#### Discussion
|
||||
A **discussion** is a group of 1 or more comments. A discussion can include subdiscussions. Some discussions have the special capability of being able to be **resolved**. Both the comments in the discussion and the discussion itself can be resolved.
|
||||
|
||||
## Confirmation dialogs
|
||||
## Modals
|
||||
|
||||
- Destruction buttons should be clear and always say what they are destroying.
|
||||
E.g., `Delete page` instead of just `Delete`.
|
||||
@ -184,6 +184,8 @@ A **discussion** is a group of 1 or more comments. A discussion can include subd
|
||||
- Avoid the word `cancel` or `canceled` in the descriptive copy. It can be
|
||||
confusing when you then see the `Cancel` button.
|
||||
|
||||
see also: guidelines for [modal components](components.md#modals)
|
||||
|
||||
---
|
||||
|
||||
Portions of this page are modifications based on work created and shared by the [Android Open Source Project][android project] and used according to terms described in the [Creative Commons 2.5 Attribution License][creative commons].
|
||||
|
||||
Reference in New Issue
Block a user