@patternfly/patternfly 4.192.5 → 4.194.0

package/base/_chart-globals.scss

@@ -172,10 +172,22 @@ $pf-chart-bullet--group-title--divider--Fill--Color: $pf-color-black-200;
 $pf-chart-bullet--group-title--divider--stroke--Color: $pf-color-black-200;
 $pf-chart-bullet--group-title--divider--stroke--Width: $pf-chart-global--stroke--Width--sm;
 $pf-chart-bullet--Height: 140;
+$pf-chart-bullet--label--title--Fill: $pf-chart-global--Fill--Color--900;
+$pf-chart-bullet--label--grouptitle--Fill: $pf-chart-global--Fill--Color--900;
 $pf-chart-bullet--label--subtitle--Fill: $pf-chart-global--Fill--Color--400;
 $pf-chart-bullet--primary-measure--dot--size: 6;
 $pf-chart-bullet--primary-measure--segmented--Width: 9;
+$pf-chart-bullet--negative-measure--ColorScale--100: $pf-chart-color-red-100;
+$pf-chart-bullet--negative-measure--ColorScale--200: $pf-chart-color-red-200;
+$pf-chart-bullet--negative-measure--ColorScale--300: $pf-chart-color-red-300;
+$pf-chart-bullet--negative-measure--ColorScale--400: $pf-chart-color-red-400;
+$pf-chart-bullet--negative-measure--ColorScale--500: $pf-chart-color-red-500;
 $pf-chart-bullet--qualitative-range--Width: 30;
+$pf-chart-bullet--qualitative-range--ColorScale--100: $pf-chart-color-black-100;
+$pf-chart-bullet--qualitative-range--ColorScale--200: $pf-chart-color-black-200;
+$pf-chart-bullet--qualitative-range--ColorScale--300: $pf-chart-color-black-300;
+$pf-chart-bullet--qualitative-range--ColorScale--400: $pf-chart-color-black-400;
+$pf-chart-bullet--qualitative-range--ColorScale--500: $pf-chart-color-black-500;
 
 // Candlestick
 $pf-chart-candelstick--data--stroke--Width: $pf-chart-global--stroke--Width--xs;
@@ -183,7 +195,11 @@ $pf-chart-candelstick--data--stroke--Color: $pf-chart-global--Fill--Color--900;
 $pf-chart-candelstick--candle--positive--Color: $pf-chart-global--Fill--Color--white;
 $pf-chart-candelstick--candle--negative--Color: $pf-chart-global--Fill--Color--900;
 
+// Container
+$pf-chart-container--cursor--line--Fill: $pf-color-black-900;
+
 // Simple Donut Chart
+$pf-chart-donut--label--title--Fill: $pf-chart-global--Fill--Color--900;
 $pf-chart-donut--label--subtitle--Fill: $pf-chart-global--Fill--Color--400;
 $pf-chart-donut--label--subtitle--position: "center";
 $pf-chart-donut--pie--Height: 230;
@@ -283,3 +299,118 @@ $pf-chart-voronoi--flyout--PointerEvents: "none";
 $pf-chart-voronoi--flyout--stroke--Color: $pf-chart-global--Fill--Color--900;
 $pf-chart-voronoi--flyout--stroke--Fill: $pf-chart-global--Fill--Color--900;
 $pf-chart-voronoi--flyout--PointerEvents: "none";
