diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/Filled-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/Filled-labels.svg new file mode 100644 index 0000000000..611398d0d4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/Filled-labels.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/Unfilled-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/Unfilled-labels.svg new file mode 100644 index 0000000000..0c987cdfe2 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/Unfilled-labels.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/added-label.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/added-label.svg new file mode 100644 index 0000000000..2b62ba87eb --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/added-label.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/adding-label-modal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/adding-label-modal.svg new file mode 100644 index 0000000000..edf40735f9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/adding-label-modal.svg @@ -0,0 +1,217 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/adding-label-options.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/adding-label-options.svg new file mode 100644 index 0000000000..953b302d18 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/adding-label-options.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/adding-label.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/adding-label.svg new file mode 100644 index 0000000000..62738204a6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/adding-label.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/card-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/card-labels.svg new file mode 100644 index 0000000000..c275337e8c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/card-labels.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/card-view-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/card-view-labels.svg new file mode 100644 index 0000000000..0abf7bee10 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/card-view-labels.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/clickable-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/clickable-labels.svg new file mode 100644 index 0000000000..87c12eec90 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/clickable-labels.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/description-list-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/description-list-labels.svg new file mode 100644 index 0000000000..7df8a46b1b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/description-list-labels.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/dismissible-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/dismissible-labels.svg new file mode 100644 index 0000000000..dcb1b79348 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/dismissible-labels.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/editable-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/editable-labels.svg new file mode 100644 index 0000000000..9b0d156240 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/editable-labels.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-elements.svg new file mode 100644 index 0000000000..6ea32ff90a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-elements.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-filters.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-filters.svg new file mode 100644 index 0000000000..6fe3cc7a87 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-filters.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-group-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-group-elements.svg new file mode 100644 index 0000000000..ccfbffa3d3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-group-elements.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-group-popover.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-group-popover.svg new file mode 100644 index 0000000000..0ccdab8349 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-group-popover.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-sizes.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-sizes.svg new file mode 100644 index 0000000000..bdd1ef470d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/label-sizes.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/nonstatus-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/nonstatus-labels.svg new file mode 100644 index 0000000000..1f46d54735 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/nonstatus-labels.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/status-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/status-labels.svg new file mode 100644 index 0000000000..5227dca70c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/status-labels.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/table-with-label-group.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/table-with-label-group.svg new file mode 100644 index 0000000000..2e63d6d5c8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/table-with-label-group.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/table-with-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/table-with-labels.svg new file mode 100644 index 0000000000..4a82b67ae9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/img/table-with-labels.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/label.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/label.md index 74f470b30c..0f326e4ff0 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/label.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/label.md @@ -2,17 +2,21 @@ id: Label section: components --- + +import '../components.css'; + ## Labels ### Elements You can customize labels by adjusting their visual styling or adding functionality to let users click, edit, or remove labels. -![Different label variants for both nonstatus and status labels.](./img/label-elements.png) - +
+![Elements of both status and non-status labels.](./img/label-elements.svg) +
1. **Status label:** Combines color and an icon to communicate a status, like danger, warning, or success. 1. **Filled label:** Can be used for additional emphasis. -1. **Unfilled label:** Can be used as a less prominent label style. +1. **Outlined label:** Can be used as a less prominent label style. 1. **Compact label:** Takes up less space than the default label. 1. **Label with icon:** Can utilize a recognizable icon to make the label more clear and identifiable. 1. **Clickable label:** Is identified by the inclusion of a hover state (as shown in the example image). @@ -30,7 +34,9 @@ Labels are useful in a few scenarios: There are 2 label sizes: -![Default and compact-sized labels.](./img/label-sizes.png) +
+![Example of default and compact labels.](./img/label-sizes.svg) +
1. **Default labels:** Use by default when needing a label. 2. **Compact labels:** Use when confronted by space limitations and a smaller label is required (for example, in a table). @@ -39,17 +45,23 @@ Labels can be used almost anywhere in a UI. They are commonly used in tables, ca #### Labels in tables -![Labels within a table.](./img/table-with-labels.png) +
+![Example of labels within a table.](./img/table-with-labels.svg) +
#### Labels in card views -![Labels on cards in a card view.](./img/card-view-labels.png) +
+![Example of labels on cards in a card view.](./img/card-view-labels.svg) +
#### Filter labels Labels are typically used in filter and selection use cases to indicate what selections a user has made. They utilize [label groups](#label-groups) to organize selections by category for added clarity. When there are multiple filter labels within a group, any data that matches one or more of the labels will be filtered. It is not required for all filter labels to be applied in order to match a filtered item. -![Labels as filters in a toolbar.](./img/label-filters.png) +
+![Example of labels as filters in a toolbar.](./img/label-filters.svg) +
#### Color considerations @@ -63,13 +75,17 @@ The colors you should use differs for status and nonstatus labels: Status colors can be used to indicate danger, warning, success, info, or custom statuses. -![Filled status labels in light and dark color themes.](./img/status-labels.png) +
+![Examples of filled status labels in light and dark color themes.](./img/status-labels.svg) +
##### Nonstatus labels We offer a nonstatus color palette, which you can use to color code labels that don't correspond to any status level, including red, orange, orange red, gold, green, cyan, blue, purple, and gray. -![Filled nonstatus labels in light and dark color themes.](./img/nonstatus-labels.png) +
+![Examples of filled non-status labels in light and dark color themes.](./img/nonstatus-labels.svg) +
**Note:** We recommend you avoid using red, unless you're indicating danger or an error state. @@ -88,36 +104,47 @@ Both status and nonstatus labels can be filled or unfilled. ##### Filled -![All color options for filled labels for light and dark themes.](./img/filled-labels.png) +
+![Examples of all the color options for filled labels in light and dark themes.](./img/Filled-labels.svg) +
##### Unfilled -![All color options for unfilled label styles for light and dark themes.](./img/unfilled-labels.png) +
+![Examples of all color options for unfilled labels in light and dark themes.](./img/Unfilled-labels.svg) +
#### When to use labels with icons While status labels will automatically contain an appropriate icon, you can also add an icon to nonstatus labels, when additional visual information would be helpful. -![Icons within labels in a card.](./img/card-labels.png) +
+![Example of labels with icons in a card.](./img/card-labels.svg) +
Icons can also help distinguish labels of the same color. #### When to use editable labels Use editable labels when you want to allow users to organize and select resources manually. Adding editable labels enables the user to query for objects that have similar, dissimilar, or overlapping labels. -![Before and after example of editing a label.](./img/editable-labels.png) +
+![Example showing the before and after of editing a label.](./img/editable-labels.svg) +
+ #### When to use dismissible labels Use a dismissible label for labels that can be easily removed. Editable labels are often dismissible as well. -![Before and after example of dismissing a label.](./img/dismissible-labels.png) +
+![Example showing the before and after of dismissing a label.](./img/dismissible-labels.svg) +
#### When to use clickable labels -Use a clickable label for labels that trigger actions or link to new pages. - -As shown in the following image, a common use case for clickable labels is when a user may want to filter by a specific label. +Use a clickable label for labels that trigger actions or link to new pages. Clickable labels include a hover state as shown in the following image. -![Example of clicking a label to filter on that label.](./img/clickable-labels.png) +
+![Example of a clickable label.](./img/clickable-labels.svg) +
## Label groups @@ -126,7 +153,9 @@ Label groups are used to display multiple labels at once. ### Elements Label groups have a number of components to them. -![Different elements of a label group.](./img/label-group-elements.png) +
+![Elements of a label group.](./img/label-group-elements.svg) +
1. **Label:** Indicates the labels applied. 1. **Group label (optional):** Indicates the group category or name. @@ -142,16 +171,23 @@ Label groups should be used when there are multiple labels assigned to a compone In a table, basic label groups can be used to display all labels associated with a data source. -![Label groups within a table.](./img/table-with-label-group.png) +
+![Example of label groups within a table.](./img/table-with-label-group.svg) +
+ #### Label groups in a table popover When there are many labels assigned to a table, you can use a popover as a container. -![Vertical label group within a popover.](./img/label-group-popover.png) +
+![Example of a vertical label group within a popover.](./img/label-group-popover.svg) +
#### Label groups in a description list -![Label group within a description list field.](./img/description-list-labels.png) +
+![Example of a label group within a description list field.](./img/description-list-labels.svg) +
### Variations @@ -161,11 +197,15 @@ When there are many labels assigned to a table, you can use a popover as a conta This pattern can be followed to let users add a new label or edit an existing label within a group. -![Table-based label group with option to add a new label.](./img/adding-label.png) +
+![Example of a label group within a table with the option to add a new label.](./img/adding-label.svg) +
When a user selects the **Add label** button, a new label is added to the beginning of the group. Once the new label is added, they can overwrite the default value by double clicking the label. -![Table-based label group example, after a new label is added.](./img/added-label.png) +
+![Example of a label group within a table after a new label is added.](./img/added-label.svg) +
##### Adding a new label to a group from a list of preselected labels @@ -173,16 +213,20 @@ You can provide users with a fixed set of label options to add to a group. When a user selects the **Add label** button, display a menu of available label options. They can select a new label from the values in the menu. -![Dropdown menu of label options when trying to add a new label to a group.](./img/adding-label-options.png) +
+![Example of a dropdown menu with options when trying to add a new label to a group.](./img/adding-label-options.svg) +
The new label is added with the selected value and can not be edited. -##### Adding a new custom label to a label group +##### Adding a new custom label to a label groupgit You can allow users to customize the labels they add to a group. When a user selects the **Add label** button, it opens up a modal, where they can select the attributes for their new label, including the label type, text, color, icon, and the ability to dismiss or edit. Customize these options to fit your needs. -![Modal with selectable options used to create a new label.](./img/adding-label-modal.png) +
+![Example of a modal used to create a new label.](./img/adding-label-modal.svg) +
Once the new label is created, it cannot be edited. Users will need to add a new label if they want to make changes. ## Accessibility