@patternfly/patternfly 4.159.1 → 4.161.0

package/base/_common.scss

@@ -17,9 +17,13 @@
   html {
     font-size: unset !important; // the important is needed because we don't know if pf3 will be loaded after pfnext
   }
+  // stylelint-enable
 }
 
 .pf-screen-reader {
   @include pf-u-screen-reader; // for use with assistive technologies
 }
-// stylelint-enable
+
+.pf-m-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}

package/base/_fonts.scss

@@ -56,6 +56,106 @@
   text-rendering: optimizeLegibility;
 }
 
+// RedHatFont-updated
+@font-face {
+  font-family: "RedHatDisplayUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 300;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatDisplayUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatDisplayUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatTextUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatTextUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+// RedHatMono
+@font-face {
+  font-family: "RedHatMono";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: fallback;
+}
+
+// Variable fonts
+@font-face {
+  font-family: "RedHatDisplayVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatDisplayVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
+  font-style: italic;
+  font-weight: 300 900;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatTextVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatTextVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
+  font-style: italic;
+  font-weight: 400 500;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatMonoVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatMonoVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
+  font-style: italic;
+  font-weight: 300 700;
+  font-display: fallback;
+}
+
+
 @if $pf-global--enable-font-overpass-cdn {
   @import url("https://fonts.googleapis.com/css?family=Overpass|Overpass+Mono");
 } @else {

package/base/_globals.scss

@@ -127,22 +127,6 @@
     cursor: pointer;
   }
 
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    // Remove the inner border and padding in Firefox.
-    &::-moz-focus-inner {
-      padding: 0;
-      border-style: none;
-    }
-
-    // Restore the focus styles unset by the previous rule.
-    &:-moz-focusring {
-      outline: 1px dotted ButtonText;
-    }
-  }
-
   @include pf-m-overpass-font {
     a {
       font-weight: var(--pf-global--FontWeight--semi-bold);

package/base/_variables.scss

@@ -234,6 +234,12 @@
   --pf-global--FontFamily--sans-serif: #{$pf-global--FontFamily--sans-serif};
   --pf-global--FontFamily--heading--sans-serif: #{$pf-global--FontFamily--heading--sans-serif};
   --pf-global--FontFamily--monospace: #{$pf-global--FontFamily--monospace};
+  --pf-global--FontFamily--redhat-updated--sans-serif: #{$pf-global--FontFamily--redhat-updated--sans-serif};
+  --pf-global--FontFamily--redhat-updated--heading--sans-serif: #{$pf-global--FontFamily--redhat-updated--heading--sans-serif};
+  --pf-global--FontFamily--redhat--monospace: #{$pf-global--FontFamily--redhat--monospace};
+  --pf-global--FontFamily--redhatVF--sans-serif: #{$pf-global--FontFamily--redhatVF--sans-serif};
+  --pf-global--FontFamily--redhatVF--heading--sans-serif: #{$pf-global--FontFamily--redhatVF--heading--sans-serif};
+  --pf-global--FontFamily--redhatVF--monospace: #{$pf-global--FontFamily--redhatVF--monospace};
   --pf-global--FontFamily--overpass--sans-serif: #{$pf-global--FontFamily--overpass--sans-serif};
   --pf-global--FontFamily--overpass--monospace: #{$pf-global--FontFamily--overpass--monospace};
 
@@ -274,7 +280,7 @@
   --pf-global--target-size--MinHeight: #{$pf-global--target-size--MinHeight};
 }
 
-// RedHat Font overrides
+// Overpass font overrides
 @include pf-m-overpass-font {
   --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
   --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
@@ -282,3 +288,21 @@
   --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
   --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
 }
+
+// RedHatFont updated font overrides
+.pf-m-redhat-updated-font {
+  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhat-updated--sans-serif);
+  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif);
+}
+
+// RedHatMono font overrides
+.pf-m-redhatmono-font {
+  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhat--monospace);
+}
+
+// RedHat variable font overrides
+.pf-m-redhatVF-font {
+  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhatVF--sans-serif);
+  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhatVF--heading--sans-serif);
+  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
+}

package/base/patternfly-common.css

@@ -16,4 +16,8 @@ html {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
+}
+
+.pf-m-tabular-nums {
+  font-variant-numeric: tabular-nums;
 }

package/base/patternfly-fonts.css

@@ -33,6 +33,90 @@
   font-weight: 700;
   text-rendering: optimizeLegibility;
 }