+
+// Theme color scales
+
+// blue
+$pf-chart-theme--blue--ColorScale--100: $pf-chart-color-blue-300;
+$pf-chart-theme--blue--ColorScale--200: $pf-chart-color-blue-100;
+$pf-chart-theme--blue--ColorScale--300: $pf-chart-color-blue-500;
+$pf-chart-theme--blue--ColorScale--400: $pf-chart-color-blue-200;
+$pf-chart-theme--blue--ColorScale--500: $pf-chart-color-blue-400;
+
+// cyan
+$pf-chart-theme--cyan--ColorScale--100: $pf-chart-color-cyan-300;
+$pf-chart-theme--cyan--ColorScale--200: $pf-chart-color-cyan-100;
+$pf-chart-theme--cyan--ColorScale--300: $pf-chart-color-cyan-500;
+$pf-chart-theme--cyan--ColorScale--400: $pf-chart-color-cyan-200;
+$pf-chart-theme--cyan--ColorScale--500: $pf-chart-color-cyan-400;
+
+// gold
+$pf-chart-theme--gold--ColorScale--100: $pf-chart-color-gold-300;
+$pf-chart-theme--gold--ColorScale--200: $pf-chart-color-gold-100;
+$pf-chart-theme--gold--ColorScale--300: $pf-chart-color-gold-500;
+$pf-chart-theme--gold--ColorScale--400: $pf-chart-color-gold-200;
+$pf-chart-theme--gold--ColorScale--500: $pf-chart-color-gold-400;
+
+// gray
+$pf-chart-theme--gray--ColorScale--100: $pf-chart-color-black-300;
+$pf-chart-theme--gray--ColorScale--200: $pf-chart-color-black-100;
+$pf-chart-theme--gray--ColorScale--300: $pf-chart-color-black-500;
+$pf-chart-theme--gray--ColorScale--400: $pf-chart-color-black-200;
+$pf-chart-theme--gray--ColorScale--500: $pf-chart-color-black-400;
+
+// green
+$pf-chart-theme--green--ColorScale--100: $pf-chart-color-green-300;
+$pf-chart-theme--green--ColorScale--200: $pf-chart-color-green-100;
+$pf-chart-theme--green--ColorScale--300: $pf-chart-color-green-500;
+$pf-chart-theme--green--ColorScale--400: $pf-chart-color-green-200;
+$pf-chart-theme--green--ColorScale--500: $pf-chart-color-green-400;
+
+// multi ordered
+$pf-chart-theme--multi-color-ordered--ColorScale--100: $pf-chart-color-blue-300;
+$pf-chart-theme--multi-color-ordered--ColorScale--200: $pf-chart-color-green-300;
+$pf-chart-theme--multi-color-ordered--ColorScale--300: $pf-chart-color-cyan-300;
+$pf-chart-theme--multi-color-ordered--ColorScale--400: $pf-chart-color-gold-300;
+$pf-chart-theme--multi-color-ordered--ColorScale--500: $pf-chart-color-orange-300;
+$pf-chart-theme--multi-color-ordered--ColorScale--600: $pf-chart-color-blue-100;
+$pf-chart-theme--multi-color-ordered--ColorScale--700: $pf-chart-color-green-500;
+$pf-chart-theme--multi-color-ordered--ColorScale--800: $pf-chart-color-cyan-100;
+$pf-chart-theme--multi-color-ordered--ColorScale--900: $pf-chart-color-gold-100;
+$pf-chart-theme--multi-color-ordered--ColorScale--1000: $pf-chart-color-orange-500;
+$pf-chart-theme--multi-color-ordered--ColorScale--1100: $pf-chart-color-blue-500;
+$pf-chart-theme--multi-color-ordered--ColorScale--1200: $pf-chart-color-green-100;
+$pf-chart-theme--multi-color-ordered--ColorScale--1300: $pf-chart-color-cyan-500;
+$pf-chart-theme--multi-color-ordered--ColorScale--1400: $pf-chart-color-gold-500;
+$pf-chart-theme--multi-color-ordered--ColorScale--1500: $pf-chart-color-orange-100;
+$pf-chart-theme--multi-color-ordered--ColorScale--1600: $pf-chart-color-blue-200;
+$pf-chart-theme--multi-color-ordered--ColorScale--1700: $pf-chart-color-green-400;
+$pf-chart-theme--multi-color-ordered--ColorScale--1800: $pf-chart-color-cyan-200;
+$pf-chart-theme--multi-color-ordered--ColorScale--1900: $pf-chart-color-gold-200;
+$pf-chart-theme--multi-color-ordered--ColorScale--2000: $pf-chart-color-orange-400;
+$pf-chart-theme--multi-color-ordered--ColorScale--2100: $pf-chart-color-blue-400;
+$pf-chart-theme--multi-color-ordered--ColorScale--2200: $pf-chart-color-green-200;
+$pf-chart-theme--multi-color-ordered--ColorScale--2300: $pf-chart-color-cyan-400;
+$pf-chart-theme--multi-color-ordered--ColorScale--2400: $pf-chart-color-gold-400;
+$pf-chart-theme--multi-color-ordered--ColorScale--2500: $pf-chart-color-orange-200;
+
+// multi unordered
+$pf-chart-theme--multi-color-unordered--ColorScale--100: $pf-chart-color-blue-300;
+$pf-chart-theme--multi-color-unordered--ColorScale--200: $pf-chart-color-gold-300;
+$pf-chart-theme--multi-color-unordered--ColorScale--300: $pf-chart-color-green-300;
+$pf-chart-theme--multi-color-unordered--ColorScale--400: $pf-chart-color-purple-300;
+$pf-chart-theme--multi-color-unordered--ColorScale--500: $pf-chart-color-orange-300;
+$pf-chart-theme--multi-color-unordered--ColorScale--600: $pf-chart-color-cyan-300;
+$pf-chart-theme--multi-color-unordered--ColorScale--700: $pf-chart-color-black-300;
+$pf-chart-theme--multi-color-unordered--ColorScale--800: $pf-chart-color-blue-100;
+$pf-chart-theme--multi-color-unordered--ColorScale--900: $pf-chart-color-gold-500;
+$pf-chart-theme--multi-color-unordered--ColorScale--1000: $pf-chart-color-green-100;
+$pf-chart-theme--multi-color-unordered--ColorScale--1100: $pf-chart-color-purple-500;
+$pf-chart-theme--multi-color-unordered--ColorScale--1200: $pf-chart-color-orange-100;
+$pf-chart-theme--multi-color-unordered--ColorScale--1300: $pf-chart-color-cyan-500;
+$pf-chart-theme--multi-color-unordered--ColorScale--1400: $pf-chart-color-black-100;
+$pf-chart-theme--multi-color-unordered--ColorScale--1500: $pf-chart-color-blue-500;
+$pf-chart-theme--multi-color-unordered--ColorScale--1600: $pf-chart-color-gold-100;
+$pf-chart-theme--multi-color-unordered--ColorScale--1700: $pf-chart-color-green-500;
+$pf-chart-theme--multi-color-unordered--ColorScale--1800: $pf-chart-color-purple-100;
+$pf-chart-theme--multi-color-unordered--ColorScale--1900: $pf-chart-color-orange-500;
+$pf-chart-theme--multi-color-unordered--ColorScale--2000: $pf-chart-color-cyan-100;
+$pf-chart-theme--multi-color-unordered--ColorScale--2100: $pf-chart-color-black-500;
+$pf-chart-theme--multi-color-unordered--ColorScale--2200: $pf-chart-color-blue-200;
+$pf-chart-theme--multi-color-unordered--ColorScale--2300: $pf-chart-color-gold-400;
+$pf-chart-theme--multi-color-unordered--ColorScale--2400: $pf-chart-color-green-200;
+$pf-chart-theme--multi-color-unordered--ColorScale--2500: $pf-chart-color-purple-400;
+$pf-chart-theme--multi-color-unordered--ColorScale--2600: $pf-chart-color-orange-200;
+$pf-chart-theme--multi-color-unordered--ColorScale--2700: $pf-chart-color-cyan-400;
+$pf-chart-theme--multi-color-unordered--ColorScale--2800: $pf-chart-color-black-200;
+$pf-chart-theme--multi-color-unordered--ColorScale--2900: $pf-chart-color-blue-400;
+$pf-chart-theme--multi-color-unordered--ColorScale--3000: $pf-chart-color-gold-200;
+$pf-chart-theme--multi-color-unordered--ColorScale--3100: $pf-chart-color-green-400;
+$pf-chart-theme--multi-color-unordered--ColorScale--3200: $pf-chart-color-purple-200;
+$pf-chart-theme--multi-color-unordered--ColorScale--3300: $pf-chart-color-orange-400;
+$pf-chart-theme--multi-color-unordered--ColorScale--3400: $pf-chart-color-cyan-200;
+$pf-chart-theme--multi-color-unordered--ColorScale--3500: $pf-chart-color-black-400;
+
+// orange
+$pf-chart-theme--orange--ColorScale--100: $pf-chart-color-orange-300;
+$pf-chart-theme--orange--ColorScale--200: $pf-chart-color-orange-100;
+$pf-chart-theme--orange--ColorScale--300: $pf-chart-color-orange-500;
+$pf-chart-theme--orange--ColorScale--400: $pf-chart-color-orange-200;
+$pf-chart-theme--orange--ColorScale--500: $pf-chart-color-orange-400;
+
+// purple
+$pf-chart-theme--purple--ColorScale--100: $pf-chart-color-purple-300;
+$pf-chart-theme--purple--ColorScale--200: $pf-chart-color-purple-100;
+$pf-chart-theme--purple--ColorScale--300: $pf-chart-color-purple-500;
+$pf-chart-theme--purple--ColorScale--400: $pf-chart-color-purple-200;
+$pf-chart-theme--purple--ColorScale--500: $pf-chart-color-purple-400;

