CHANGELOG.md

+## [1.54.1](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/compare/v1.54.0...v1.54.1) (2020-11-04)
+
+
+### Bug Fixes
+
+* **naming:** Use singular naming format for consistency ([04552d7](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/04552d702e45392ab0b2d0661d6262c3fdf8013b))
+
 # [1.54.0](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/compare/v1.53.0...v1.54.0) (2020-11-03)
 
 

contents/components/accordion.md

@@ -3,7 +3,7 @@ name: Accordion
 figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit?node-id=425%3A0
 docs: in-progress
 related:
-- modals
+- modal
 - tree
 - tabs
 ---
@@ -54,7 +54,7 @@ The affordance of the chevron means that additional information can be found "un
 
 ### Header
 
-Just like [modals](/components/modals/), the header of an accordion could be a question or a title. Either way, headers should give context about the underlying content in a concise and actionable way. Examples of headers can be "What can GitLab offer me?", or "More options".
+Just like [modals](/components/modal/), the header of an accordion could be a question or a title. Either way, headers should give context about the underlying content in a concise and actionable way. Examples of headers can be "What can GitLab offer me?", or "More options".
 
 ### Body
 

contents/components/alert.md

@@ -6,11 +6,11 @@ vueComponents:
   - GlAlert
 related:
   - broadcast-message
-  - forms
+  - form
   - toast
 ---
 
-Alerts allow the application to pass along relevant system information to the user without impeding their journey. Alerts are system generated and may or may not be derived by a user's action. They are not [validation](https://design.gitlab.com/components/forms#validation) error messages, nor are they feedback notifications after the user takes action — see [toasts](https://design.gitlab.com/components/toast) for more information.
+Alerts allow the application to pass along relevant system information to the user without impeding their journey. Alerts are system generated and may or may not be derived by a user's action. They are not [validation](/components/form#validation) error messages, nor are they feedback notifications after the user takes action — see [toasts](/components/toast) for more information.
 
 ## Usage
 
@@ -79,7 +79,7 @@ There are times when using an alternative component other than an alert is neces
 | Component | Use case | Example | Why an alert was not used |
 | ---- | ---- | ---- | ---- |
 | [Broadcast Message](https://design.gitlab.com/components/broadcast-message) | Deliver critical, user-generated messages to all users | Use a broadcast message when an admin wants to relay a critical message to all users at the instance level. | Broadcast messages are created by an admin and not the system. We want to differentiate between system-generated and user-generated messages, hence a broadcast message is used in this case. |
-| [Validation error](https://design.gitlab.com/components/forms#validation) | Notification of an invalid action | Use an error when the user has entered invalid characters into the project name field. | A validation error is tied to a specific invalid action that the user performed, whereas danger alerts inform users of when something has gone wrong separate from any immediate action the user has taken. |
+| [Validation error](https://design.gitlab.com/components/form#validation) | Notification of an invalid action | Use an error when the user has entered invalid characters into the project name field. | A validation error is tied to a specific invalid action that the user performed, whereas danger alerts inform users of when something has gone wrong separate from any immediate action the user has taken. |
 | [Toast](https://design.gitlab.com/components/toast) | Immediate confirmation of an action | Use a toast when the user has dismissed a vulnerability and it no longer appears in the list. |  We want to immediately reaffirm to the user the system recognized their action and that no further action is needed on their part. |
 
 ## Demo

contents/components/badge.md

@@ -5,14 +5,14 @@ docs: complete
 vueComponents:
   - GlBadge
 related:
-  - labels
+  - label
 ---
 
 Badges highlight metadata of objects, the kind of information that always needs some context and isn't useful on its own. For example, they can be used to indicate an issue's status, a member's role, or if a branch is protected.
 
 Showing metadata does not require the use of badges, you can just use plain icons, text, or both. But if the metadata is worth highlighting or differentiating, badges can help.
 
-Badges should not be confused with [labels](/components/labels). Labels also show object metadata, but they are much more specific in usage and scope — they are editable objects for users to manually categorize other objects, like issues, merge requests, and epics.  Other terms that are commonly used to refer to badges: counters, statuses, chips, tags, metadata, lozenges, pills, and bubbles.
+Badges should not be confused with [labels](/components/label). Labels also show object metadata, but they are much more specific in usage and scope — they are editable objects for users to manually categorize other objects, like issues, merge requests, and epics.  Other terms that are commonly used to refer to badges: counters, statuses, chips, tags, metadata, lozenges, pills, and bubbles.
 
 ## Usage
 

contents/components/button.md

@@ -6,7 +6,7 @@ vueComponents:
   - GlButton
   - GlButtonGroup
 related:
-  - dropdowns
+  - dropdown
   - segmented-control
   - spinner 
   - pagination
@@ -154,7 +154,7 @@ Dropdown buttons may be split when its options are actions. The text button will
 
 If the dropdown menu has no related actions available, a split dropdown button should be converted back to just a text button.
 
-The currently selected action has a checkmark on the left side of the dropdown item. See also [checkmark dropdowns](/components/dropdowns).
+The currently selected action has a checkmark on the left side of the dropdown item. See also [checkmark dropdowns](/components/dropdown).
 
 [[Example:new-dropdown-split]]
 

contents/components/checkbox.md

@@ -6,7 +6,7 @@ gitlab_ui: https://gitlab.com/gitlab-org/gitlab-ui/-/tree/master/src/components/
 vueComponents:
   - GlFormCheckbox
 related:
-  - dropdowns
+  - dropdown
   - radio-button
   - segmented-control
   - toggle
@@ -23,7 +23,7 @@ A checkbox represents a single boolean option that can be checked, unchecked, or
 
 Use the following table to see when checkboxes should be used over other alternative components.
 
-|  | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle) | [Single-select dropdown](/components/dropdowns) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox) | [Multi-select dropdown](/components/dropdowns) |
+|  | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle) | [Single-select dropdown](/components/dropdown) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox) | [Multi-select dropdown](/components/dropdown) |
 |---|---|---|---|---|---|---|---|
 | Available options | 1 | 1 | >1 or unknown | >1 and <6 | >1 and <6 | >1 and <6 | >1 or unknown |
 | Selectable options | 1 | 1 | 1 | 1 | 1 | >1 or even all | >1 or even all |
@@ -37,7 +37,7 @@ Use the following table to see when checkboxes should be used over other alterna
 
 - Checkbox labels are set in regular font weight, positioned to the right of the element, and should be as short as possible.
 - Use a `fieldset` with `legend` (set in bold font weight and positioned above the group of checkboxes) to group a set of checkboxes. Some screen readers will announce the contents of the legend before each nested input to maintain context for a user.
-- [Help text](/components/forms#help-text) can be added below the checkbox label or as a paragraph below the group.
+- [Help text](/components/form#help-text) can be added below the checkbox label or as a paragraph below the group.
 
 ### Interaction
 

contents/components/date-picker.md

@@ -5,8 +5,8 @@ docs: complete
 vueComponents:
   - GlDatepicker
 related:
-  - forms
-  - dropdowns
+  - form
+  - dropdown
 ---
 
 Date picker allows users to choose and input a date through by manually typing the date into the input field or by using a calendar-like dropdown.

contents/components/dropdowns.md → contents/components/dropdown.md

@@ -6,12 +6,12 @@ vueComponents:
 related:
   - button
   - checkbox
-  - dropdowns
-  - forms
+  - dropdown
+  - form
   - segmented-control
 ---
 
-Dropdowns lists (or simply dropdowns) are used to provide the user with a list of options, which can be either actions or input values. Dropdown lists are triggered by dropdown [buttons](/components/button) or [form inputs](/components/forms).
+Dropdowns lists (or simply dropdowns) are used to provide the user with a list of options, which can be either actions or input values. Dropdown lists are triggered by dropdown [buttons](/components/button) or [form inputs](/components/form).
 
 ## Usage
 
@@ -26,7 +26,7 @@ There are three main types of dropdowns:
 
 Use the following table to see when a dropdown should be used over other alternative components.
 
-|  | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle) | [Single-select dropdown](/components/dropdowns) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox) | [Multi-select dropdown](/components/dropdowns) |
+|  | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle) | [Single-select dropdown](/components/dropdown) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox) | [Multi-select dropdown](/components/dropdown) |
 |---|---|---|---|---|---|---|---|
 | Available options | 1 | 1 | >1 or unknown | >1 and <6 | >1 and <6 | >1 and <6 | >1 or unknown |
 | Selectable options | 1 | 1 | 1 | 1 | 1 | >1 or even all | >1 or even all |

contents/components/forms.md → contents/components/form.md

 ---
-name: Forms
+name: Form
 figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit?node-id=425%3A10
 docs: in-progress
 vueComponents:
