@patternfly/patternfly 4.194.3 → 4.196.0

package/RELEASE-NOTES.md

@@ -3,6 +3,31 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.06 release notes (2022-05-13)
+Packages released:
+- [@patternfly/patternfly@v4.194.4](https://www.npmjs.com/package/@patternfly/patternfly/v/4.194.4)
+
+### Components
+- **Chip group:** Fixed an overflow problem ([#4836](https://github.com/patternfly/patternfly/pull/4836))
+- **Description list:** Fixed text wrap ([#4809](https://github.com/patternfly/patternfly/pull/4809))
+- **Label:** Added button for adding new labels ([#4828](https://github.com/patternfly/patternfly/pull/4828))
+- **Menu:** Removed phantom scrollbar in drilldown menu ([#4807](https://github.com/patternfly/patternfly/pull/4807))
+- **Spinner:** Reversed the spin of legacy spinner ([#4830](https://github.com/patternfly/patternfly/pull/4830))
+- **Tabs:**
+  - Fixed demo typo ([#4808](https://github.com/patternfly/patternfly/pull/4808))
+  - Fixed add button focus outline ([#4820](https://github.com/patternfly/patternfly/pull/4820))
+  - Set disabled tab text color ([#4829](https://github.com/patternfly/patternfly/pull/4829))
+- **Tooltip:** Added dark theme border ([#4840](https://github.com/patternfly/patternfly/pull/4840))
+- **Tree view:** Added z-index to prevent guide from disappearing on focus ([#4813](https://github.com/patternfly/patternfly/pull/4813))
+
+### Other
+- **Charts:**
+  - Added dark theme support ([#4815](https://github.com/patternfly/patternfly/pull/4815))
+  - Removed workspace style ([#4834](https://github.com/patternfly/patternfly/pull/4834))
+  - Added dark theme tooltip border styles ([#4842](https://github.com/patternfly/patternfly/pull/4842))
+- **Deps:** Updated dependency theme-patternfly-org to v0.11.32 ([#4410](https://github.com/patternfly/patternfly/pull/4410))
+- **Primary detail:** Updated card view demo to use new selectable styles ([#4810](https://github.com/patternfly/patternfly/pull/4810))
+
 ## 2022.05 release notes (2022-04-20)
 Packages released:
 - [@patternfly/patternfly@v4.192.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.192.1)

package/base/_variables.scss

@@ -59,6 +59,7 @@
   --pf-global--palette--light-green-500: #{$pf-color-light-green-500};
   --pf-global--palette--light-green-600: #{$pf-color-light-green-600};
   --pf-global--palette--light-green-700: #{$pf-color-light-green-700};
+  --pf-global--palette--orange-50: #{$pf-color-orange-50};
   --pf-global--palette--orange-100: #{$pf-color-orange-100};
   --pf-global--palette--orange-200: #{$pf-color-orange-200};
   --pf-global--palette--orange-300: #{$pf-color-orange-300};

package/base/patternfly-variables.css

@@ -57,6 +57,7 @@
   --pf-global--palette--light-green-500: #6ca100;
   --pf-global--palette--light-green-600: #486b00;
   --pf-global--palette--light-green-700: #253600;
+  --pf-global--palette--orange-50: #fff6ec;
   --pf-global--palette--orange-100: #f4b678;
   --pf-global--palette--orange-200: #ef9234;
   --pf-global--palette--orange-300: #ec7a08;

package/components/Label/label.css

@@ -40,9 +40,9 @@
   --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
+  --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
   --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
-  --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
+  --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
   --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
   --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
   --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -80,6 +80,16 @@
   --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
+  --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
+  --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
+  --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
+  --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
+  --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
+  --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
+  --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
   --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -236,6 +246,21 @@
   --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
   --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
 }
+.pf-c-label.pf-m-gold {
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
+  --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
+  --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+  --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
+  --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
+  --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
+  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
+  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
+  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+}
 .pf-c-label.pf-m-outline {
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);

package/components/Label/label.scss

@@ -55,9 +55,9 @@
   --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
 
   // Orange
-  --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
+  --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
   --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
-  --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
+  --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
   --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
   --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
   --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -102,6 +102,18 @@
   --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
   --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
 
+  // Gold
+  --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
+  --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
+  --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
+  --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
+  --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
+  --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
+  --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
+  --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
+  --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
+  --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
+
   // Overflow
   --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
   --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -281,6 +293,22 @@
     --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
   }
 
+  &.pf-m-gold {
+    --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
+    --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
+    --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
+    --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+    --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
+    --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
+    --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
+    --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
+    --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
+    --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
+    --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+    --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+    --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+  }
+
   &.pf-m-outline {
     --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
     --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);

package/docs/components/FormControl/examples/FormControl.md

@@ -8,6 +8,8 @@ cssPrefix: pf-c-form-control
 
 ### Input
 
+**Note:** In webkit browsers, inputs with status icons that are autocompleted will have their icons removed by the user agent stylesheet. If the field does not need to use autocomplete, turn it off with `autocomplete="off"` to avoid the problem. Otherwise, use [helper text](/components/helper-text/html-demos)  instead to ensure that the status will remain visible if the field is autocompleted.
+
 ```html
 <input
   class="pf-c-form-control"

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

@@ -580,6 +580,88 @@ cssPrefix: pf-c-label
   </button>
 </span>
 
+<br />
+<br />
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">Gold</span>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <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>
+    Gold icon
+  </span>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <span class="pf-c-label__content">Gold removable</span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-removable-button gold-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <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>
+    Gold icon removable
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-icon-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-icon-removable-button gold-icon-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <a class="pf-c-label__content" href="#">Gold link</a>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <a class="pf-c-label__content" href="#">Gold link removable</a>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-link-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-link-removable-button gold-link-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold">
+  <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>
+    <span class="pf-c-label__text">Gold label with icon that truncates</span>
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-truncate-button"
+    aria-label="Remove"
+    aria-labelledby="gold-truncate-button gold-truncate-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
 ```
 
 ### Outline
@@ -1030,6 +1112,70 @@ cssPrefix: pf-c-label
   </button>
 </span>
 
+<br />
+<br />
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">Gold</span>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <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>
+    Gold icon
+  </span>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <span class="pf-c-label__content">Gold removable</span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-outline-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-outline-removable-button gold-outline-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <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>
+    Gold icon removable
+  </span>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-outline-icon-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-outline-icon-removable-button gold-outline-icon-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <a class="pf-c-label__content" href="#">Gold link</a>
+</span>
+
+<span class="pf-c-label pf-m-gold pf-m-outline">
+  <a class="pf-c-label__content" href="#">Gold link removable</a>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    id="gold-outline-link-removable-button"
+    aria-label="Remove"
+    aria-labelledby="gold-outline-link-removable-button gold-outline-link-removable-text"
+  >
+    <i class="fas fa-times" aria-hidden="true"></i>
+  </button>
+</span>
+
 ```
 
 ### Compact
@@ -1238,5 +1384,6 @@ This style of label is used to add new labels to a label group.
 | `.pf-m-red`                  | `.pf-c-label`               | Modifies the label to have red colored styling.                                                                                                                                                                          |
 | `.pf-m-purple`               | `.pf-c-label`               | Modifies the label to have purple colored styling.                                                                                                                                                                       |
 | `.pf-m-cyan`                 | `.pf-c-label`               | Modifies the label to have cyan colored styling.                                                                                                                                                                         |
+| `.pf-m-gold`                 | `.pf-c-label`               | Modifies the label to have gold colored styling.                                                                                                                                                                         |
 | `.pf-m-editable`             | `.pf-c-label`               | Modifies label for editable styles.                                                                                                                                                                                      |
 | `.pf-m-editable-active`      | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles.                                                                                                                                                                               |