package/components/Label/label.css

@@ -245,12 +245,14 @@
   --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
   --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
 }
-.pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
+.pf-c-label.pf-m-overflow:hover,
+.pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
 .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
 }
-.pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
+.pf-c-label.pf-m-overflow:focus,
+.pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
 .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
@@ -298,7 +300,7 @@
   margin-bottom: var(--pf-c-label__c-button--MarginBottom);
   margin-left: var(--pf-c-label__c-button--MarginLeft);
 }
-.pf-c-label.pf-m-overflow {
+.pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
   --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);

package/components/Label/label.scss

@@ -294,6 +294,7 @@
     a,
     button {
       @at-root .pf-c-label.pf-m-overflow,
+      .pf-c-label.pf-m-add,
       &.pf-c-label__content {
         // stylelint-enable selector-no-qualifying-type
         &:hover {
@@ -362,7 +363,8 @@
     margin-left: var(--pf-c-label__c-button--MarginLeft);
   }
 
-  &.pf-m-overflow {
+  &.pf-m-overflow,
+  &.pf-m-add {
     --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
     --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
     --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);

package/components/Spinner/spinner.css

@@ -50,10 +50,10 @@ span.pf-c-spinner {
     transform: rotate(0deg);
   }
   50% {
-    transform: rotate(-540deg);
+    transform: rotate(540deg);
   }
   100% {
-    transform: rotate(-1080deg);
+    transform: rotate(1080deg);
   }
 }
 .pf-c-spinner__clipper {
@@ -66,10 +66,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(90deg);
   }
   100% {
-    transform: rotate(-270deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__clipper::after {
@@ -85,10 +85,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper-after {
   0% {
-    transform: rotate(90deg);
+    transform: rotate(-180deg);
   }
   100% {
-    transform: rotate(-180deg);
+    transform: rotate(90deg);
   }
 }
 .pf-c-spinner__lead-ball {
@@ -115,11 +115,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  34% {
-    transform: rotate(-180deg);
+  33% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__tail-ball {
@@ -146,11 +146,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  67.5% {
-    transform: rotate(-180deg);
+  66% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 svg.pf-c-spinner {

package/components/Spinner/spinner.scss

@@ -79,11 +79,11 @@ span.pf-c-spinner {
   }
 
   50% {
-    transform: rotate(-540deg);
+    transform: rotate(540deg);
   }
 
   100% {
-    transform: rotate(-1080deg);
+    transform: rotate(1080deg);
   }
 }
 
@@ -98,11 +98,11 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(90deg);
   }
 
   100% {
-    transform: rotate(-270deg);
+    transform: rotate(360deg);
   }
 }
 
@@ -121,11 +121,11 @@ span.pf-c-spinner {
 // The Clipper:after moves rotates 270deg in relation to its parent (so that it appears to grow and then shrink)
 @keyframes pf-animation-spinner__clipper-after {
   0% {
-    transform: rotate(90deg);
+    transform: rotate(-180deg);
   }
 
   100% {
-    transform: rotate(-180deg);
+    transform: rotate(90deg);
   }
 }
 
@@ -157,12 +157,12 @@ span.pf-c-spinner {
     transform: rotate(0deg);
   }
 
-  34% {
-    transform: rotate(-180deg);
+  33% {
+    transform: rotate(180deg);
   }
 
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 
@@ -194,12 +194,12 @@ span.pf-c-spinner {
     transform: rotate(0deg);
   }
 
-  67.5% {
-    transform: rotate(-180deg);
+  66% {
+    transform: rotate(180deg);
   }
 
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 

package/components/Tabs/tabs.css

@@ -35,6 +35,7 @@
   --pf-c-tabs__link--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-tabs__link--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-tabs__link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tabs__link--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-tabs__item--m-current__link--Color: var(--pf-global--Color--100);
   --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -553,6 +554,7 @@
   pointer-events: none;
 }
 .pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
+  --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color);
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
   --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);

package/components/Tabs/tabs.scss

@@ -52,6 +52,7 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs__link--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-tabs__link--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-tabs__link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tabs__link--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-tabs__item--m-current__link--Color: var(--pf-global--Color--100);
   --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -636,6 +637,7 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   &:disabled,
   &.pf-m-disabled,
   &.pf-m-aria-disabled {
+    --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color);
     --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
     --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
     --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);

package/docs/components/Label/examples/Label.md

@@ -1121,7 +1121,7 @@ cssPrefix: pf-c-label
 This style of label is used to indicate overflow within a label group.
 
 ```html
-<button class="pf-c-label pf-m-overflow">
+<button class="pf-c-label pf-m-overflow" type="button">
   <span class="pf-c-label__content">Overflow</span>
 </button>
 
@@ -1206,6 +1206,17 @@ This style of label is used to indicate overflow within a label group.
 
 ```
 
+### Add label
+
+This style of label is used to add new labels to a label group.
+
+```html isBeta
+<button class="pf-c-label pf-m-add" type="button">
+  <span class="pf-c-label__content">Add Label</span>
+</button>
+
+```
+
 ## Documentation
 
 ### Usage
@@ -1220,6 +1231,7 @@ This style of label is used to indicate overflow within a label group.
 | `.pf-m-outline`              | `.pf-c-label`               | Modifies label for outline styles.                                                                                                                                                                                       |
 | `.pf-m-compact`              | `.pf-c-label`               | Modifies label for compact styles.                                                                                                                                                                                       |
 | `.pf-m-overflow`             | `.pf-c-label`               | Modifies label for overflow styles for use in a label group.                                                                                                                                                             |
+| `.pf-m-add`                  | `.pf-c-label`               | Modifies label for add styles for use in a label group.                                                                                                                                                                  |
 | `.pf-m-blue`                 | `.pf-c-label`               | Modifies the label to have blue colored styling.                                                                                                                                                                         |
 | `.pf-m-green`                | `.pf-c-label`               | Modifies the label to have green colored styling.                                                                                                                                                                        |
 | `.pf-m-orange`               | `.pf-c-label`               | Modifies the label to have orange colored styling.                                                                                                                                                                       |

package/docs/components/LabelGroup/examples/LabelGroup.md

@@ -84,7 +84,7 @@ cssPrefix: pf-c-label-group
         </span>
       </li>
       <li class="pf-c-label-group__list-item">
-        <button class="pf-c-label pf-m-overflow">
+        <button class="pf-c-label pf-m-overflow" type="button">
           <span class="pf-c-label__content">3 more</span>
         </button>
       </li>
@@ -151,7 +151,7 @@ cssPrefix: pf-c-label-group
         </span>
       </li>
       <li class="pf-c-label-group__list-item">
-        <button class="pf-c-label pf-m-overflow">
+        <button class="pf-c-label pf-m-overflow" type="button">
           <span class="pf-c-label__content">3 less</span>
         </button>
       </li>
@@ -161,6 +161,53 @@ cssPrefix: pf-c-label-group
 
 ```
 
+### Add label
+
+```html
+<div class="pf-c-label-group">
+  <div class="pf-c-label-group__main">
+    <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-blue">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label 2
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-green">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label 3
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <button class="pf-c-label pf-m-add" type="button">
+          <span class="pf-c-label__content">Add Label</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
+
+```
+
 ### Category
 
 ```html
@@ -383,7 +430,7 @@ cssPrefix: pf-c-label-group
         </span>
       </li>
       <li class="pf-c-label-group__list-item">
-        <button class="pf-c-label pf-m-overflow">
+        <button class="pf-c-label pf-m-overflow" type="button">
           <span class="pf-c-label__content">3 more</span>
         </button>
       </li>
@@ -450,7 +497,7 @@ cssPrefix: pf-c-label-group
         </span>
       </li>
       <li class="pf-c-label-group__list-item">
-        <button class="pf-c-label pf-m-overflow">
+        <button class="pf-c-label pf-m-overflow" type="button">
           <span class="pf-c-label__content">3 less</span>
         </button>
       </li>
@@ -983,7 +1030,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
         </span>
       </li>
       <li class="pf-c-label-group__list-item">
-        <button class="pf-c-label pf-m-overflow pf-m-compact">
+        <button class="pf-c-label pf-m-overflow pf-m-compact" type="button">
           <span class="pf-c-label__content">3 more</span>
         </button>
       </li>

package/docs/demos/Card/examples/Card.md

@@ -111,7 +111,10 @@ wrapperTag: div
               </span>
             </li>
             <li class="pf-c-label-group__list-item">
-              <button class="pf-c-label pf-m-overflow pf-m-compact">
+              <button
+                class="pf-c-label pf-m-overflow pf-m-compact"
+                type="button"
+              >
                 <span class="pf-c-label__content">1 more</span>
               </button>
             </li>

package/docs/demos/Dashboard/examples/Dashboard.md

@@ -1071,7 +1071,10 @@ cssPrefix: pf-d-dashboard
                                   </span>
                                 </li>
                                 <li class="pf-c-label-group__list-item">
-                                  <button class="pf-c-label pf-m-overflow">
+                                  <button
+                                    class="pf-c-label pf-m-overflow"
+                                    type="button"
+                                  >
                                     <span class="pf-c-label__content">1 more</span>
                                   </button>
                                 </li>

package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md

@@ -6644,7 +6644,7 @@ wrapperTag: div
             <div class="pf-c-drawer__body pf-m-padding">
               <div class="pf-l-gallery pf-m-gutter">
                 <div
-                  class="pf-c-card pf-m-selectable pf-m-selected"
+                  class="pf-c-card pf-m-selectable-raised pf-m-selected-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-1"
                 >
                   <div class="pf-c-card__header">
@@ -6725,7 +6725,7 @@ wrapperTag: div
                   >PatternFly is a community project that promotes design commonality and improves user experience.</div>
                 </div>
                 <div
-                  class="pf-c-card pf-m-selectable"
+                  class="pf-c-card pf-m-selectable-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-2"
                 >
                   <div class="pf-c-card__header">
@@ -6807,7 +6807,7 @@ wrapperTag: div
                   >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
                 </div>
                 <div
-                  class="pf-c-card pf-m-selectable"
+                  class="pf-c-card pf-m-selectable-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-3"
                 >
                   <div class="pf-c-card__header">
@@ -6889,7 +6889,7 @@ wrapperTag: div
                   >This documentation page covers the Apache Spark component for the Apache Camel.</div>
                 </div>
                 <div
-                  class="pf-c-card pf-m-selectable"
+                  class="pf-c-card pf-m-selectable-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-4"
                 >
                   <div class="pf-c-card__header">
@@ -6971,7 +6971,7 @@ wrapperTag: div
                   >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
                 </div>
                 <div
-                  class="pf-c-card pf-m-selectable"
+                  class="pf-c-card pf-m-selectable-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-5"
                 >
                   <div class="pf-c-card__header">
@@ -7053,7 +7053,7 @@ wrapperTag: div
                   >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
                 </div>
                 <div
-                  class="pf-c-card pf-m-selectable"
+                  class="pf-c-card pf-m-selectable-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-6"
                 >
                   <div class="pf-c-card__header">
@@ -7135,7 +7135,7 @@ wrapperTag: div
                   >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
                 </div>
                 <div
-                  class="pf-c-card pf-m-selectable"
+                  class="pf-c-card pf-m-selectable-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-7"
                 >
                   <div class="pf-c-card__header">
@@ -7216,7 +7216,7 @@ wrapperTag: div
                   >PatternFly is a community project that promotes design commonality and improves user experience.</div>
                 </div>
                 <div
-                  class="pf-c-card pf-m-selectable"
+                  class="pf-c-card pf-m-selectable-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-8"
                 >
                   <div class="pf-c-card__header">
@@ -7297,7 +7297,7 @@ wrapperTag: div
                   >PatternFly is a community project that promotes design commonality and improves user experience.</div>
                 </div>
                 <div
-                  class="pf-c-card pf-m-selectable"
+                  class="pf-c-card pf-m-selectable-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-9"
                 >
                   <div class="pf-c-card__header">
@@ -7378,7 +7378,7 @@ wrapperTag: div
                   >PatternFly is a community project that promotes design commonality and improves user experience.</div>
                 </div>
                 <div
-                  class="pf-c-card pf-m-selectable"
+                  class="pf-c-card pf-m-selectable-raised"
                   id="primary-detail-card-view-expanded-example-drawer-card-10"
                 >
                   <div class="pf-c-card__header">

package/docs/demos/Tabs/examples/Tabs.md

@@ -1068,7 +1068,7 @@ section: components
                   <div class="pf-c-description-list__group">
                     <dt class="pf-c-description-list__term">Pod IP</dt>
                     <dd class="pf-c-description-list__description">
-                      <div class="pf-c-description-list__text">10..345.2.197</div>
+                      <div class="pf-c-description-list__text">10.345.2.197</div>
                     </dd>
                   </div>
                   <div class="pf-c-description-list__group">
@@ -2213,7 +2213,7 @@ section: components
                       <div class="pf-c-description-list__group">
                         <dt class="pf-c-description-list__term">Pod IP</dt>
                         <dd class="pf-c-description-list__description">
-                          <div class="pf-c-description-list__text">10..345.2.197</div>
+                          <div class="pf-c-description-list__text">10.345.2.197</div>
                         </dd>
                       </div>
                       <div class="pf-c-description-list__group">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.192.5",
+  "version": "4.194.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {