@patternfly/patternfly 4.192.6 → 4.194.1

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/Chip/chip.css

@@ -39,6 +39,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  min-width: 0;
   padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
   list-style: none;
   background-color: var(--pf-c-chip--BackgroundColor);

package/components/Chip/chip.scss

@@ -43,6 +43,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  min-width: 0;
   padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
   list-style: none;
   background-color: var(--pf-c-chip--BackgroundColor);

package/components/ChipGroup/chip-group.css

@@ -40,6 +40,7 @@
   flex: 1;
   flex-wrap: wrap;
   align-items: baseline;
+  min-width: 0;
 }
 
 .pf-c-chip-group__list {
@@ -52,10 +53,13 @@
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .pf-c-chip-group__list-item {
   display: inline-flex;
+  min-width: 0;
   margin-right: var(--pf-c-chip-group__list-item--MarginRight);
   margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
 }

package/components/ChipGroup/chip-group.scss

@@ -41,6 +41,7 @@
   flex: 1;
   flex-wrap: wrap;
   align-items: baseline;
+  min-width: 0;
 }
 
 .pf-c-chip-group__list {
@@ -53,10 +54,13 @@
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .pf-c-chip-group__list-item {
   display: inline-flex;
+  min-width: 0;
   margin-right: var(--pf-c-chip-group__list-item--MarginRight);
   margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
 }

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/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/package.json

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

package/patternfly-charts-theme-dark.css

@@ -0,0 +1,65 @@
+:where(.pf-theme-dark) .pf-c-chart svg g[clip-path] {
+  mix-blend-mode: normal;
+}
+:root:where(.pf-theme-dark) {
+  --pf-chart-color-blue-100: #add6ff;
+  --pf-chart-color-blue-200: #85c2ff;
+  --pf-chart-color-blue-300: #47a3ff;
+  --pf-chart-color-blue-400: #0a85ff;
+  --pf-chart-color-blue-500: #06c;
+  --pf-chart-color-green-100: #d6eed3;
+  --pf-chart-color-green-200: #aedca7;
+  --pf-chart-color-green-300: #85cb7c;
+  --pf-chart-color-green-400: #5cb950;
+  --pf-chart-color-green-500: #3e8635;
+  --pf-chart-color-cyan-100: #b9feff;
+  --pf-chart-color-cyan-200: #86fdff;
+  --pf-chart-color-cyan-300: #00b5b8;
+  --pf-chart-color-cyan-400: #008c8f;
+  --pf-chart-color-cyan-500: #005f60;
+  --pf-chart-color-purple-100: #cec8e4;
+  --pf-chart-color-purple-200: #a99fd1;
+  --pf-chart-color-purple-300: #9183c3;
+  --pf-chart-color-purple-400: #7968b6;
+  --pf-chart-color-purple-500: #6753ac;
+  --pf-chart-color-red-100: #ffadad;
+  --pf-chart-color-red-200: #ff7070;
+  --pf-chart-color-red-300: #ff4747;
+  --pf-chart-color-red-400: #ff0a0a;
+  --pf-chart-color-red-500: #a30000;
+  --pf-chart-global--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-chart-global--BorderColor--accent: var(--pf-global--BorderColor--400);
+  --pf-chart-global--label--Fill: var(--pf-global--Color--100);
+  --pf-chart-global--title--Fill: var(--pf-global--Color--100);
+  --pf-chart-global--subtitle--Fill: var(--pf-global--Color--200);
+  --pf-chart-global--tooltip--Fill: var(--pf-global--Color--100);
+  --pf-chart-global--tooltip--bg--Fill: var(--pf-global--BackgroundColor--300);
+  --pf-chart-axis--axis--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--grid--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--tick--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--axis--tick--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--grid--Fill: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--tick-label--Fill: var(--pf-chart-global--label--Fill);
+  --pf-chart-bullet--label--title--Fill: var(--pf-chart-global--title--Fill);
+  --pf-chart-bullet--label--grouptitle--Fill: var(--pf-chart-bullet--label--title--Fill);
+  --pf-chart-bullet--label--subtitle--Fill: var(--pf-chart-global--subtitle--Fill);
+  --pf-chart-bullet--negative-measure--ColorScale--100: var(--pf-global--palette--red-400);
+  --pf-chart-bullet--negative-measure--ColorScale--200: var(--pf-global--palette--red-300);
+  --pf-chart-bullet--negative-measure--ColorScale--300: var(--pf-global--palette--red-200);
+  --pf-chart-bullet--negative-measure--ColorScale--400: var(--pf-global--palette--red-100);
+  --pf-chart-bullet--negative-measure--ColorScale--500: var(--pf-global--palette--red-9999);
+  --pf-chart-bullet--qualitative-range--ColorScale--100: var(--pf-global--palette--black-600);
+  --pf-chart-bullet--qualitative-range--ColorScale--200: var(--pf-global--palette--black-500);
+  --pf-chart-bullet--qualitative-range--ColorScale--300: var(--pf-global--palette--black-400);
+  --pf-chart-bullet--qualitative-range--ColorScale--400: var(--pf-global--palette--black-300);
+  --pf-chart-bullet--qualitative-range--ColorScale--500: var(--pf-global--palette--black-200);
+  --pf-chart-container--cursor--line--Fill: var(--pf-chart-global--BorderColor--accent);
+  --pf-chart-donut--label--title--Fill: var(--pf-chart-global--title--Fill);
+  --pf-chart-donut--label--subtitle--Fill: var(--pf-chart-global--subtitle--Fill);
+  --pf-chart-line--data--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-tooltip--Fill: var(--pf-chart-global--tooltip--Fill);
+  --pf-chart-voronoi--labels--Fill: var(--pf-chart-global--tooltip--Fill);
+  --pf-chart-tooltip--flyoutStyle--Fill: var(--pf-chart-global--tooltip--bg--Fill);
+  --pf-chart-voronoi--flyout--stroke--Fill: var(--pf-chart-global--tooltip--bg--Fill);
+  --pf-chart-voronoi--flyout--stroke--Color: var(--pf-chart-global--tooltip--bg--Fill);
+}

package/patternfly-charts-theme-dark.scss

@@ -0,0 +1,8 @@
+@import "themes/dark/patternfly-charts-theme-dark";
+
+$pf-theme-dark-class: ".pf-theme-dark" !default;
+$pf-charts-theme-dark-class: $pf-theme-dark-class !default;
+
+:where(#{$pf-theme-dark-class}) {
+  @include pf-charts-theme-dark($pf-charts-theme-dark-class);
+}