Skip to content

docs(label): Add guidelines for preview labels. #4855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

docs(label): Add guidelines for preview labels. #4855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed .../patternfly-docs/content/design-guidelines/components/label/img/added-label.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...nfly-docs/content/design-guidelines/components/label/img/adding-label-modal.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...ly-docs/content/design-guidelines/components/label/img/adding-label-options.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...patternfly-docs/content/design-guidelines/components/label/img/adding-label.png
View file
Open in desktop
Binary file not shown.
Binary file removed .../patternfly-docs/content/design-guidelines/components/label/img/card-labels.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...ernfly-docs/content/design-guidelines/components/label/img/card-view-labels.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...patternfly-docs/content/design-guidelines/components/label/img/catalog-view.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...ternfly-docs/content/design-guidelines/components/label/img/clickable-label.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...ernfly-docs/content/design-guidelines/components/label/img/clickable-labels.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...docs/content/design-guidelines/components/label/img/description-list-labels.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...ernfly-docs/content/design-guidelines/components/label/img/description-list.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...nfly-docs/content/design-guidelines/components/label/img/dismissible-labels.png
View file
Open in desktop
Binary file not shown.
Binary file removed .../patternfly-docs/content/design-guidelines/components/label/img/edit-labels.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...-docs/content/design-guidelines/components/label/img/editable-label-feature.png
View file
Open in desktop
Binary file not shown.
Binary file removed .../design-guidelines/components/label/img/editable-label-group-in-a-table_1-1.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...nt/design-guidelines/components/label/img/editable-label-group-in-a-table_1.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...nt/design-guidelines/components/label/img/editable-label-group-in-a-table_2.png
View file
Open in desktop
Binary file not shown.
Binary file removed .../design-guidelines/components/label/img/editable-label-group-in-a-table_2_1.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...nt/design-guidelines/components/label/img/editable-label-group-in-a-table_3.png
View file
Open in desktop
Binary file not shown.
Binary file removed .../design-guidelines/components/label/img/editable-label-group-in-a-table_3_1.png
View file
Open in desktop
Binary file not shown.
Binary file removed .../design-guidelines/components/label/img/editable-label-group-in-a-table_3_2.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...nt/design-guidelines/components/label/img/editable-label-group-in-a-table_4.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...es/components/label/img/editable-label-group-in-a-table_4_1_add-label-model.png
View file
Open in desktop
Binary file not shown.
Binary file removed .../design-guidelines/components/label/img/editable-label-group-in-a-table_4_2.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...ternfly-docs/content/design-guidelines/components/label/img/editable-labels.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...atternfly-docs/content/design-guidelines/components/label/img/filled-labels.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...tternfly-docs/content/design-guidelines/components/label/img/label-elements.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...fly-docs/content/design-guidelines/components/label/img/label-features-type.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...tternfly-docs/content/design-guidelines/components/label/img/label-features.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...atternfly-docs/content/design-guidelines/components/label/img/label-filters.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...ly-docs/content/design-guidelines/components/label/img/label-group-elements.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...fly-docs/content/design-guidelines/components/label/img/label-group-popover.png
View file
Open in desktop
Diff not rendered.
Binary file removed .../patternfly-docs/content/design-guidelines/components/label/img/label-sizes.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...ernfly-docs/content/design-guidelines/components/label/img/label-table-view.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...rnfly-docs/content/design-guidelines/components/label/img/labels-with-icons.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...nfly-docs/content/design-guidelines/components/label/img/labels-with-icons2.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...ernfly-docs/content/design-guidelines/components/label/img/nonstatus-labels.png
View file
Open in desktop
Diff not rendered.
47 changes: 47 additions & 0 deletions ...tternfly-docs/content/design-guidelines/components/label/img/preview-labels.svg
View file
Open in desktop

Large diffs are not rendered by default.

Binary file removed ...atternfly-docs/content/design-guidelines/components/label/img/status-labels.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...patternfly-docs/content/design-guidelines/components/label/img/table-view-2.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...e/patternfly-docs/content/design-guidelines/components/label/img/table-view.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...-docs/content/design-guidelines/components/label/img/table-with-label-group.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...rnfly-docs/content/design-guidelines/components/label/img/table-with-labels.png
View file
Open in desktop
Diff not rendered.
Binary file removed ...ternfly-docs/content/design-guidelines/components/label/img/unfilled-labels.png
View file
Open in desktop
Diff not rendered.
16 changes: 15 additions & 1 deletion ...tation-site/patternfly-docs/content/design-guidelines/components/label/label.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,23 @@ Labels are typically used in filter and selection use cases to indicate what sel
![Example of labels as filters in a toolbar.](./img/label-filters.svg)
</div>

#### Preview labels

To communicate that a feature is in a preview mode, instead of fully released and supported, use a [nonstatus purple label](#nonstatus-labels). There are 2 common types of preview labels:
1. **Developer preview:** Intended for early evaluation and feedback. These features are not supported and not ready for production environments.
2. **Technology preview:** Available for early use and feedback. These features have limited support and are typically on the roadmap for a future full release.

Preview labels should use the compact size variant and should be placed beside the title of the new feature or component&mdash;ideally to the right of the feature title.

Preview labels should also be clickable. When clicked, display a popover with a brief explanation of the preview type (stability, potential limitations) and include a "Learn more" link directing users to dedicated documentation.

<div class="ws-docs-content-img">
![Developer preview and technology preview labels with descriptive popover above each.](./img/preview-labels.svg)
</div>

#### Color considerations

Labels can utilize both our [status](/design-foundations/colors#status-and-state-colors) and [nonstatus](/design-foundations/colors#nonstatus-colors) color palettes.
Labels can utilize both our [status](/design-foundations/colors#status-and-state-colors) and [nonstatus](/design-foundations/colors#nonstatus-colors) color palettes.

While you may use other colors for your labels, we recommend using the ones provided as they have been carefully selected to be accessible with the PatternFly library. If you choose to use other colors, be mindful of picking [accessible text color and icon color](/accessibility/testing-your-accessibility) to go with the label background.

Expand Down