+@font-face {
+  font-family: "RedHatDisplayUpdated";
+  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 300;
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-family: "RedHatDisplayUpdated";
+  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-family: "RedHatDisplayUpdated";
+  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-family: "RedHatTextUpdated";
+  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-family: "RedHatTextUpdated";
+  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-family: "RedHatMono";
+  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: fallback;
+}
+@font-face {
+  font-family: "RedHatDisplayVF";
+  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: fallback;
+}
+@font-face {
+  font-family: "RedHatDisplayVF";
+  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
+  font-style: italic;
+  font-weight: 300 900;
+  font-display: fallback;
+}
+@font-face {
+  font-family: "RedHatTextVF";
+  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: fallback;
+}
+@font-face {
+  font-family: "RedHatTextVF";
+  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
+  font-style: italic;
+  font-weight: 400 500;
+  font-display: fallback;
+}
+@font-face {
+  font-family: "RedHatMonoVF";
+  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: fallback;
+}
+@font-face {
+  font-family: "RedHatMonoVF";
+  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
+  font-style: italic;
+  font-weight: 300 700;
+  font-display: fallback;
+}
 @font-face {
   font-family: "overpass";
   font-style: normal;

package/base/patternfly-globals.css

@@ -116,20 +116,6 @@ a {
   cursor: pointer;
 }
 
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-button:-moz-focusring,
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 .pf-m-overpass-font a {
   font-weight: var(--pf-global--FontWeight--semi-bold);
 }

package/base/patternfly-variables.css

@@ -198,6 +198,12 @@
   --pf-global--FontFamily--sans-serif: "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
   --pf-global--FontFamily--heading--sans-serif: "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
   --pf-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
+  --pf-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhat--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
+  --pf-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhatVF--monospace: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
   --pf-global--FontFamily--overpass--sans-serif: "overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --pf-global--FontFamily--overpass--monospace: "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
   --pf-global--FontSize--4xl: 2.25rem;
@@ -232,4 +238,19 @@
   --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
   --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
   --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
+}
+
+.pf-m-redhat-updated-font {
+  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhat-updated--sans-serif);
+  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif);
+}
+
+.pf-m-redhatmono-font {
+  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhat--monospace);
+}
+
+.pf-m-redhatVF-font {
+  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhatVF--sans-serif);
+  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhatVF--heading--sans-serif);
+  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
 }

package/components/Table/table.css

@@ -227,8 +227,8 @@
   --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
   --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
@@ -716,7 +716,7 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 }
-.pf-c-table__check > input {
+.pf-c-table__check > input:not([disabled]) {
   cursor: pointer;
 }
 

package/components/Table/table.scss

@@ -240,8 +240,8 @@
   --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
 
   // Nested table
-  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
 
   // Modifier - expandable row expanded
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
@@ -902,7 +902,7 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 
-  > input {
+  > input:not([disabled]) {
     cursor: pointer;
   }
 }

package/components/Toolbar/toolbar.css

@@ -112,6 +112,8 @@
   --pf-c-toolbar__item--m-chip-group--spacer: var(--pf-global--spacer--sm);
   --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
   --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
+  --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
   --pf-c-toolbar--c-divider--m-vertical--spacer: var(--pf-c-toolbar--spacer--base);
   --pf-c-toolbar--m-full-height--PaddingTop: 0;
@@ -379,8 +381,8 @@
   grid-row-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
 }
 .pf-c-toolbar__expandable-content .pf-m-label {
-  display: none;
-  visibility: hidden;
+  margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
+  font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
 }
 
 .pf-c-toolbar__content.pf-m-chip-container,

package/components/Toolbar/toolbar.scss

@@ -99,6 +99,10 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
   --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
 
+  // Label in expanded content
+  --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
+  --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
+
   // Toggle
   --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
 
@@ -382,8 +386,8 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   }
 
   .pf-m-label {
-    display: none;
-    visibility: hidden;
+    margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
+    font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
   }
 }
 

package/docs/components/Select/examples/Select.md

@@ -235,17 +235,18 @@ The single select should be used when the user is selecting an option from a lis
 
 ### Usage
 
-| Class                          | Applied to     | Outcome                                                 |
-| ------------------------------ | -------------- | ------------------------------------------------------- |
-| `.pf-c-select`                 | `<div>`        | Initiates a custom select.                              |
-| `.pf-c-select__toggle`         | `<button>`     | Initiates a custom toggle.                              |
-| `.pf-c-select__toggle-wrapper` | `<div>`        | Initiates a custom select toggle wrapper.               |
-| `.pf-c-select__toggle-arrow`   | `<span>`       | Initiates the caret to toggle the dropdown.             |
-| `.pf-c-select__menu`           | `<ul>`         | Initiates the custom select dropdown menu.              |
-| `.pf-c-select__menu-item`      | `<li>`         | Initiates the items in the custom select dropdown menu. |
-| `.pf-c-select__menu-item-icon` | `<i>`          | Initiates the selected item icon.                       |
-| `.pf-m-top`                    | `.pf-c-select` | Modifies the select menu to display above the toggle.   |
-| `.pf-m-active`                 | `.pf-c-select` | Forces display of the active state of the toggle.       |
+| Class                          | Applied to           | Outcome                                                          |
+| ------------------------------ | -------------------- | ---------------------------------------------------------------- |
+| `.pf-c-select`                 | `<div>`              | Initiates a custom select.                                       |
+| `.pf-c-select__toggle`         | `<button>`           | Initiates a custom toggle.                                       |
+| `.pf-c-select__toggle-wrapper` | `<div>`              | Initiates a custom select toggle wrapper.                        |
+| `.pf-c-select__toggle-arrow`   | `<span>`             | Initiates the caret to toggle the dropdown.                      |
+| `.pf-c-select__menu`           | `<ul>`               | Initiates the custom select dropdown menu.                       |
+| `.pf-c-select__menu-item`      | `<li>`               | Initiates the items in the custom select dropdown menu.          |
+| `.pf-c-select__menu-item-icon` | `<i>`                | Initiates the selected item icon.                                |
+| `.pf-m-top`                    | `.pf-c-select`       | Modifies the select menu to display above the toggle.            |
+| `.pf-m-align-right`            | `.pf-c-select__menu` | Modifies the select menu to display right aligned to the toggle. |
+| `.pf-m-active`                 | `.pf-c-select`       | Forces display of the active state of the toggle.                |
 
 ## States