From 90e5443abb36b632c4e4f6a6e8ce6425ca98618a Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 6 Nov 2025 15:52:58 -0500 Subject: [PATCH 1/2] docs(label): Add guidelines for preview labels. --- .../components/label/img/preview-labels.svg | 47 +++++++++++++++++++ .../content/components/label/label.md | 14 ++++++ 2 files changed, 61 insertions(+) create mode 100644 packages/documentation-site/patternfly-docs/content/components/label/img/preview-labels.svg diff --git a/packages/documentation-site/patternfly-docs/content/components/label/img/preview-labels.svg b/packages/documentation-site/patternfly-docs/content/components/label/img/preview-labels.svg new file mode 100644 index 0000000000..633dee8afd --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/label/img/preview-labels.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/label/label.md b/packages/documentation-site/patternfly-docs/content/components/label/label.md index bb6805d5cb..6ed6ef1823 100644 --- a/packages/documentation-site/patternfly-docs/content/components/label/label.md +++ b/packages/documentation-site/patternfly-docs/content/components/label/label.md @@ -63,6 +63,20 @@ 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) +#### 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—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. + +
+![Developer preview and technology preview labels with descriptive popover above each.](./img/preview-labels.svg) +
+ #### Color considerations Labels can utilize both our [status](/foundations-and-styles/colors#status-and-state-colors) and [nonstatus](/foundations-and-styles/colors#nonstatus-colors) color palettes. From 4096cedc8fe62493d7bdeb54ccc9fd8beb809784 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 15 Jan 2026 11:09:44 -0500 Subject: [PATCH 2/2] Expand label usage patterns. --- .../components/label/img/deprecated-label.svg | 26 +++++++++++++++++ .../components/label/img/preview-labels.svg | 29 ++++++++++++++++--- .../content/components/label/label.md | 29 ++++++++++++++----- 3 files changed, 73 insertions(+), 11 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/components/label/img/deprecated-label.svg diff --git a/packages/documentation-site/patternfly-docs/content/components/label/img/deprecated-label.svg b/packages/documentation-site/patternfly-docs/content/components/label/img/deprecated-label.svg new file mode 100644 index 0000000000..6c64417ef1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/label/img/deprecated-label.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/label/img/preview-labels.svg b/packages/documentation-site/patternfly-docs/content/components/label/img/preview-labels.svg index 633dee8afd..115f1d8b44 100644 --- a/packages/documentation-site/patternfly-docs/content/components/label/img/preview-labels.svg +++ b/packages/documentation-site/patternfly-docs/content/components/label/img/preview-labels.svg @@ -1,8 +1,11 @@ - - + + + + + @@ -10,12 +13,21 @@ - + + + + + + + + + + @@ -34,7 +46,16 @@ - + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/label/label.md b/packages/documentation-site/patternfly-docs/content/components/label/label.md index 6ed6ef1823..f046fc94bd 100644 --- a/packages/documentation-site/patternfly-docs/content/components/label/label.md +++ b/packages/documentation-site/patternfly-docs/content/components/label/label.md @@ -63,20 +63,35 @@ 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) -#### Preview labels +#### Beta and 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. +To communicate that a feature is in a beta or preview mode, rather than fully released and supported, use a [nonstatus purple label](#nonstatus-labels). -Preview labels should use the compact size variant and should be placed beside the title of the new feature or component—ideally to the right of the feature title. +There are a few common types of preview labels: +1. **Developer preview:** Shared for early evaluation and feedback. These features are likely unstable, unsupported, and not ready for production environments. +2. **Technology preview:** Ready for early use and feedback. These features have limited support and are typically on the roadmap for a future full release. +3. **Beta:** Publicly available but still subject to change. Beta features are typically feature-complete but might still undergo visual or functional changes based on user feedback before being promoted to full support. -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. +Beta and preview labels should use the compact size variant and should be placed beside the title of the new feature or component—ideally to the right of the title. + +Preview labels should be clickable. When clicked, display a popover with a brief explanation of the preview type (stability, potential limitations) and a "Learn more" to dedicated documentation.
![Developer preview and technology preview labels with descriptive popover above each.](./img/preview-labels.svg)
+#### Deprecated labels + +To communicate that a feature or resource is no longer the current recommendation and might be removed in the future, use a [nonstatus gray label](#nonstatus-labels) with "Deprecated" as the text label. + + +
+![A gray "deprecated" label with descriptive popover above.](./img/deprecated-label.svg) +
+ +#### Quick start labels +To indicate that clicking a card will initiate a quick start experience, use a [nonstatus green label](#nonstatus-labels) with "Quick start" as the text label. For more guidance, refer to the [quick starts guidelines](/extensions/quick-starts/design-guidelines). + #### Color considerations Labels can utilize both our [status](/foundations-and-styles/colors#status-and-state-colors) and [nonstatus](/foundations-and-styles/colors#nonstatus-colors) color palettes. @@ -107,7 +122,7 @@ We offer a nonstatus color palette, which you can use to color code labels that - [Filled or unfilled labels](#when-to-use-filled-or-unfilled-labels) - [Labels with icons](#when-to-use-labels-with-icons) - [Editable labels](#when-to-use-editable-labels) -- [dismissible labels](#when-to-use-dismissible-labels) +- [Dismissible labels](#when-to-use-dismissible-labels) - [Clickable labels](#when-to-use-clickable-labels) #### When to use filled or unfilled labels