@patternfly/patternfly 4.196.5 → 4.196.8

package/RELEASE-NOTES.md

@@ -3,6 +3,30 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.07 release notes (2022-06-03)
+Packages released:
+- [@patternfly/patternfly@v4.196.7](https://www.npmjs.com/package/@patternfly/patternfly/v/4.196.7)
+
+### Components
+- **Calendar month:** Improved layout of nav controls ([#4862](https://github.com/patternfly/patternfly/pull/4862))
+- **Chip group:** Fixed premature wrapping ([#4879](https://github.com/patternfly/patternfly/pull/4879))
+- **Drawer:** Added demos with jumplinks ([#4608](https://github.com/patternfly/patternfly/pull/4608))
+- **Form field:** Documented autocomplete limitation ([#4856](https://github.com/patternfly/patternfly/pull/4856))
+- **Form:** Added complex form demo ([#4865](https://github.com/patternfly/patternfly/pull/4865))
+- **Label:** Added gold, updated orange bgcolor ([#4863](https://github.com/patternfly/patternfly/pull/4863))
+- **Page:** Added masthead to header/nav/main stacking context order ([#4839](https://github.com/patternfly/patternfly/pull/4839))
+- **Table:**
+  - Added expanded set column width example ([#4852](https://github.com/patternfly/patternfly/pull/4852))
+  - Added image and text demo ([#4853](https://github.com/patternfly/patternfly/pull/4853))
+
+### Other
+- **Theme:**
+  * Imported dark theme per component, added new global var ([#4864](https://github.com/patternfly/patternfly/pull/4864))
+  * Updated dark theme default text color ([#4875](https://github.com/patternfly/patternfly/pull/4875))
+  * Updated build process to copy files from new SCSS location ([#4877](https://github.com/patternfly/patternfly/issues/4877))
+- **Utilities:** Added font family utilities ([#4868](https://github.com/patternfly/patternfly/pull/4868))
+
+
 ## 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)
@@ -1079,7 +1103,7 @@ Packages released:
 Packages released:
 - [@patternfly/patternfly@v4.10.31](https://www.npmjs.com/package/@patternfly/patternfly/v/4.10.31)
 
-This is our major release. Check out our [upgrade guide](/documentation/core/overview/upgrade-guide) for a list of breaking changes!
+This is our major release. Check out our [upgrade guide](/developer-resources/upgrade-guide/html) for a list of breaking changes!
 
 ## 2020.06 release notes (2020-05-12)
 Packages released:

package/base/themes/dark/_chart-globals.scss

@@ -0,0 +1,39 @@
+@import "../../../sass-utilities/colors";
+@import "../../../sass-utilities/scss-variables";
+
+// Chart colors
+
+// blue
+$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: $pf-color-blue-400;
+
+// green
+$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: $pf-color-green-500;
+
+// cyan
+$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: $pf-color-cyan-400;
+
+// purple
+$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: $pf-color-purple-500;
+
+// red
+$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: $pf-color-red-200;

package/base/themes/dark/_globals.scss

@@ -0,0 +1,5 @@
+@mixin globals() {
+  // stylelint-disable property-no-unknown
+  color-scheme: dark;
+  // stylelint-enable
+}

package/base/themes/dark/_variables.scss

@@ -0,0 +1,95 @@
+@import "../../../sass-utilities/themes/dark/all";
+
+@mixin _variables() {
+  // palette changes
+  --pf-global--palette--black-50: #{$pf-color-black-50};
+  --pf-global--palette--black-100: #{$pf-color-black-100};
+  --pf-global--palette--black-200: #{$pf-color-black-200};
+  --pf-global--palette--black-300: #{$pf-color-black-300};
+  --pf-global--palette--black-400: #{$pf-color-black-400};
+  --pf-global--palette--black-500: #{$pf-color-black-500};
+  --pf-global--palette--black-600: #{$pf-color-black-600};
+  --pf-global--palette--black-700: #{$pf-color-black-700};
+  --pf-global--palette--black-800: #{$pf-color-black-800};
+  --pf-global--palette--black-900: #{$pf-color-black-900};
+  --pf-global--palette--red-9999: #{$pf-color-red-9999};
+  --pf-global--palette--red-8888: #{$pf-color-red-8888};
+  --pf-global--palette--blue-300: #{$pf-color-blue-300};
+
+  // background colors
+  --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
+  --pf-global--BackgroundColor--150: #{$pf-global--BackgroundColor--150};
+  --pf-global--BackgroundColor--200: #{$pf-global--BackgroundColor--200};
+  --pf-global--BackgroundColor--300: #{$pf-global--BackgroundColor--300};
+  --pf-global--BackgroundColor--400: #{$pf-global--BackgroundColor--400};
+  --pf-global--BorderColor--100: #{$pf-global--BorderColor--100};
+  --pf-global--BorderColor--200: #{$pf-global--BorderColor--200};
+  --pf-global--BorderColor--300: #{$pf-global--BorderColor--300};
+  --pf-global--BorderColor--400: #{$pf-global--BorderColor--400};
+
+  // text colors
+  --pf-global--Color--100: #{$pf-global--Color--100};
+  --pf-global--Color--200: #{$pf-global--Color--200};
+  --pf-global--active-color--100: #{$pf-global--active-color--100};
+  --pf-global--primary-color--100: #{$pf-global--primary-color--100};
+  --pf-global--primary-color--300: #{$pf-global--primary-color--300};
+  --pf-global--success-color--100: #{$pf-global--success-color--100};
+  --pf-global--warning-color--100: #{$pf-global--warning-color--100};
+  --pf-global--warning-color--200: #{$pf-global--warning-color--200};
+  --pf-global--danger-color--100: #{$pf-global--danger-color--100};
+  --pf-global--danger-color--200: #{$pf-global--danger-color--200};
+  --pf-global--link--Color: #{$pf-global--link--Color};
+  --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
+  --pf-global--disabled-color--100: #{$pf-global--disabled-color--100};
+  --pf-global--disabled-color--200: #{$pf-global--disabled-color--200};
+  --pf-global--disabled-color--300: #{$pf-global--disabled-color--300};
+
+  // icons
+  --pf-global--icon--Color--light: #{$pf-global--icon--Color--light};
+  --pf-global--icon--Color--dark: #{$pf-global--icon--Color--dark};
+
+  // theme color resets
+  --pf-global--Color--dark-100: #{$pf-global--Color--dark-100};
+  --pf-global--Color--dark-200: #{$pf-global--Color--dark-200};
+  --pf-global--Color--light-100: #{$pf-global--Color--light-100};
+  --pf-global--Color--light-200: #{$pf-global--Color--light-200};
+  --pf-global--Color--light-300: #{$pf-global--Color--light-300};
+  --pf-global--BorderColor--dark-100: #{$pf-global--BorderColor--dark-100};
+  --pf-global--BorderColor--light-100: #{$pf-global--BorderColor--light-100};
+  --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
+  --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
+  --pf-global--link--Color--light: #{$pf-global--link--Color--light};
+  --pf-global--link--Color--light--hover: #{$pf-global--link--Color--light--hover};
+  --pf-global--link--Color--dark: #{$pf-global--link--Color--dark};
+  --pf-global--link--Color--dark--hover: #{$pf-global--link--Color--dark--hover};
+  --pf-global--BackgroundColor--light-100: #{$pf-global--BackgroundColor--light-100};
+  --pf-global--BackgroundColor--light-200: #{$pf-global--BackgroundColor--light-200};
+  --pf-global--BackgroundColor--light-300: #{$pf-global--BackgroundColor--light-300};
+  --pf-global--BackgroundColor--dark-100: #{$pf-global--BackgroundColor--dark-100};
+  --pf-global--BackgroundColor--dark-200: #{$pf-global--BackgroundColor--dark-200};
+  --pf-global--BackgroundColor--dark-300: #{$pf-global--BackgroundColor--dark-300};
+  --pf-global--BackgroundColor--dark-400: #{$pf-global--BackgroundColor--dark-400};
+
+  // Shadows
+  --pf-global--BoxShadow--sm: #{$pf-global--BoxShadow--sm};
+  --pf-global--BoxShadow--sm-top: #{$pf-global--BoxShadow--sm-top};
+  --pf-global--BoxShadow--sm-right: #{$pf-global--BoxShadow--sm-right};
+  --pf-global--BoxShadow--sm-bottom: #{$pf-global--BoxShadow--sm-bottom};
+  --pf-global--BoxShadow--sm-left: #{$pf-global--BoxShadow--sm-left};
+  --pf-global--BoxShadow--md: #{$pf-global--BoxShadow--md};
+  --pf-global--BoxShadow--md-top: #{$pf-global--BoxShadow--md-top};
+  --pf-global--BoxShadow--md-right: #{$pf-global--BoxShadow--md-right};
+  --pf-global--BoxShadow--md-bottom: #{$pf-global--BoxShadow--md-bottom};
+  --pf-global--BoxShadow--md-left: #{$pf-global--BoxShadow--md-left};
+  --pf-global--BoxShadow--lg: #{$pf-global--BoxShadow--lg};
+  --pf-global--BoxShadow--lg-top: #{$pf-global--BoxShadow--lg-top};
+  --pf-global--BoxShadow--lg-right: #{$pf-global--BoxShadow--lg-right};
+  --pf-global--BoxShadow--lg-bottom: #{$pf-global--BoxShadow--lg-bottom};
+  --pf-global--BoxShadow--lg-left: #{$pf-global--BoxShadow--lg-left};
+  --pf-global--BoxShadow--xl: #{$pf-global--BoxShadow--xl};
+  --pf-global--BoxShadow--xl-top: #{$pf-global--BoxShadow--xl-top};
+  --pf-global--BoxShadow--xl-right: #{$pf-global--BoxShadow--xl-right};
+  --pf-global--BoxShadow--xl-bottom: #{$pf-global--BoxShadow--xl-bottom};
+  --pf-global--BoxShadow--xl-left: #{$pf-global--BoxShadow--xl-left};
+  --pf-global--BoxShadow--inset: #{$pf-global--BoxShadow--inset};
+}

package/components/Menu/menu.css

@@ -231,9 +231,6 @@
   --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
   --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
-.pf-c-menu .pf-c-menu__content {
-  overflow: visible hidden;
-}
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
 }
@@ -268,7 +265,7 @@
 }
 .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
   flex-grow: 1;
-  overflow-x: hidden;
+  overflow: hidden;
   transition: var(--pf-c-menu--m-drilldown__content--Transition);
 }
 .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,

package/components/Menu/menu.scss

@@ -196,8 +196,6 @@
   box-shadow: var(--pf-c-menu--BoxShadow);
 
   .pf-c-menu__content {
-    overflow: visible hidden;
-
     & & {
       overflow: visible;
     }
@@ -243,7 +241,7 @@
 
     > .pf-c-menu__content {
       flex-grow: 1;
-      overflow-x: hidden;
+      overflow: hidden;
       transition: var(--pf-c-menu--m-drilldown__content--Transition);
     }
 

package/docs/components/NotificationBadge/examples/NotificationBadge.md

@@ -148,9 +148,9 @@ cssPrefix: pf-c-notification-badge
 
 ### Overview
 
-Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](../masthead).
+Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
 
-Note: The [page component](../page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
+Note: The [page component](/components/page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
 
 ### Accessibility
 

package/docs/demos/Table/examples/Table.md

@@ -13306,22 +13306,20 @@ wrapperTag: div
           <tbody role="rowgroup">
             <tr role="row">
               <td role="cell" colspan="8">
-                <div class="pf-l-bullseye">
-                  <div class="pf-c-empty-state pf-m-sm">
-                    <div class="pf-c-empty-state__content">
-                      <div class="pf-c-empty-state__icon">
-                        <span
-                          class="pf-c-spinner"
-                          role="progressbar"
-                          aria-label="Loading..."
-                        >
-                          <span class="pf-c-spinner__clipper"></span>
-                          <span class="pf-c-spinner__lead-ball"></span>
-                          <span class="pf-c-spinner__tail-ball"></span>
-                        </span>
-                      </div>
-                      <h2 class="pf-c-title pf-m-lg">Loading</h2>
+                <div class="pf-c-empty-state pf-m-sm">
+                  <div class="pf-c-empty-state__content">
+                    <div class="pf-c-empty-state__icon">
+                      <span
+                        class="pf-c-spinner"
+                        role="progressbar"
+                        aria-label="Loading..."
+                      >
+                        <span class="pf-c-spinner__clipper"></span>
+                        <span class="pf-c-spinner__lead-ball"></span>
+                        <span class="pf-c-spinner__tail-ball"></span>
+                      </span>
                     </div>
+                    <h2 class="pf-c-title pf-m-lg">Loading</h2>
                   </div>
                 </div>
               </td>
@@ -14247,24 +14245,22 @@ wrapperTag: div
           <tbody role="rowgroup">
             <tr role="row">
               <td role="cell" colspan="8">
-                <div class="pf-l-bullseye">
-                  <div class="pf-c-empty-state pf-m-sm">
-                    <div class="pf-c-empty-state__content">
-                      <i
-                        class="fas fa- fa-search pf-c-empty-state__icon"
-                        aria-hidden="true"
-                      ></i>
-
-                      <h2 class="pf-c-title pf-m-lg">No results found</h2>
-                      <div
-                        class="pf-c-empty-state__body"
-                      >No results match the filter criteria. Remove all filters or clear all filters to show results.</div>
-                      <div class="pf-c-empty-state__primary">
-                        <button
-                          class="pf-c-button pf-m-link"
-                          type="button"
-                        >Clear all filters</button>
-                      </div>
+                <div class="pf-c-empty-state pf-m-sm">
+                  <div class="pf-c-empty-state__content">
+                    <i
+                      class="fas fa- fa-search pf-c-empty-state__icon"
+                      aria-hidden="true"
+                    ></i>
+
+                    <h2 class="pf-c-title pf-m-lg">No results found</h2>
+                    <div
+                      class="pf-c-empty-state__body"
+                    >No results match the filter criteria. Remove all filters or clear all filters to show results.</div>
+                    <div class="pf-c-empty-state__primary">
+                      <button
+                        class="pf-c-button pf-m-link"
+                        type="button"
+                      >Clear all filters</button>
                     </div>
                   </div>
                 </div>

package/package.json

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

package/patternfly-no-reset.css

@@ -18037,9 +18037,6 @@ ul.pf-c-list {
   --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
   --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
-.pf-c-menu .pf-c-menu__content {
-  overflow: visible hidden;
-}
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
 }
@@ -18074,7 +18071,7 @@ ul.pf-c-list {
 }
 .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
   flex-grow: 1;
-  overflow-x: hidden;
+  overflow: hidden;
   transition: var(--pf-c-menu--m-drilldown__content--Transition);
 }
 .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,

package/patternfly.css

@@ -18164,9 +18164,6 @@ ul.pf-c-list {
   --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
   --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
-.pf-c-menu .pf-c-menu__content {
-  overflow: visible hidden;
-}
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
 }
@@ -18201,7 +18198,7 @@ ul.pf-c-list {
 }
 .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
   flex-grow: 1;
-  overflow-x: hidden;
+  overflow: hidden;
   transition: var(--pf-c-menu--m-drilldown__content--Transition);
 }
 .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,