From 004fef74be8cc4ba16dd5fe5d4d517a42770df32 Mon Sep 17 00:00:00 2001
From: Tarun Vashishtha <65185652+tarunvashishth@users.noreply.github.com>
Date: Fri, 27 Feb 2026 12:55:12 +0530
Subject: [PATCH 1/8] feat(label): migrate label icons to RH set and update gap
token
---
.../components/Label/examples/Label.md | 104 +++++++++---------
.../components/Label/label--variants.hbs | 12 +-
.../components/Label/label-icon--map.hbs | 14 +--
.../components/Label/label-icon.hbs | 2 +-
src/patternfly/components/Label/label.scss | 2 +-
src/patternfly/demos/Card/examples/Card.md | 14 +--
.../card-demo--notification-drawer.hbs | 10 +-
.../Card/templates/card-template-status.hbs | 10 +-
.../demos/Form/examples/BasicForms.md | 4 +-
.../demos/Tabs/tabs--pod-page-title.hbs | 2 +-
10 files changed, 87 insertions(+), 87 deletions(-)
diff --git a/src/patternfly/components/Label/examples/Label.md b/src/patternfly/components/Label/examples/Label.md
index 384a1d7821..770016fe41 100644
--- a/src/patternfly/components/Label/examples/Label.md
+++ b/src/patternfly/components/Label/examples/Label.md
@@ -109,13 +109,13 @@ Use a label group to display multiple labels at once.
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
@@ -147,13 +147,13 @@ Use a label group to display multiple labels at once.
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label label--color="blue" label--IsOverflow=true label-text--value="3 more"}}
@@ -169,19 +169,19 @@ Use a label group to display multiple labels at once.
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="teal" label-text--value="Label 4" label-icon--value="info-circle"}}
+ {{> label label--color="teal" label-text--value="Label 4" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="purple" label-text--value="Label 5" label-icon--value="info-circle"}}
+ {{> label label--color="purple" label-text--value="Label 5" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label label--IsOverflow=true label-text--value="3 less"}}
@@ -199,13 +199,13 @@ The contents of a label group can be modified by removing labels or adding new o
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label label--IsAdd=true label-text--value="Add label"}}
@@ -224,13 +224,13 @@ The contents of a label group can be modified by removing labels or adding new o
{{/label-group-label}}
{{#> label-group-list label-group-list--attribute=(concat 'aria-labelledby="' label-group--id '-label"')}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
@@ -246,22 +246,22 @@ The contents of a label group can be modified by removing labels or adding new o
{{/label-group-label}}
{{#> label-group-list label-group-list--attribute=(concat 'aria-labelledby="' label-group--id '-label"')}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="teal" label-text--value="Label 4" label-icon--value="info-circle"}}
+ {{> label label--color="teal" label-text--value="Label 4" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="orange" label-text--value="Label 5" label-icon--value="info-circle"}}
+ {{> label label--color="orange" label-text--value="Label 5" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="red" label-text--value="Label 6" label-icon--value="info-circle"}}
+ {{> label label--color="red" label-text--value="Label 6" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
@@ -275,13 +275,13 @@ The contents of a label group can be modified by removing labels or adding new o
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
@@ -294,13 +294,13 @@ The contents of a label group can be modified by removing labels or adding new o
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label label--IsOverflow=true label-text--value="3 more"}}
@@ -316,19 +316,19 @@ The contents of a label group can be modified by removing labels or adding new o
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="teal" label-text--value="Label 4" label-icon--value="info-circle"}}
+ {{> label label--color="teal" label-text--value="Label 4" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="purple" label-text--value="Label 5" label-icon--value="info-circle"}}
+ {{> label label--color="purple" label-text--value="Label 5" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label label--IsOverflow=true label-text--value="3 less"}}
@@ -347,13 +347,13 @@ The contents of a label group can be modified by removing labels or adding new o
{{/label-group-label}}
{{#> label-group-list label-group-list--attribute=(concat 'aria-labelledby="' label-group--id '-label"')}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
@@ -504,21 +504,21 @@ In addition to the JavaScript management of [editable labels](/components/label#
{{> label
label--IsCompact=true
label-text--value="Label 1"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--color="blue"
label--IsCompact=true
label-text--value="Label 2"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--color="green"
label--IsCompact=true
label-text--value="Label 3"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
@@ -531,21 +531,21 @@ In addition to the JavaScript management of [editable labels](/components/label#
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--color="blue"
label--IsCompact=true
label-text--value="Label 2"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--color="green"
label--IsCompact=true
label-text--value="Label 3"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label label--IsOverflow=true label--IsCompact=true label-text--value="3 more"}}
@@ -561,21 +561,21 @@ In addition to the JavaScript management of [editable labels](/components/label#
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--color="blue"
label--IsCompact=true
label-text--value="Label 2"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--color="green"
label--IsCompact=true
label-text--value="Label 3"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
@@ -599,13 +599,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label--color="blue" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label--color="blue" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 2" label--color="green" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 2" label--color="green" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
@@ -617,13 +617,13 @@ In addition to the JavaScript management of [editable labels](/components/label#
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label-text--value="Label 1" label-icon--value="info-circle"}}
+ {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--color="green" label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
diff --git a/src/patternfly/components/Label/label--variants.hbs b/src/patternfly/components/Label/label--variants.hbs
index d636144fa9..d396632412 100644
--- a/src/patternfly/components/Label/label--variants.hbs
+++ b/src/patternfly/components/Label/label--variants.hbs
@@ -61,7 +61,7 @@
{{> label
label--id=(concat label--variants--id '-icon')
- label-icon--value="cube"
+ label-icon--value="rh-ui-add-circle-fill"
label-text--value=(concat label--variants--title ' icon')}}
{{> label
@@ -73,7 +73,7 @@
label--IsRemovable=true
label--id=(concat label--variants--id '-icon-removable')
label-text--value=(concat label--variants--title ' icon removable')
- label-icon--value="cube"}}
+ label-icon--value="rh-ui-add-circle-fill"}}
{{> label
label--id=(concat label--variants--id '-link')
@@ -101,14 +101,14 @@
label--id=(concat label--variants--id '-truncated')
label-text--value=(concat label--variants--title ' label, max-width truncation customization')
label-text--attribute='style="--pf-v6-c-label__text--MaxWidth: 28ch"'
- label-icon--value="cube"}}
+ label-icon--value="rh-ui-add-circle-fill"}}
{{> label
label--IsRemovable=true
label--id=(concat label--variants--id '-truncated-with-icon')
label-text--value=(concat label--variants--title ' label with icon and set max-width truncation customization')
label-text--attribute='style="--pf-v6-c-label__text--MaxWidth: 38ch"'
- label-icon--value="cube"}}
+ label-icon--value="rh-ui-add-circle-fill"}}
{{> label
label--IsRemovable=true
@@ -116,7 +116,7 @@
label--id=(concat label--variants--id '-link-removable-disabled')
label-text--value=(concat label--variants--title ' link removable (disabled)')
label-content--IsLink=true
- label-icon--value="cube"}}
+ label-icon--value="rh-ui-add-circle-fill"}}
{{> label
label--IsRemovable=true
@@ -124,7 +124,7 @@
label--id=(concat label--variants--id '-button-removable-disabled')
label-text--value=(concat label--variants--title ' button removable (disabled)')
label-content--IsButton=true
- label-icon--value="cube"}}
+ label-icon--value="rh-ui-add-circle-fill"}}
{{#if @partial-block}}
{{> @partial-block}}
diff --git a/src/patternfly/components/Label/label-icon--map.hbs b/src/patternfly/components/Label/label-icon--map.hbs
index b709f9baec..a9c5b161a1 100644
--- a/src/patternfly/components/Label/label-icon--map.hbs
+++ b/src/patternfly/components/Label/label-icon--map.hbs
@@ -1,9 +1,9 @@
{{#if label-icon--value}}
- {{~label-icon--value}}
+ {{~pfIcon label-icon--value}}
{{else}}
- {{~#ifEquals label--status "success"}}check-circle{{/ifEquals}}
- {{~#ifEquals label--status "warning"}}exclamation-triangle{{/ifEquals}}
- {{~#ifEquals label--status "danger"}}exclamation-circle{{/ifEquals}}
- {{~#ifEquals label--status "info"}}info-circle{{/ifEquals}}
- {{~#ifEquals label--status "custom"}}bell{{/ifEquals}}
-{{/if}}
\ No newline at end of file
+ {{~#ifEquals label--status "success"}}{{pfIcon "rh-ui-check-circle-fill"}}{{/ifEquals}}
+ {{~#ifEquals label--status "warning"}}{{pfIcon "rh-ui-warning-fill"}}{{/ifEquals}}
+ {{~#ifEquals label--status "danger"}}{{pfIcon "rh-ui-error-fill"}}{{/ifEquals}}
+ {{~#ifEquals label--status "info"}}{{pfIcon "rh-ui-information-fill"}}{{/ifEquals}}
+ {{~#ifEquals label--status "custom"}}{{pfIcon "rh-ui-notification-fill"}}{{/ifEquals}}
+{{/if}}
diff --git a/src/patternfly/components/Label/label-icon.hbs b/src/patternfly/components/Label/label-icon.hbs
index 7609ca88ae..d0da9b1a15 100644
--- a/src/patternfly/components/Label/label-icon.hbs
+++ b/src/patternfly/components/Label/label-icon.hbs
@@ -3,7 +3,7 @@
{{{label-icon--attribute}}}
{{/if}}>
{{#ifAny label-icon--value label--status}}
-
+ {{> label-icon--map}}
{{/ifAny}}
{{#if @partial-block}}
{{> @partial-block}}
diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss
index f5f5a312d8..54b075d463 100644
--- a/src/patternfly/components/Label/label.scss
+++ b/src/patternfly/components/Label/label.scss
@@ -11,7 +11,7 @@
--#{$label}--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
--#{$label}--FontSize: var(--pf-t--global--font--size--body--sm);
- --#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
+ --#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
// Gray (default)
--#{$label}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
diff --git a/src/patternfly/demos/Card/examples/Card.md b/src/patternfly/demos/Card/examples/Card.md
index e3b4aa2bbb..90e16beef2 100644
--- a/src/patternfly/demos/Card/examples/Card.md
+++ b/src/patternfly/demos/Card/examples/Card.md
@@ -22,21 +22,21 @@ import './Card.css'
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label--IsCompact=true label-text--value="Set up your cluster" label-icon--value="info-circle"}}
+ {{> label label--IsCompact=true label-text--value="Set up your cluster" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--color="purple"
label--IsCompact=true
label-text--value="Guided tours"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--color="green"
label--IsCompact=true
label-text--value="Quick starts"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label label--IsOverflow=true label--IsCompact=true label-text--value="1 more"}}
@@ -67,7 +67,7 @@ import './Card.css'
{{#> grid grid--modifier="pf-m-all-6-col-on-md pf-m-all-3-col-on-lg pf-m-gutter"}}
{{#> l-flex l-flex--modifier="pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start"}}
{{#> l-flex l-flex--modifier="pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow"}}
- {{> label label--color="blue" label-text--value="Set up your cluster" label-icon--value="info-circle"}}
+ {{> label label--color="blue" label-text--value="Set up your cluster" label-icon--value="rh-ui-information-fill"}}
Continue setting up your cluster to access all you can in the Console
{{#> list list--modifier="pf-m-plain"}}
@@ -87,7 +87,7 @@ import './Card.css'
{{/l-flex}}
{{#> l-flex l-flex--modifier="pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start"}}
{{#> l-flex l-flex--modifier="pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow"}}
- {{> label label--color="purple" label-text--value="Guided tours" label-icon--value="info-circle"}}
+ {{> label label--color="purple" label-text--value="Guided tours" label-icon--value="rh-ui-information-fill"}}
Tour some of the key features around the console
{{#> list list--modifier="pf-m-plain"}}
@@ -104,7 +104,7 @@ import './Card.css'
{{/l-flex}}
{{#> l-flex l-flex--modifier="pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start"}}
{{#> l-flex l-flex--modifier="pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow"}}
- {{> label label--color="green" label-text--value="Quick starts" label-icon--value="info-circle"}}
+ {{> label label--color="green" label-text--value="Quick starts" label-icon--value="rh-ui-information-fill"}}
Get started with features using our step-by-step documentation
{{#> list list--modifier="pf-m-plain"}}
@@ -124,7 +124,7 @@ import './Card.css'
{{/l-flex}}
{{#> l-flex l-flex--modifier="pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start"}}
{{#> l-flex l-flex--modifier="pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow"}}
- {{> label label--color="orange" label-text--value="Learning resources" label-icon--value="info-circle"}}
+ {{> label label--color="orange" label-text--value="Learning resources" label-icon--value="rh-ui-information-fill"}}
Learn about new features within the Console and get started with demo apps
{{#> list list--modifier="pf-m-plain"}}
diff --git a/src/patternfly/demos/Card/templates/card-demo--notification-drawer.hbs b/src/patternfly/demos/Card/templates/card-demo--notification-drawer.hbs
index 781312f46a..25da3193fa 100644
--- a/src/patternfly/demos/Card/templates/card-demo--notification-drawer.hbs
+++ b/src/patternfly/demos/Card/templates/card-demo--notification-drawer.hbs
@@ -13,27 +13,27 @@
label--id="default-red-icon"
label--color="red"
label-text--value="1"
- label-icon--value="exclamation-circle"}}
+ label-icon--value="rh-ui-error-fill"}}
{{> label
label--id="default-orange-icon"
label--color="orange"
label-text--value="3"
- label-icon--value="exclamation-triangle"}}
+ label-icon--value="rh-ui-warning-fill"}}
{{> label
label--id="default-green-icon"
label--color="green"
label-text--value="3"
- label-icon--value="check-circle"}}
+ label-icon--value="rh-ui-check-circle-fill"}}
{{> label
label--id="default-blue-icon"
label--color="blue"
label-text--value="3"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{> label
label--id="default-blue-icon"
label--color="teal"
label-text--value="3"
- label-icon--value="bell"}}
+ label-icon--value="rh-ui-notification-fill"}}
{{/l-flex}}
{{/notification-drawer-group-toggle-title}}
{{/l-flex}}
diff --git a/src/patternfly/demos/Card/templates/card-template-status.hbs b/src/patternfly/demos/Card/templates/card-template-status.hbs
index 11fe963101..ad166cca2a 100644
--- a/src/patternfly/demos/Card/templates/card-template-status.hbs
+++ b/src/patternfly/demos/Card/templates/card-template-status.hbs
@@ -134,35 +134,35 @@
label--id="default-red-icon"
label--color="red"
label-text--value="1"
- label-icon--value="exclamation-circle"}}
+ label-icon--value="rh-ui-error-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--id="default-orange-icon"
label--color="orange"
label-text--value="1"
- label-icon--value="exclamation-circle"}}
+ label-icon--value="rh-ui-error-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--id="default-green-icon"
label--color="green"
label-text--value="3"
- label-icon--value="check-circle"}}
+ label-icon--value="rh-ui-check-circle-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--id="default-blue-icon"
label--color="blue"
label-text--value="3"
- label-icon--value="info-circle"}}
+ label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label
label--id="default-teal-icon"
label--color="teal"
label-text--value="3"
- label-icon--value="bell"}}
+ label-icon--value="rh-ui-notification-fill"}}
{{/label-group-list-item}}
{{/label-group-list}}
{{/label-group-main}}
diff --git a/src/patternfly/demos/Form/examples/BasicForms.md b/src/patternfly/demos/Form/examples/BasicForms.md
index e500f47b25..4e16606aa2 100644
--- a/src/patternfly/demos/Form/examples/BasicForms.md
+++ b/src/patternfly/demos/Form/examples/BasicForms.md
@@ -424,10 +424,10 @@ subsection: forms
{{#> label-group-main}}
{{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}}
{{#> label-group-list-item}}
- {{> label label--id=(concat label-group--id '-label-1') label--IsRemovable=true label-text--value="prometheus=k8s" label-icon--value="info-circle"}}
+ {{> label label--id=(concat label-group--id '-label-1') label--IsRemovable=true label-text--value="prometheus=k8s" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
- {{> label label--id=(concat label-group--id '-label-2') label--IsRemovable=true label-text--value="new" label-icon--value="info-circle"}}
+ {{> label label--id=(concat label-group--id '-label-2') label--IsRemovable=true label-text--value="new" label-icon--value="rh-ui-information-fill"}}
{{/label-group-list-item}}
{{#> label-group-list-item}}
{{> label label--IsAdd="true" label-text--value="Add Label"}}
diff --git a/src/patternfly/demos/Tabs/tabs--pod-page-title.hbs b/src/patternfly/demos/Tabs/tabs--pod-page-title.hbs
index 8d409508c7..d5b956bd78 100644
--- a/src/patternfly/demos/Tabs/tabs--pod-page-title.hbs
+++ b/src/patternfly/demos/Tabs/tabs--pod-page-title.hbs
@@ -12,6 +12,6 @@
{{/title}}
{{/l-flex-item}}
{{#> l-flex-item l-flex-item--modifier="pf-m-flex-none"}}
- {{> label label-text--value="Running" label-icon--value="info-circle"}}
+ {{> label label-text--value="Running" label-icon--value="rh-ui-information-fill"}}
{{/l-flex-item}}
{{/l-flex}}
From b6bd38afaa4fc85ca6efd4ca22ff43f6c6171932 Mon Sep 17 00:00:00 2001
From: Tarun Vashishtha <65185652+tarunvashishth@users.noreply.github.com>
Date: Fri, 27 Feb 2026 13:31:06 +0530
Subject: [PATCH 2/8] fix(label): align label font/icon/gap tokens to defaults
(closes #8138)
---
src/patternfly/components/Label/label.scss | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss
index 54b075d463..2bcb18a238 100644
--- a/src/patternfly/components/Label/label.scss
+++ b/src/patternfly/components/Label/label.scss
@@ -10,7 +10,7 @@
--#{$label}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--#{$label}--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
- --#{$label}--FontSize: var(--pf-t--global--font--size--body--sm);
+ --#{$label}--FontSize: var(--pf-t--global--font--size--body--default);
--#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
// Gray (default)
@@ -204,17 +204,17 @@
--#{$label}--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
--#{$label}--m-compact--PaddingBlockEnd: 0;
--#{$label}--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
- --#{$label}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
+ --#{$label}--m-compact--FontSize: var(--pf-t--global--font--size--body--default);
--#{$label}--m-compact--m-editable--TextUnderlineOffset: #{pf-size-prem(1px)};
--#{$label}--m-compact--MinWidth: calc((var(--#{$label}--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--#{$label}--m-compact--PaddingBlockStart) + var(--#{$label}--m-compact--PaddingBlockEnd)));
// Content
--#{$label}__content--MaxWidth: 100%;
- --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
+ --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
--#{$label}__content--Cursor: initial;
// Icon
- --#{$label}__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
+ --#{$label}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
// Text
--#{$label}__text--MaxWidth: 100%;
@@ -223,7 +223,7 @@
--#{$label}__actions--MarginInlineEnd: 0; // TODO - remove in breaking change
// Actions button (close)
- --#{$label}__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
+ --#{$label}__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--default);
--#{$label}__actions--c-button--OutlineOffset: #{pf-size-prem(-3px)};
--#{$label}__actions--c-button--MarginBlockStart: 0; // TODO - remove in breaking change
--#{$label}__actions--c-button--MarginBlockEnd: 0; // TODO - remove in breaking change
From ed0b240c5c5b71e6d6ef91e233c2790ad950f77c Mon Sep 17 00:00:00 2001
From: Tarun Vashishtha <65185652+tarunvashishth@users.noreply.github.com>
Date: Sat, 4 Apr 2026 01:39:39 +0530
Subject: [PATCH 3/8] fix(label): correct font, gap, and icon token mappings
---
src/patternfly/components/Label/label.scss | 16 +++++++++++-----
1 file changed, 11 insertions(+), 5 deletions(-)
diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss
index 2bcb18a238..47c0c46cdb 100644
--- a/src/patternfly/components/Label/label.scss
+++ b/src/patternfly/components/Label/label.scss
@@ -10,8 +10,8 @@
--#{$label}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--#{$label}--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
- --#{$label}--FontSize: var(--pf-t--global--font--size--body--default);
- --#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --#{$label}--FontSize: var(--pf-t--global--font--size--body--sm);
+ --#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
// Gray (default)
--#{$label}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
@@ -204,13 +204,16 @@
--#{$label}--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
--#{$label}--m-compact--PaddingBlockEnd: 0;
--#{$label}--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
- --#{$label}--m-compact--FontSize: var(--pf-t--global--font--size--body--default);
+ --#{$label}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
+ --#{$label}--m-compact--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
+ --#{$label}--m-compact__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
+ --#{$label}--m-compact__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
--#{$label}--m-compact--m-editable--TextUnderlineOffset: #{pf-size-prem(1px)};
--#{$label}--m-compact--MinWidth: calc((var(--#{$label}--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--#{$label}--m-compact--PaddingBlockStart) + var(--#{$label}--m-compact--PaddingBlockEnd)));
// Content
--#{$label}__content--MaxWidth: 100%;
- --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--sm);
--#{$label}__content--Cursor: initial;
// Icon
@@ -223,7 +226,7 @@
--#{$label}__actions--MarginInlineEnd: 0; // TODO - remove in breaking change
// Actions button (close)
- --#{$label}__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --#{$label}__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
--#{$label}__actions--c-button--OutlineOffset: #{pf-size-prem(-3px)};
--#{$label}__actions--c-button--MarginBlockStart: 0; // TODO - remove in breaking change
--#{$label}__actions--c-button--MarginBlockEnd: 0; // TODO - remove in breaking change
@@ -429,6 +432,9 @@
--#{$label}--PaddingBlockEnd: var(--#{$label}--m-compact--PaddingBlockEnd);
--#{$label}--PaddingInlineStart: var(--#{$label}--m-compact--PaddingInlineStart);
--#{$label}--FontSize: var(--#{$label}--m-compact--FontSize);
+ --#{$label}--Gap: var(--#{$label}--m-compact--Gap);
+ --#{$label}__content--Gap: var(--#{$label}--m-compact__content--Gap);
+ --#{$label}__icon--FontSize: var(--#{$label}--m-compact__icon--FontSize);
--#{$label}--MinWidth: var(--#{$label}--m-compact--MinWidth);
--#{$label}--m-editable--TextUnderlineOffset: var(--#{$label}--m-compact--m-editable--TextUnderlineOffset);
}
From ef272522b523540544294c6cd54b0d936611573c Mon Sep 17 00:00:00 2001
From: Michael Coker
Date: Tue, 21 Apr 2026 16:34:19 -0500
Subject: [PATCH 4/8] chore: updates per figma
---
.../components/Label/examples/Label.css | 2 +
.../components/Label/examples/Label.md | 20 ++++++++
src/patternfly/components/Label/label.hbs | 1 +
src/patternfly/components/Label/label.scss | 49 ++++++++++++++++---
4 files changed, 66 insertions(+), 6 deletions(-)
diff --git a/src/patternfly/components/Label/examples/Label.css b/src/patternfly/components/Label/examples/Label.css
index 651b4aac63..6c0b5ecbcc 100644
--- a/src/patternfly/components/Label/examples/Label.css
+++ b/src/patternfly/components/Label/examples/Label.css
@@ -1,6 +1,7 @@
#ws-core-c-label-filled .ws-preview-html,
#ws-core-c-label-outline .ws-preview-html,
#ws-core-c-label-compact .ws-preview-html,
+#ws-core-c-label-large .ws-preview-html,
#ws-core-c-label-overflow .ws-preview-html {
margin: -4px;
}
@@ -8,6 +9,7 @@
#ws-core-c-label-filled .pf-v6-c-label,
#ws-core-c-label-outline .pf-v6-c-label,
#ws-core-c-label-compact .pf-v6-c-label,
+#ws-core-c-label-large .pf-v6-c-label,
#ws-core-c-label-overflow .pf-v6-c-label {
margin: 4px;
}
diff --git a/src/patternfly/components/Label/examples/Label.md b/src/patternfly/components/Label/examples/Label.md
index 770016fe41..5b3b4d8e28 100644
--- a/src/patternfly/components/Label/examples/Label.md
+++ b/src/patternfly/components/Label/examples/Label.md
@@ -38,6 +38,25 @@ import './Label.css'
label--IsCompact=true}}
```
+### Large
+
+```hbs
+{{> label--variants
+ label--IsFilled=true
+ label--variants--title="Large"
+ label--variants--id="large"
+ label--IsLarge=true}}
+
+
+
+{{> label--variants
+ label--variants--title="Large"
+ label--variants--id="large-outline"
+ label--color="blue"
+ label--IsOutlined=true
+ label--IsLarge=true}}
+```
+
### Overflow
This style of label is used to indicate overflow within a label group.
@@ -646,6 +665,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
| `.pf-m-filled` | `.pf-v6-c-label` | Modifies label for filled styles. |
| `.pf-m-outline` | `.pf-v6-c-label` | Modifies label for outline styles. |
| `.pf-m-compact` | `.pf-v6-c-label` | Modifies label for compact styles. |
+| `.pf-m-large` | `.pf-v6-c-label` | Modifies label for large styles. |
| `.pf-m-overflow` | `.pf-v6-c-label` | Modifies label for overflow styles for use in a label group. |
| `.pf-m-add` | `.pf-v6-c-label` | Modifies label for add styles for use in a label group. |
| `.pf-m-blue` | `.pf-v6-c-label` | Modifies the label to have blue colored styling. |
diff --git a/src/patternfly/components/Label/label.hbs b/src/patternfly/components/Label/label.hbs
index 3a46673a73..a397a08f8c 100644
--- a/src/patternfly/components/Label/label.hbs
+++ b/src/patternfly/components/Label/label.hbs
@@ -2,6 +2,7 @@
{{#if label--IsFilled}} pf-m-filled{{/if}}
{{#if label--IsOutlined}} pf-m-outline{{/if}}
{{#if label--IsCompact}} pf-m-compact{{/if}}
+ {{#if label--IsLarge}} pf-m-large{{/if}}
{{#if label--IsOverflow}} pf-m-overflow{{/if}}
{{#if label--IsAdd}} pf-m-add{{/if}}
{{#if label--IsEditable}} pf-m-editable{{/if}}
diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss
index 47c0c46cdb..4cbff709f2 100644
--- a/src/patternfly/components/Label/label.scss
+++ b/src/patternfly/components/Label/label.scss
@@ -11,12 +11,13 @@
--#{$label}--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
--#{$label}--FontSize: var(--pf-t--global--font--size--body--sm);
- --#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
+ --#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
// Gray (default)
--#{$label}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
--#{$label}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
--#{$label}__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+ --#{$label}--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
--#{$label}--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
--#{$label}--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
--#{$label}--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
@@ -27,6 +28,7 @@
--#{$label}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
--#{$label}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
--#{$label}--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
+ --#{$label}--m-blue--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
--#{$label}--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
--#{$label}--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
--#{$label}--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
@@ -37,6 +39,7 @@
--#{$label}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
--#{$label}--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
--#{$label}--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
+ --#{$label}--m-red--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
--#{$label}--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
--#{$label}--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
--#{$label}--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
@@ -47,6 +50,7 @@
--#{$label}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
--#{$label}--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
--#{$label}--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
+ --#{$label}--m-orange--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
--#{$label}--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
--#{$label}--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
--#{$label}--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
@@ -57,6 +61,7 @@
--#{$label}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
--#{$label}--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
--#{$label}--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
+ --#{$label}--m-orangered--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
--#{$label}--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
--#{$label}--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
--#{$label}--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
@@ -67,6 +72,7 @@
--#{$label}--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
--#{$label}--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
--#{$label}--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+ --#{$label}--m-yellow--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
--#{$label}--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
--#{$label}--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
--#{$label}--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
@@ -77,6 +83,7 @@
--#{$label}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
--#{$label}--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
--#{$label}--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
+ --#{$label}--m-green--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
--#{$label}--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
--#{$label}--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
--#{$label}--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
@@ -87,6 +94,7 @@
--#{$label}--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
--#{$label}--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
--#{$label}--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+ --#{$label}--m-teal--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
--#{$label}--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
--#{$label}--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
--#{$label}--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
@@ -97,6 +105,7 @@
--#{$label}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
--#{$label}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
--#{$label}--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
+ --#{$label}--m-purple--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
--#{$label}--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
--#{$label}--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
--#{$label}--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
@@ -107,6 +116,7 @@
--#{$label}--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
--#{$label}--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
--#{$label}--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
+ --#{$label}--m-success--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
--#{$label}--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
--#{$label}--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
@@ -119,6 +129,7 @@
--#{$label}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
--#{$label}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
--#{$label}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
+ --#{$label}--m-warning--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
--#{$label}--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
--#{$label}--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
@@ -131,6 +142,7 @@
--#{$label}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
--#{$label}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
--#{$label}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
+ --#{$label}--m-danger--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
--#{$label}--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
--#{$label}--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
@@ -143,6 +155,7 @@
--#{$label}--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
--#{$label}--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
--#{$label}--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
+ --#{$label}--m-info--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
--#{$label}--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
--#{$label}--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
@@ -155,6 +168,7 @@
--#{$label}--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
--#{$label}--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
--#{$label}--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
+ --#{$label}--m-custom--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
--#{$label}--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
--#{$label}--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
@@ -165,7 +179,6 @@
// Clickable
--#{$label}--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
- --#{$label}--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--m-clickable__content--Cursor: pointer;
// Filled
@@ -205,19 +218,24 @@
--#{$label}--m-compact--PaddingBlockEnd: 0;
--#{$label}--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
--#{$label}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
- --#{$label}--m-compact--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
- --#{$label}--m-compact__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
+ --#{$label}--m-compact--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --#{$label}--m-compact__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
--#{$label}--m-compact__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
--#{$label}--m-compact--m-editable--TextUnderlineOffset: #{pf-size-prem(1px)};
--#{$label}--m-compact--MinWidth: calc((var(--#{$label}--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--#{$label}--m-compact--PaddingBlockStart) + var(--#{$label}--m-compact--PaddingBlockEnd)));
+ // Large
+ --#{$label}--m-large--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --#{$label}--m-large__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --#{$label}--m-large__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--default);
+
// Content
--#{$label}__content--MaxWidth: 100%;
- --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--sm);
+ --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
--#{$label}__content--Cursor: initial;
// Icon
- --#{$label}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --#{$label}__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
// Text
--#{$label}__text--MaxWidth: 100%;
@@ -277,6 +295,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-blue--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-blue--Color);
--#{$label}__icon--Color: var(--#{$label}--m-blue__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-blue--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-blue--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-blue--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-blue--m-clickable--hover__icon--Color);
@@ -288,6 +307,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-red--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-red--Color);
--#{$label}__icon--Color: var(--#{$label}--m-red__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-red--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-red--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-red--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-red--m-clickable--hover__icon--Color);
@@ -299,6 +319,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-orange--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-orange--Color);
--#{$label}__icon--Color: var(--#{$label}--m-orange__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-orange--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-orange--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-orange--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-orange--m-clickable--hover__icon--Color);
@@ -310,6 +331,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-orangered--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-orangered--Color);
--#{$label}__icon--Color: var(--#{$label}--m-orangered__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-orangered--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-orangered--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-orangered--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-orangered--m-clickable--hover__icon--Color);
@@ -321,6 +343,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-yellow--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-yellow--Color);
--#{$label}__icon--Color: var(--#{$label}--m-yellow__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-yellow--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-yellow--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-yellow--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-yellow--m-clickable--hover__icon--Color);
@@ -332,6 +355,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-green--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-green--Color);
--#{$label}__icon--Color: var(--#{$label}--m-green__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-green--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-green--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-green--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-green--m-clickable--hover__icon--Color);
@@ -343,6 +367,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-teal--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-teal--Color);
--#{$label}__icon--Color: var(--#{$label}--m-teal__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-teal--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-teal--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-teal--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-teal--m-clickable--hover__icon--Color);
@@ -354,6 +379,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-purple--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-purple--Color);
--#{$label}__icon--Color: var(--#{$label}--m-purple__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-purple--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-purple--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-purple--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-purple--m-clickable--hover__icon--Color);
@@ -365,6 +391,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-success--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-success--Color);
--#{$label}__icon--Color: var(--#{$label}--m-success__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-success--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-success--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-success--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-clickable--hover__icon--Color);
@@ -378,6 +405,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-warning--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-warning--Color);
--#{$label}__icon--Color: var(--#{$label}--m-warning__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-warning--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-warning--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-warning--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-warning--m-clickable--hover__icon--Color);
@@ -391,6 +419,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-danger--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-danger--Color);
--#{$label}__icon--Color: var(--#{$label}--m-danger__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-danger--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-danger--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-danger--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-danger--m-clickable--hover__icon--Color);
@@ -404,6 +433,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-info--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-info--Color);
--#{$label}__icon--Color: var(--#{$label}--m-info__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-info--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-info--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-info--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-info--m-clickable--hover__icon--Color);
@@ -417,6 +447,7 @@
--#{$label}--BackgroundColor: var(--#{$label}--m-custom--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-custom--Color);
--#{$label}__icon--Color: var(--#{$label}--m-custom__icon--Color);
+ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-custom--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-custom--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-custom--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-custom--m-clickable--hover__icon--Color);
@@ -439,6 +470,12 @@
--#{$label}--m-editable--TextUnderlineOffset: var(--#{$label}--m-compact--m-editable--TextUnderlineOffset);
}
+ &.pf-m-large {
+ --#{$label}--FontSize: var(--#{$label}--m-large--FontSize);
+ --#{$label}__icon--FontSize: var(--#{$label}--m-large__icon--FontSize);
+ --#{$label}__actions--c-button--FontSize: var(--#{$label}--m-large__actions--c-button--FontSize);
+ }
+
&.pf-m-filled {
.#{$label}__actions .#{$button} {
--#{$button}__icon--Color: var(--#{$label}--m-filled__actions--c-button__icon--Color);
From e777202b28454f3399628e35aac1465c86528ae8 Mon Sep 17 00:00:00 2001
From: Michael Coker
Date: Tue, 21 Apr 2026 16:46:15 -0500
Subject: [PATCH 5/8] chore: fix tokens
---
src/patternfly/components/Label/label.scss | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss
index 4cbff709f2..fe06593cd5 100644
--- a/src/patternfly/components/Label/label.scss
+++ b/src/patternfly/components/Label/label.scss
@@ -221,11 +221,12 @@
--#{$label}--m-compact--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
--#{$label}--m-compact__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
--#{$label}--m-compact__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
+ --#{$label}--m-compact__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
--#{$label}--m-compact--m-editable--TextUnderlineOffset: #{pf-size-prem(1px)};
--#{$label}--m-compact--MinWidth: calc((var(--#{$label}--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--#{$label}--m-compact--PaddingBlockStart) + var(--#{$label}--m-compact--PaddingBlockEnd)));
// Large
- --#{$label}--m-large--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --#{$label}--m-large--FontSize: var(--pf-t--global--font--size--body--default);
--#{$label}--m-large__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
--#{$label}--m-large__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--default);
@@ -466,6 +467,7 @@
--#{$label}--Gap: var(--#{$label}--m-compact--Gap);
--#{$label}__content--Gap: var(--#{$label}--m-compact__content--Gap);
--#{$label}__icon--FontSize: var(--#{$label}--m-compact__icon--FontSize);
+ --#{$label}__actions--c-button--FontSize: var(--#{$label}--m-compact__actions--c-button--FontSize);
--#{$label}--MinWidth: var(--#{$label}--m-compact--MinWidth);
--#{$label}--m-editable--TextUnderlineOffset: var(--#{$label}--m-compact--m-editable--TextUnderlineOffset);
}
From 4a566680a5d707dddd6982672278011bf8ee30f1 Mon Sep 17 00:00:00 2001
From: Michael Coker
Date: Wed, 22 Apr 2026 14:41:19 -0500
Subject: [PATCH 6/8] chore: change gap to compact except for large
---
src/patternfly/components/Label/label.scss | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss
index fe06593cd5..9faffb9ccb 100644
--- a/src/patternfly/components/Label/label.scss
+++ b/src/patternfly/components/Label/label.scss
@@ -11,7 +11,7 @@
--#{$label}--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
--#{$label}--FontSize: var(--pf-t--global--font--size--body--sm);
- --#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
// Gray (default)
--#{$label}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
@@ -218,8 +218,8 @@
--#{$label}--m-compact--PaddingBlockEnd: 0;
--#{$label}--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
--#{$label}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
- --#{$label}--m-compact--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
- --#{$label}--m-compact__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --#{$label}--m-compact--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
+ --#{$label}--m-compact__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
--#{$label}--m-compact__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
--#{$label}--m-compact__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
--#{$label}--m-compact--m-editable--TextUnderlineOffset: #{pf-size-prem(1px)};
@@ -229,10 +229,12 @@
--#{$label}--m-large--FontSize: var(--pf-t--global--font--size--body--default);
--#{$label}--m-large__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
--#{$label}--m-large__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --#{$label}--m-large--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --#{$label}--m-large__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
// Content
--#{$label}__content--MaxWidth: 100%;
- --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
--#{$label}__content--Cursor: initial;
// Icon
@@ -474,6 +476,8 @@
&.pf-m-large {
--#{$label}--FontSize: var(--#{$label}--m-large--FontSize);
+ --#{$label}--Gap: var(--#{$label}--m-large--Gap);
+ --#{$label}__content--Gap: var(--#{$label}--m-large__content--Gap);
--#{$label}__icon--FontSize: var(--#{$label}--m-large__icon--FontSize);
--#{$label}__actions--c-button--FontSize: var(--#{$label}--m-large__actions--c-button--FontSize);
}
From 6dca3329fcc07b78ac5c2a7869ee18e10b610b2b Mon Sep 17 00:00:00 2001
From: Michael Coker
Date: Fri, 24 Apr 2026 19:32:00 -0500
Subject: [PATCH 7/8] chore: bunch of updates
---
.../components/Label/label--variants.hbs | 15 +
src/patternfly/components/Label/label.hbs | 1 +
src/patternfly/components/Label/label.scss | 268 ++++++++++++++----
3 files changed, 236 insertions(+), 48 deletions(-)
diff --git a/src/patternfly/components/Label/label--variants.hbs b/src/patternfly/components/Label/label--variants.hbs
index d396632412..1878ac0ca9 100644
--- a/src/patternfly/components/Label/label--variants.hbs
+++ b/src/patternfly/components/Label/label--variants.hbs
@@ -30,6 +30,13 @@
label--id=(concat label--variants--id '-status-button-removable')
label-text--value=(concat label--variants--title ' button removable')}}
+{{> label
+ label--IsRemovable=true
+ label-content--IsButton=true
+ label--id=(concat label--variants--id '-status-button-clicked')
+ label-text--value=(concat label--variants--title ' button clicked')
+ label--IsClicked=true}}
+
{{> label
label--id=(concat label--variants--id '-status-truncated')
label-text--value=(concat label--variants--title ', max-width truncation customization')
@@ -97,6 +104,14 @@
label-text--value=(concat label--variants--title ' button removable')
label-content--IsButton=true}}
+ {{> label
+ label--IsRemovable=true
+ label--IsClicked=true
+ label--id=(concat label--variants--id '-button-clicked')
+ label-text--value=(concat label--variants--title ' button clicked')
+ label-content--IsButton=true
+ label-icon--value="rh-ui-add-circle-fill"}}
+
{{> label
label--id=(concat label--variants--id '-truncated')
label-text--value=(concat label--variants--title ' label, max-width truncation customization')
diff --git a/src/patternfly/components/Label/label.hbs b/src/patternfly/components/Label/label.hbs
index a397a08f8c..471d177507 100644
--- a/src/patternfly/components/Label/label.hbs
+++ b/src/patternfly/components/Label/label.hbs
@@ -8,6 +8,7 @@
{{#if label--IsEditable}} pf-m-editable{{/if}}
{{#if label--IsEditableActive}} pf-m-editable-active{{/if}}
{{#if label--IsDisabled}} pf-m-disabled{{/if}}
+ {{#if label--IsClicked}} pf-m-clicked{{/if}}
{{#ifAny label--color label--status}}
pf-m-{{ternary label--status label--status label--color}}
{{/ifAny}}
diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss
index 9faffb9ccb..06aba023b7 100644
--- a/src/patternfly/components/Label/label.scss
+++ b/src/patternfly/components/Label/label.scss
@@ -18,169 +18,247 @@
--#{$label}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
--#{$label}__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
--#{$label}--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
- --#{$label}--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
- --#{$label}--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
- --#{$label}--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
+ --#{$label}--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+ --#{$label}--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+ --#{$label}--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+ --#{$label}--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-gray--clicked);
+ --#{$label}--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--clicked);
+ --#{$label}--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--clicked);
+ --#{$label}--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--clicked);
--#{$label}--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--clicked);
// Blue
--#{$label}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
--#{$label}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
--#{$label}--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
--#{$label}--m-blue--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
- --#{$label}--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
- --#{$label}--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
- --#{$label}--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
+ --#{$label}--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+ --#{$label}--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+ --#{$label}--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
+ --#{$label}--m-blue--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-blue--clicked);
+ --#{$label}--m-blue--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--clicked);
+ --#{$label}--m-blue--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--clicked);
+ --#{$label}--m-blue--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--clicked);
--#{$label}--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
--#{$label}--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
+ --#{$label}--m-blue--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--clicked);
// Red
--#{$label}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
--#{$label}--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
--#{$label}--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
--#{$label}--m-red--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
- --#{$label}--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
- --#{$label}--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
- --#{$label}--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
+ --#{$label}--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+ --#{$label}--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+ --#{$label}--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
+ --#{$label}--m-red--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-red--clicked);
+ --#{$label}--m-red--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--clicked);
+ --#{$label}--m-red--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--red--clicked);
+ --#{$label}--m-red--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--red--clicked);
--#{$label}--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
--#{$label}--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
+ --#{$label}--m-red--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--red--clicked);
// Orange
--#{$label}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
--#{$label}--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
--#{$label}--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
--#{$label}--m-orange--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
- --#{$label}--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
- --#{$label}--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
- --#{$label}--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
+ --#{$label}--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+ --#{$label}--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+ --#{$label}--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
+ --#{$label}--m-orange--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-orange--clicked);
+ --#{$label}--m-orange--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--clicked);
+ --#{$label}--m-orange--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--clicked);
+ --#{$label}--m-orange--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--clicked);
--#{$label}--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
--#{$label}--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
+ --#{$label}--m-orange--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--clicked);
// Orangered
--#{$label}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
--#{$label}--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
--#{$label}--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
--#{$label}--m-orangered--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
- --#{$label}--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
- --#{$label}--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
- --#{$label}--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
+ --#{$label}--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+ --#{$label}--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+ --#{$label}--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
+ --#{$label}--m-orangered--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--clicked);
+ --#{$label}--m-orangered--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--clicked);
+ --#{$label}--m-orangered--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--clicked);
+ --#{$label}--m-orangered--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--clicked);
--#{$label}--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
--#{$label}--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
+ --#{$label}--m-orangered--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--clicked);
// Yellow
--#{$label}--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
--#{$label}--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
--#{$label}--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
--#{$label}--m-yellow--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
- --#{$label}--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
- --#{$label}--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
- --#{$label}--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
+ --#{$label}--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+ --#{$label}--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+ --#{$label}--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+ --#{$label}--m-yellow--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--clicked);
+ --#{$label}--m-yellow--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--clicked);
+ --#{$label}--m-yellow--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--clicked);
+ --#{$label}--m-yellow--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--clicked);
--#{$label}--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
--#{$label}--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
+ --#{$label}--m-yellow--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--clicked);
// Green
--#{$label}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
--#{$label}--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
--#{$label}--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
--#{$label}--m-green--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
- --#{$label}--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
- --#{$label}--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
- --#{$label}--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
+ --#{$label}--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+ --#{$label}--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+ --#{$label}--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
+ --#{$label}--m-green--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-green--clicked);
+ --#{$label}--m-green--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--clicked);
+ --#{$label}--m-green--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--green--clicked);
+ --#{$label}--m-green--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--green--clicked);
--#{$label}--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
--#{$label}--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
+ --#{$label}--m-green--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--green--clicked);
// Teal
--#{$label}--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
--#{$label}--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
--#{$label}--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
--#{$label}--m-teal--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
- --#{$label}--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
- --#{$label}--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
- --#{$label}--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
+ --#{$label}--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+ --#{$label}--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+ --#{$label}--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+ --#{$label}--m-teal--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-teal--clicked);
+ --#{$label}--m-teal--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--clicked);
+ --#{$label}--m-teal--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--clicked);
+ --#{$label}--m-teal--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--clicked);
--#{$label}--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
--#{$label}--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
+ --#{$label}--m-teal--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--clicked);
// Purple
--#{$label}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
--#{$label}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
--#{$label}--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
--#{$label}--m-purple--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
- --#{$label}--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
- --#{$label}--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
- --#{$label}--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
+ --#{$label}--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+ --#{$label}--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
+ --#{$label}--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
+ --#{$label}--m-purple--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-purple--clicked);
+ --#{$label}--m-purple--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--clicked);
+ --#{$label}--m-purple--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--clicked);
+ --#{$label}--m-purple--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--clicked);
--#{$label}--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
--#{$label}--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
+ --#{$label}--m-purple--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--clicked);
// Success
--#{$label}--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
--#{$label}--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
--#{$label}--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
- --#{$label}--m-success--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
- --#{$label}--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
- --#{$label}--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
- --#{$label}--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
+ --#{$label}--m-success--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+ --#{$label}--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--default);
+ --#{$label}--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--default);
+ --#{$label}--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
+ --#{$label}--m-success--m-clicked--Color: var(--pf-t--global--text--color--status--on-success--clicked);
+ --#{$label}--m-success--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-success--clicked);
+ --#{$label}--m-success--m-clicked--BackgroundColor: var(--pf-t--global--color--status--success--clicked);
+ --#{$label}--m-success--m-clicked--BorderColor: var(--pf-t--global--border--color--status--success--clicked);
--#{$label}--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
--#{$label}--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
--#{$label}--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
+ --#{$label}--m-success--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--success--clicked);
+ --#{$label}--m-success--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--success--clicked);
// Warning
--#{$label}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
--#{$label}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
--#{$label}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
- --#{$label}--m-warning--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
- --#{$label}--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
- --#{$label}--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
- --#{$label}--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
+ --#{$label}--m-warning--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+ --#{$label}--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+ --#{$label}--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--default);
+ --#{$label}--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
+ --#{$label}--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
+ --#{$label}--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
+ --#{$label}--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
+ --#{$label}--m-warning--m-clicked--BorderColor: var(--pf-t--global--border--color--status--warning--clicked);
--#{$label}--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
--#{$label}--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
--#{$label}--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
--#{$label}--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
+ --#{$label}--m-warning--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--warning--clicked);
+ --#{$label}--m-warning--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--warning--clicked);
// Danger
--#{$label}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
--#{$label}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
--#{$label}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
- --#{$label}--m-danger--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
- --#{$label}--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
- --#{$label}--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
- --#{$label}--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
+ --#{$label}--m-danger--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
+ --#{$label}--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+ --#{$label}--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--default);
+ --#{$label}--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
+ --#{$label}--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
+ --#{$label}--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
+ --#{$label}--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
+ --#{$label}--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
--#{$label}--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
--#{$label}--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
--#{$label}--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
--#{$label}--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
+ --#{$label}--m-danger--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
+ --#{$label}--m-danger--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
// Info
--#{$label}--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
--#{$label}--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
--#{$label}--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
- --#{$label}--m-info--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
- --#{$label}--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
- --#{$label}--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
- --#{$label}--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
+ --#{$label}--m-info--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
+ --#{$label}--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--default);
+ --#{$label}--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--default);
+ --#{$label}--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
+ --#{$label}--m-info--m-clicked--Color: var(--pf-t--global--text--color--status--on-info--clicked);
+ --#{$label}--m-info--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-info--clicked);
+ --#{$label}--m-info--m-clicked--BackgroundColor: var(--pf-t--global--color--status--info--clicked);
+ --#{$label}--m-info--m-clicked--BorderColor: var(--pf-t--global--border--color--status--info--clicked);
--#{$label}--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
--#{$label}--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
--#{$label}--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
--#{$label}--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
+ --#{$label}--m-info--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--info--clicked);
+ --#{$label}--m-info--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--info--clicked);
// Custom
--#{$label}--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
--#{$label}--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
--#{$label}--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
- --#{$label}--m-custom--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
- --#{$label}--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
- --#{$label}--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
- --#{$label}--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
+ --#{$label}--m-custom--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
+ --#{$label}--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--default);
+ --#{$label}--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--default);
+ --#{$label}--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
+ --#{$label}--m-custom--m-clicked--Color: var(--pf-t--global--text--color--status--on-custom--clicked);
+ --#{$label}--m-custom--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-custom--clicked);
+ --#{$label}--m-custom--m-clicked--BackgroundColor: var(--pf-t--global--color--status--custom--clicked);
+ --#{$label}--m-custom--m-clicked--BorderColor: var(--pf-t--global--border--color--status--custom--clicked);
--#{$label}--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
--#{$label}--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
--#{$label}--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
--#{$label}--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
+ --#{$label}--m-custom--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--custom--clicked);
+ --#{$label}--m-custom--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--custom--clicked);
// Clickable
--#{$label}--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
--#{$label}--m-clickable__content--Cursor: pointer;
+ // Clicked
+ --#{$label}--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
+
// Filled
--#{$label}--m-filled__actions--c-button__icon--Color: var(--#{$label}__icon--Color);
@@ -193,6 +271,10 @@
--#{$label}--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
--#{$label}--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
--#{$label}--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
+ --#{$label}--m-outline--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
+ --#{$label}--m-outline--m-clicked--BackgroundColor: transparent;
+ --#{$label}--m-outline--m-clicked--Color: var(--pf-t--global--text--color--regular);
+ --#{$label}--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
// Overflow
--#{$label}--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
@@ -302,8 +384,13 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-blue--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-blue--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-blue--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-blue--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-blue--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-blue--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-blue--m-clicked--BorderColor);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-blue--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-blue--m-outline--m-clickable--hover--BorderColor);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-blue--m-outline--m-clicked--BorderColor);
}
&.pf-m-red {
@@ -314,8 +401,13 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-red--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-red--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-red--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-red--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-red--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-red--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-red--m-clicked--BorderColor);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-red--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-red--m-outline--m-clickable--hover--BorderColor);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-red--m-outline--m-clicked--BorderColor);
}
&.pf-m-orange {
@@ -326,8 +418,13 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-orange--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-orange--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-orange--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-orange--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-orange--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-orange--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-orange--m-clicked--BorderColor);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-orange--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-orange--m-outline--m-clickable--hover--BorderColor);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-orange--m-outline--m-clicked--BorderColor);
}
&.pf-m-orangered {
@@ -338,8 +435,13 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-orangered--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-orangered--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-orangered--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-orangered--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-orangered--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-orangered--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-orangered--m-clicked--BorderColor);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-orangered--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-orangered--m-outline--m-clickable--hover--BorderColor);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-orangered--m-outline--m-clicked--BorderColor);
}
&.pf-m-yellow {
@@ -350,8 +452,13 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-yellow--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-yellow--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-yellow--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-yellow--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-yellow--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-yellow--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-yellow--m-clicked--BorderColor);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-yellow--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-yellow--m-outline--m-clickable--hover--BorderColor);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-yellow--m-outline--m-clicked--BorderColor);
}
&.pf-m-green {
@@ -362,8 +469,13 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-green--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-green--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-green--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-green--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-green--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-green--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-green--m-clicked--BorderColor);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-green--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-green--m-outline--m-clickable--hover--BorderColor);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-green--m-outline--m-clicked--BorderColor);
}
&.pf-m-teal {
@@ -374,8 +486,13 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-teal--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-teal--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-teal--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-teal--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-teal--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-teal--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-teal--m-clicked--BorderColor);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-teal--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-teal--m-outline--m-clickable--hover--BorderColor);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-teal--m-outline--m-clicked--BorderColor);
}
&.pf-m-purple {
@@ -386,8 +503,13 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-purple--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-purple--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-purple--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-purple--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-purple--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-purple--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-purple--m-clicked--BorderColor);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-purple--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-purple--m-outline--m-clickable--hover--BorderColor);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-purple--m-outline--m-clicked--BorderColor);
}
&.pf-m-success {
@@ -398,10 +520,16 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-success--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-success--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-success--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-success--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-success--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-success--m-clicked--BorderColor);
--#{$label}--m-outline__icon--Color: var(--#{$label}--m-success--m-outline__icon--Color);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-success--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-success--m-outline--m-clickable--hover--BorderColor);
--#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-success--m-outline--m-clicked--BorderColor);
+ --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-success--m-outline--m-clicked__icon--Color);
}
&.pf-m-warning {
@@ -412,10 +540,16 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-warning--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-warning--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-warning--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-warning--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-warning--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-warning--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-warning--m-clicked--BorderColor);
--#{$label}--m-outline__icon--Color: var(--#{$label}--m-warning--m-outline__icon--Color);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-warning--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-warning--m-outline--m-clickable--hover--BorderColor);
--#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-warning--m-outline--m-clickable--hover__icon--Color);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-warning--m-outline--m-clicked--BorderColor);
+ --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-warning--m-outline--m-clicked__icon--Color);
}
&.pf-m-danger {
@@ -426,10 +560,16 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-danger--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-danger--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-danger--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-danger--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-danger--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-danger--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-danger--m-clicked--BorderColor);
--#{$label}--m-outline__icon--Color: var(--#{$label}--m-danger--m-outline__icon--Color);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-danger--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-danger--m-outline--m-clickable--hover--BorderColor);
--#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-danger--m-outline--m-clickable--hover__icon--Color);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-danger--m-outline--m-clicked--BorderColor);
+ --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-danger--m-outline--m-clicked__icon--Color);
}
&.pf-m-info {
@@ -440,10 +580,16 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-info--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-info--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-info--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-info--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-info--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-info--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-info--m-clicked--BorderColor);
--#{$label}--m-outline__icon--Color: var(--#{$label}--m-info--m-outline__icon--Color);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-info--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-info--m-outline--m-clickable--hover--BorderColor);
--#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-info--m-outline--m-clickable--hover__icon--Color);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-info--m-outline--m-clicked--BorderColor);
+ --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-info--m-outline--m-clicked__icon--Color);
}
&.pf-m-custom {
@@ -454,10 +600,16 @@
--#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-custom--m-clickable--hover--BackgroundColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-custom--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-custom--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-custom--m-clicked--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-custom--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-custom--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-custom--m-clicked--BorderColor);
--#{$label}--m-outline__icon--Color: var(--#{$label}--m-custom--m-outline__icon--Color);
--#{$label}--m-outline--BorderColor: var(--#{$label}--m-custom--m-outline--BorderColor);
--#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-custom--m-outline--m-clickable--hover--BorderColor);
- --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color);
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-custom--m-outline--m-clickable--hover__icon--Color);
+ --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-custom--m-outline--m-clicked--BorderColor);
+ --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-custom--m-outline--m-clicked__icon--Color);
}
&.pf-m-compact {
@@ -499,6 +651,9 @@
--#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-outline--m-clickable--hover--BorderColor);
--#{$label}--m-clickable--hover--Color: var(--#{$label}--m-outline--m-clickable--hover--Color);
--#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-outline--m-clickable--hover__icon--Color);
+ --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-outline--m-clicked__icon--Color);
+ --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-outline--m-clicked--BackgroundColor);
+ --#{$label}--m-clicked--Color: var(--#{$label}--m-outline--m-clicked--Color);
}
&.pf-m-editable {
@@ -575,6 +730,23 @@
}
}
+ &.pf-m-clicked {
+ .#{$label}__content,
+ .#{$label}__content:is(:hover, :focus) {
+ --#{$label}--Color: var(--#{$label}--m-clicked--Color);
+ --#{$label}__icon--Color: var(--#{$label}--m-clicked__icon--Color);
+ --#{$label}--BackgroundColor: var(--#{$label}--m-clicked--BackgroundColor);
+ --#{$label}--BorderWidth: var(--#{$label}--m-clicked--BorderWidth);
+ --#{$label}--BorderColor: var(--#{$label}--m-clicked--BorderColor);
+ --#{$label}--m-outline--BorderWidth: var(--#{$label}--m-outline--m-clicked--BorderWidth);
+ --#{$label}--m-outline--BorderColor: var(--#{$label}--m-outline--m-clicked--BorderColor);
+ }
+
+ ~ .#{$label}__actions .#{$button} {
+ --#{$label}--m-filled__actions--c-button__icon--Color: var(--#{$label}--m-clicked__icon--Color);
+ }
+ }
+
&.pf-m-disabled {
--#{$label}--BackgroundColor: var(--#{$label}--m-disabled--BackgroundColor);
--#{$label}--Color: var(--#{$label}--m-disabled--Color);
From d538704ac36cef9dbd3c5f59fcc61502cc17beb0 Mon Sep 17 00:00:00 2001
From: Michael Coker
Date: Fri, 24 Apr 2026 19:35:00 -0500
Subject: [PATCH 8/8] chore: docs
---
src/patternfly/components/Label/examples/Label.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/patternfly/components/Label/examples/Label.md b/src/patternfly/components/Label/examples/Label.md
index 5b3b4d8e28..80843a76a3 100644
--- a/src/patternfly/components/Label/examples/Label.md
+++ b/src/patternfly/components/Label/examples/Label.md
@@ -666,6 +666,8 @@ In addition to the JavaScript management of [editable labels](/components/label#
| `.pf-m-outline` | `.pf-v6-c-label` | Modifies label for outline styles. |
| `.pf-m-compact` | `.pf-v6-c-label` | Modifies label for compact styles. |
| `.pf-m-large` | `.pf-v6-c-label` | Modifies label for large styles. |
+| `.pf-m-clickable` | `.pf-v6-c-label` | Modifies label for clickable styles when `.pf-v6-c-label__content` is an `` or `