diff options
Diffstat (limited to 'doc/development/ux_guide/components.md')
| -rw-r--r-- | doc/development/ux_guide/components.md | 30 |
1 files changed, 1 insertions, 29 deletions
diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 6b21566265c..764c3355714 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -17,8 +17,6 @@ --- -<br> - ## Tooltips ### Usage @@ -33,8 +31,6 @@ By default, tooltips should be placed below the element that they refer to. Howe --- -<br> - ## Anchor links Anchor links are used for navigational actions and lone, secondary commands (such as 'Reset filters' on the Issues List) when deemed appropriate by the UX team. @@ -57,8 +53,6 @@ The focus state should match the hover state. --- -<br> - ## Buttons Buttons communicate the command that will occur when the user clicks on them. @@ -87,8 +81,6 @@ Follow the color guidance on the [basics](basics.md#color) page. The default col --- -<br> - ## Dropdowns Dropdowns are used to allow users to choose one (or many) options from a list of options. If this list of options is more 20, there should generally be a way to search through and filter the options (see the complex filter dropdowns below.) @@ -103,8 +95,6 @@ TODO: Will update this section when the new filters UI is implemented. --- -<br> - ## Counts A count element is used in navigation contexts where it is helpful to indicate the count, or number of items, in a list. Always use the [`number_with_delimiter`][number_with_delimiter] helper to display counts in the UI. @@ -115,8 +105,6 @@ A count element is used in navigation contexts where it is helpful to indicate t --- -<br> - ## Lists Lists are used where ever there is a single column of information to display. Ths [issues list](https://gitlab.com/gitlab-org/gitlab-ce/issues) is an example of a important list in the GitLab UI. @@ -141,8 +129,6 @@ List inside panel --- -<br> - ## Tables When the information is too complex for a list, with multiple columns of information, a table can be used. For example, the [pipelines page](https://gitlab.com/gitlab-org/gitlab-ce/pipelines) uses a table. @@ -151,8 +137,6 @@ When the information is too complex for a list, with multiple columns of informa --- -<br> - ## Blocks Blocks are a way to group related information. @@ -178,8 +162,6 @@ Cover blocks are generally used to create a heading element for a page, such as --- -<br> - ## Panels >>> @@ -190,8 +172,6 @@ TODO: Catalog how we are currently using panels and rationalize how they relate --- -<br> - ## Alerts >>> @@ -202,8 +182,6 @@ TODO: Catalog how we are currently using alerts --- -<br> - ## Forms There are two options shown below regarding the positioning of labels in forms. Both are options to consider based on context and available size. However, it is important to have a consistent treatment of labels in the same form. @@ -224,8 +202,6 @@ Horizontal form (`form.horizontal-form`) with label rendered inline with input. --- -<br> - ## File holders A file holder (`.file-holder`) is used to show the contents of a file inline on a page of GitLab. @@ -233,8 +209,6 @@ A file holder (`.file-holder`) is used to show the contents of a file inline on --- -<br> - ## Data formats ### Dates @@ -277,6 +251,4 @@ Referencing GitLab items depends on a symbol for each type of item. Typing that  ->>> -Open issue: Some commit references use monospace fonts, but others don't. Need to standardize this. ->>> +> TODO: Open issue: Some commit references use monospace fonts, but others don't. Need to standardize this. |