@patternfly/patternfly 4.160.0 → 4.162.1

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/DataList/data-list.scss

@@ -1,4 +1,4 @@
-@import "./data-list-grid.scss";
+@import "./data-list-grid";
 
 .pf-c-data-list {
   --pf-c-data-list--FontSize: 1em; // inherit font-size, update this to global variable at breaking change

package/components/DescriptionList/description-list.css

@@ -104,6 +104,20 @@
 .pf-c-description-list.pf-m-fluid {
   --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
 }
+.pf-c-description-list.pf-m-fill-columns {
+  display: block;
+  column-count: var(--pf-c-description-list--GridTemplateColumns--count);
+  margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
+}
+.pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
+  display: inline-grid;
+  width: 100%;
+  margin-bottom: var(--pf-c-description-list--RowGap);
+  break-inside: avoid;
+  page-break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+  -moz-column-break-inside: avoid;
+}
 
 .pf-c-description-list__group {
   display: grid;

package/components/DescriptionList/description-list.scss

@@ -77,6 +77,25 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
   &.pf-m-fluid {
     --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
   }
+
+  &.pf-m-fill-columns {
+    display: block;
+    column-count: var(--pf-c-description-list--GridTemplateColumns--count);
+    margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
+
+    .pf-c-description-list__group {
+      display: inline-grid;
+      width: 100%;
+      margin-bottom: var(--pf-c-description-list--RowGap);
+      break-inside: avoid;
+      page-break-inside: avoid;
+
+      // stylelint-disable property-no-vendor-prefix
+      -webkit-column-break-inside: avoid;
+      -moz-column-break-inside: avoid;
+      // stylelint-enable
+    }
+  }
 }
 
 .pf-c-description-list__group {

package/components/Table/table.css

@@ -394,9 +394,14 @@
   outline-offset: var(--pf-c-table--thead--m-nested-column-header--button--OutlineOffset);
 }
 .pf-c-table thead.pf-m-nested-column-header th,
-.pf-c-table thead.pf-m-nested-column-header td {
+.pf-c-table thead.pf-m-nested-column-header td,
+.pf-c-table thead.pf-m-nested-column-header input {
   vertical-align: middle;
 }
+.pf-c-table thead.pf-m-nested-column-header .pf-c-table__check label {
+  display: flex;
+  align-items: center;
+}
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan]),
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
@@ -429,7 +434,7 @@
   background-color: transparent;
   border-left: var(--pf-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-c-table__expandable-row--after--BorderColor);
 }
-.pf-c-table tbody .pf-c-table__check > input {
+.pf-c-table tbody .pf-c-table__check input {
   margin-top: var(--pf-c-table__check--input--MarginTop);
   vertical-align: top;
 }
@@ -716,9 +721,15 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 }
-.pf-c-table__check > input:not([disabled]) {
+.pf-c-table__check label:not([disabled]),
+.pf-c-table__check input:not([disabled]) {
   cursor: pointer;
 }
+.pf-c-table__check label {
+  display: block;
+  padding: inherit;
+  margin: calc(var(--pf-c-table--cell--PaddingTop) * -1) calc(var(--pf-c-table--cell--PaddingRight) * -1) calc(var(--pf-c-table--cell--PaddingBottom) * -1) calc(var(--pf-c-table--cell--PaddingLeft) * -1);
+}
 
 .pf-c-table__favorite .pf-c-button {
   --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--c-button--Color);

package/components/Table/table.scss

@@ -453,10 +453,16 @@
       }
 
       th,
-      td {
+      td,
+      input {
         vertical-align: middle;
       }
 
+      .pf-c-table__check label {
+        display: flex;
+        align-items: center;
+      }
+
       tr:not(:first-child) {
         th,
         td {
@@ -515,7 +521,7 @@
 
     // Check table cell
     .pf-c-table__check {
-      > input {
+      input {
         margin-top: var(--pf-c-table__check--input--MarginTop);
         vertical-align: top;
       }
@@ -902,9 +908,16 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 
-  > input:not([disabled]) {
+  label:not([disabled]),
+  input:not([disabled]) {
     cursor: pointer;
   }
+
+  label {
+    display: block;
+    padding: inherit;
+    margin: calc(var(--pf-c-table--cell--PaddingTop) * -1) calc(var(--pf-c-table--cell--PaddingRight) * -1) calc(var(--pf-c-table--cell--PaddingBottom) * -1) calc(var(--pf-c-table--cell--PaddingLeft) * -1);
+  }
 }
 
 // Favorite body cell