@@ -8,7 +8,7 @@ vueComponents:
   - GlFormTextarea
 related:
   - buttons
-  - dropdowns
+  - dropdown
   - date-picker
 ---
 

contents/components/labels.md → contents/components/label.md

 ---
-name: Labels
+name: Label
 figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit?node-id=425%3A127
 docs: complete
 gitlab_ui: https://gitlab.com/gitlab-org/gitlab-ui/-/tree/master/src/components/base/label

contents/components/list.md

@@ -7,7 +7,7 @@ related:
   - card
   - tabs
   - breadcrumb
-  - dropdowns
+  - dropdown
   - sorting
 ---
 

contents/components/modals.md → contents/components/modal.md

 ---
-name: Modals
+name: Modal
 figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit?node-id=425%3A129
 docs: complete
 vueComponents:

contents/components/radio-button.md

@@ -7,7 +7,7 @@ vueComponents:
   - GlFormRadio
 related:
   - checkbox
-  - dropdowns
+  - dropdown
   - segmented-control
   - toggle
 ---
@@ -21,7 +21,7 @@ A radio button typically represents a single option in a group of related choice
 
 Use the following table to see when radio buttons should be used over other alternative components.
 
-|                      | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle)        | [Single-select dropdown](/components/dropdowns) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox)    | [Multi-select dropdown](/components/dropdowns) |
+|                      | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle)        | [Single-select dropdown](/components/dropdown) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox)    | [Multi-select dropdown](/components/dropdown) |
 | -------------------- | ----------------------------------------- | ----------------------------------- | ----------------------------------------------- | ----------------------------------------- | -------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------- |
 | Available options    | 1                                         | 1                                   | >1 or unknown                                   | >1 and <6                                 | >1 and <6                                          | >1 and <6                                        | >1 or unknown                                  |
 | Selectable options   | 1                                         | 1                                   | 1                                               | 1                                         | 1                                                  | >1 or even all                                   | >1 or even all                                 |
@@ -35,7 +35,7 @@ Use the following table to see when radio buttons should be used over other alte
 
 - Radio button labels are set in regular font weight, positioned to the right of the element, and should be as short as possible.
 - Use a `fieldset` with `legend` (set in bold font weight and positioned above the group of radio buttons) to group a set of radio buttons. Some screen readers will announce the contents of the legend before each nested input to maintain context for a user.
-- [Help text](/components/forms#help-text) can be added below the radio button label or as a paragraph below the group.
+- [Help text](/components/form#help-text) can be added below the radio button label or as a paragraph below the group.
 
 ### Interaction
 

contents/components/search.md

@@ -9,7 +9,7 @@ vueComponents:
 related:
   - buttons
   - filter
-  - forms
+  - form
   - sorting
   - spinner
 ---

contents/components/segmented-control.md

@@ -7,7 +7,7 @@ vueComponents:
 related:
   - buttons
   - checkbox
-  - dropdowns
+  - dropdown
   - radio-button
   - toggle
 ---
@@ -16,11 +16,11 @@ A segmented control allows users to choose one out of a range of available optio
 
 ## Usage
 
-A segmented control is commonly used as an alternative to [dropdown](/components/dropdowns), [radio button](/components/radio-button), or [toggle](/components/toggle) components, but it comes with its own limitations. Because it takes up more space, a segmented control should only be used for up to 5 options. It is ideal when there are 2 or 3 because they visually expose the options available to a user. A segmented control should be used instead of a dropdown when there are only a few options and enough room to fit within the UI. It requires fewer interactions and is easier to use on mobile devices, thus having a smaller effect on the user’s cognitive load. Results are effective and visible immediately similar to a toggle.
+A segmented control is commonly used as an alternative to [dropdown](/components/dropdown), [radio button](/components/radio-button), or [toggle](/components/toggle) components, but it comes with its own limitations. Because it takes up more space, a segmented control should only be used for up to 5 options. It is ideal when there are 2 or 3 because they visually expose the options available to a user. A segmented control should be used instead of a dropdown when there are only a few options and enough room to fit within the UI. It requires fewer interactions and is easier to use on mobile devices, thus having a smaller effect on the user’s cognitive load. Results are effective and visible immediately similar to a toggle.
 
 Use the following table to see when a segmented control should be used over other alternative components.
 
-|  | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle) | [Single-select dropdown](/components/dropdowns) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox) | [Multi-select dropdown](/components/dropdowns) |
+|  | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle) | [Single-select dropdown](/components/dropdown) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox) | [Multi-select dropdown](/components/dropdown) |
 |---|---|---|---|---|---|---|---|
 | Available options | 1 | 1 | >1 or unknown | >1 and <6 | >1 and <6 | >1 and <6 | >1 or unknown |
 | Selectable options | 1 | 1 | 1 | 1 | 1 | >1 or even all | >1 or even all |
