@patternfly/patternfly 4.159.2 → 4.162.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/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

@@ -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

@@ -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);
   }
 }