Skip to content

Commit

Permalink
docs(label): Updates design guidelines. (#4265)
Browse files Browse the repository at this point in the history
* docs(label): Updates design guidelines.

* Update image and alt text.

* Fix image path.

* Final wording edits.
  • Loading branch information
edonehoo authored Sep 19, 2024
1 parent dce9151 commit 1747574
Show file tree
Hide file tree
Showing 27 changed files with 143 additions and 111 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ id: Chip
section: components
---

**Note:** Chip is now deprecated. Use the [label](/components/label) component instead.

## Elements

Chips are mainly used within chip groups, which represent an attribute that has been assigned one or more values.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ Consider using adding an "All day" checkbox to a date and time picker to simplif
Use date pickers in a toolbar to filter by date ranges.

#### Date picker in attribute filter
Date range fields can be added to an attribute filter as an attribute. Selecting the Date range attribute will display a date picker, and push other content in the toolbar to the right - in this case, the CTA button. The date(s) selected should display as chips under the filter.
Date range fields can be added to an attribute filter as an attribute. Selecting the Date range attribute will display a date picker, and push other content in the toolbar to the right - in this case, the CTA button. The date(s) selected should display as labels under the filter.

<img src="./img/In toolbar attribute filter.png" alt="Example of date picker in toolbar attribute filter" width="500"/>

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ Checkbox select lists allow users to select one or more options from a known lis
#### Use checkbox select when
* Horizontal space is limited.
* It is not crucial for the user to see their selections in the toggle itself.
* Using a select list inside a toolbar. Toolbars have limited space, and the user will already be able to see their selection as chips below the filter itself.
* Using a select list inside a toolbar. Toolbars have limited space, and the user will already be able to see their selection as labels below the filter itself.

<img src="./img/checkbox-select.png" alt="Example of checkbox select in a toolbar" width="585"/>

### Multiple select
Multiple select lists allow users to select one or more options from a list, with the selected options marked with a blue check. It differs from the checkbox select in that each option selected by the user appears in the top display area as chips. Once the number of selections reaches a certain number, the regular chips will be replaced by a gray chip indicating how many more items were selected. The default number of selections is 3, but you may change this number based on your use case.
Multiple select lists allow users to select one or more options from a list, with the selected options marked with a blue check. It differs from the checkbox select in that each option selected by the user appears in the top display area as labels. Once the number of selections reaches a certain number, the regular labels will be replaced by a gray label indicating how many more items were selected. The default number of selections is 3, but you may change this number based on your use case.

#### Use multiple select when
* Horizontal space is not limited.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ section: components

3. **Clear button (optional):** A clear button can be added to clear the contents of the field.

4. **Chip group (optional):** A chip group can be nested inside of the text input as shown here.
4. **Label group (optional):** A label group can be nested inside of the text input as shown here.

## Usage

The text input group component is useful for building more complex custom inputs. Its usage includes, but is not limited to, the following use cases. Interactive examples of these are available as [React demos](/components/text-input-group/react-demos).

### Attribute value filtering

The text input group can be used to create an attribute-value filter as shown below where the user selects attributes (or keys), then values, and the results are displayed in chips as a key-value pair.
The text input group can be used to create an attribute-value filter as shown below where the user selects attributes (or keys), then values, and the results are displayed in labels as a key-value pair.

<img src="./img/attribute-value-filter.png" alt="attribute value filter" width="464"/>

Expand Down

Large diffs are not rendered by default.

0 comments on commit 1747574

Please sign in to comment.