Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
Examples
In addition to the JavaScript management of editable labels, dynamic label groups also need:
.pf-c-label-group.pf-m-editableonClick event should (excluding labels within) set focus on.pf-c-label-group__textarea
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
role="list" | .pf-c-label-group__list | Indicates that the label group list is a list element. This role is redundant since .pf-c-label-group__list is a <ul> but is required for screen readers to announce the list propertly. Required |
aria-label="[button label text]" | .pf-c-label-group__close > button | Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. Required |
aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]" | .pf-c-label-group__close > button | Provides an accessible name for the button. Required |
aria-label="[label text]" | .pf-c-label-group__textarea | Provides an accessible name for the textarea. Required |
row="1" | .pf-c-label-group__textarea | Indicates that the label group textarea is one row. Required |
tabindex="0" | .pf-c-label-group__textarea | Inserts the label group textarea into the tab order of the page so that it is focusable. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-label-group | <div> | Initiates the label group component. Required. |
.pf-c-label-group__list | <ul> | Initiates the container for a list of labels. Required. |
.pf-c-label-group__list-item | <li> | Initiates the list item inside of the label group. Required. |
.pf-c-label-group__main | <div> | Initiates the main element in the label group. Required when label and list are present |
.pf-c-label-group__textarea | <textarea> | Initiates the textarea element in the label group. Required when label group is editable |
.pf-c-label-group__label | <span> | Initiates the label to be used in the label group. |
.pf-c-label-group__close | <div> | Initiates the container used for the button to remove the label group. |
.pf-c-button | .pf-c-label-group__close <button> | Initiates the button used to remove the label group. |
.pf-m-editable | .pf-c-label-group | Modifies the label group to support editable styling. |
.pf-m-category | .pf-c-label-group | Modifies the label group to support category styling. |
.pf-m-textarea | .pf-c-label-group__list-item | Modifies the label group list item to support textarea. |
CSS variables
| .pf-c-label-group | --pf-c-label-group__list--MarginBottom | calc(0.25rem * -1) | ||
| .pf-c-label-group | --pf-c-label-group__list--MarginRight | calc(0.25rem * -1) | ||
| .pf-c-label-group | --pf-c-label-group--m-category--PaddingTop | 0.25rem | ||
| .pf-c-label-group | --pf-c-label-group--m-category--PaddingRight | 0.25rem | ||
| .pf-c-label-group | --pf-c-label-group--m-category--PaddingBottom | 0.25rem | ||
| .pf-c-label-group | --pf-c-label-group--m-category--PaddingLeft | 0.5rem | ||
| .pf-c-label-group | --pf-c-label-group--m-vertical--m-category--PaddingRight | 0.5rem | ||
| .pf-c-label-group | --pf-c-label-group--m-category--BorderRadius | 3px | ||
| .pf-c-label-group | --pf-c-label-group--m-category--BorderWidth | 1px | ||
| .pf-c-label-group | --pf-c-label-group--m-category--BorderColor | #f0f0f0 | ||
| .pf-c-label-group | --pf-c-label-group--m-category--BackgroundColor | #fff | ||
| .pf-c-label-group | --pf-c-label-group__label--MarginRight | 0.5rem | ||
| .pf-c-label-group | --pf-c-label-group__label--MarginBottom | 0 | ||
| .pf-c-label-group | --pf-c-label-group--m-vertical__label--MarginBottom | 0.5rem | ||
| .pf-c-label-group | --pf-c-label-group__label--FontSize | 0.875rem | ||
| .pf-c-label-group | --pf-c-label-group__label--MaxWidth | 18ch | ||
| .pf-c-label-group | --pf-c-label-group__close--MarginTop | calc(0.25rem * -1) | ||
| .pf-c-label-group | --pf-c-label-group__close--MarginBottom | calc(0.25rem * -1) | ||
| .pf-c-label-group | --pf-c-label-group--m-vertical__close--MarginTop | calc(0.375rem * -1) | ||
| .pf-c-label-group | --pf-c-label-group--m-vertical__close--MarginRight | calc(0.375rem * -1) | ||
| .pf-c-label-group | --pf-c-label-group--m-vertical__close--MarginLeft | 0.5rem | ||
| .pf-c-label-group | --pf-c-label-group--m-vertical__close--c-button--PaddingRight | 0.5rem | ||
| .pf-c-label-group | --pf-c-label-group--m-vertical__close--c-button--PaddingLeft | 0.5rem | ||
| .pf-c-label-group | --pf-c-label-group__list-item--MarginRight | 0.25rem | ||
| .pf-c-label-group | --pf-c-label-group__list-item--MarginBottom | 0.25rem | ||
| .pf-c-label-group | --pf-c-label-group__textarea--MinWidth | 12.5rem | ||
| .pf-c-label-group | --pf-c-label-group__textarea--PaddingTop | 0.125rem | ||
| .pf-c-label-group | --pf-c-label-group__textarea--PaddingRight | 0.25rem | ||
| .pf-c-label-group | --pf-c-label-group__textarea--PaddingBottom | 0 | ||
| .pf-c-label-group | --pf-c-label-group__textarea--PaddingLeft | 0.25rem | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group__list--MarginRight | 0 | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group__list--MarginBottom | 0 | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group__list-item--MarginRight | 0 | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group__label--MarginRight | 0 | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group__label--MarginBottom | 0.5rem | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group__close--MarginTop | calc(0.375rem * -1) | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group__close--MarginLeft | 0.5rem | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group__close--MarginBottom | 0 | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group__close--MarginRight | calc(0.375rem * -1) | ||
| .pf-c-label-group.pf-m-vertical | --pf-c-label-group--m-category--PaddingRight | 0.5rem | ||
| .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child | --pf-c-label-group__list-item--MarginBottom | 0 | ||
| .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button | --pf-c-button--PaddingLeft | 0.5rem | ||
| .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button | --pf-c-button--PaddingRight | 0.5rem | ||
View source on GitHub