@@ -32,7 +32,7 @@ Use the following table to see when a segmented control should be used over othe
 
 ### Labels
 
-Label positioning rules are the same as they are for [forms](/components/forms). They can be placed to the left of segmented control when there’s a lack of vertical space. But by default, the label comes above the segmented control.
+Label positioning rules are the same as they are for [forms](/components/form). They can be placed to the left of segmented control when there’s a lack of vertical space. But by default, the label comes above the segmented control.
 
 The label can be omitted in cases when it’s clear what the segmented control is referring to from the UI (for example, switching between a day, week or month view in a calendar UI).
 

contents/components/sorting.md

@@ -3,7 +3,7 @@ name: Sorting
 figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit?node-id=2956%3A3038
 docs: in-progress
 related:
-  - dropdowns
+  - dropdown
   - filter
   - lists
 ---
@@ -20,7 +20,7 @@ Sorting allows users to quickly re-organize similar content on a long list when
 
 | Do | Don’t |
 | --- | --- |
-| Use the sorting component when the list has pagination and spans multiple pages, as it can make it easier for users to digest and find relevant content. | When using the sorting component, make sure the list in the dropdown doesn't contain more than 10 items, otherwise it will create usability problems. [See dropdown guidelines](/components/dropdowns). |
+| Use the sorting component when the list has pagination and spans multiple pages, as it can make it easier for users to digest and find relevant content. | When using the sorting component, make sure the list in the dropdown doesn't contain more than 10 items, otherwise it will create usability problems. [See dropdown guidelines](/components/dropdown). |
 | A user's sort selections are meant to be persisted. If they make a sort selection and then leave the page, when they return to the page, their previous sort selections will be preserved. | If a list is static, easy to search/scan, or where the data set won't grow, the sorting component is unnecessary. |
 | Sorting can occur in tables and in lists. While sorting in lists relies on the sorting component described on this page, sorting within a table happens in the table header. |   |
 

contents/components/spinner.md

@@ -6,7 +6,7 @@ vueComponents:
   - GlLoadingIcon
 related:
   - buttons
-  - forms
+  - form
   - search
   - skeleton-loader
 ---

contents/components/toast.md

@@ -5,7 +5,7 @@ docs: in-progress
 vueComponents:
   - GlToast
 related:
-  - modals
+  - modal
   - motion
   - popovers
   - tooltip

contents/components/toggle.md

@@ -21,7 +21,7 @@ Avoid using toggles when a submit button is needed. This confuses users and dilu
 
 Use the following table to see when a toggle should be used over other alternative components.
 
-|  | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle) | [Single-select dropdown](/components/dropdowns) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox) | [Multi-select dropdown](/components/dropdowns) |
+|  | [Single checkbox](/components/checkbox) | [Toggle](/components/toggle) | [Single-select dropdown](/components/dropdown) | [Radio buttons](/components/radio-button) | [Segmented control](/components/segmented-control) | [Multiple checkboxes](/components/checkbox) | [Multi-select dropdown](/components/dropdown) |
 |---|---|---|---|---|---|---|---|
 | Available options | 1 | 1 | >1 or unknown | >1 and <6 | >1 and <6 | >1 and <6 | >1 or unknown |
 | Selectable options | 1 | 1 | 1 | 1 | 1 | >1 or even all | >1 or even all |

contents/components/token.md

@@ -8,7 +8,7 @@ related:
   - filter
   - button
   - badge
-  - labels
+  - label
 ---
 
 Tokens represent keywords and are used to add or filter objects. They allow users to input information, converting their text to tokens.
@@ -31,7 +31,7 @@ Use tokens to:
 
 Do not use tokens to:
 
-- Categorize an object. Use [labels](https://design.gitlab.com/components/labels/) instead.
+- Categorize an object. Use [labels](https://design.gitlab.com/components/label/) instead.
 - Highlight more generic object metadata, like an issue’s status, a member’s role, or if a branch is protected. Use [badges](/components/badge/) instead.
 - Display static action items persistently. Use [buttons](https://design.gitlab.com/components/button) instead.