@patternfly/patternfly 4.167.0 → 4.171.0

package/components/Dropdown/dropdown.css

@@ -370,6 +370,10 @@
   white-space: nowrap;
 }
 
+.pf-c-dropdown__toggle-text {
+  flex: 0 1 auto;
+}
+
 .pf-c-dropdown__toggle-icon {
   margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
@@ -381,6 +385,7 @@
 
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
+  flex-shrink: 0;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);

package/components/Dropdown/dropdown.scss

@@ -511,6 +511,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 }
 
+.pf-c-dropdown__toggle-text {
+  flex: 0 1 auto;
+}
+
 .pf-c-dropdown__toggle-icon {
   margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
@@ -525,6 +529,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
 // Toggle image
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
+  flex-shrink: 0;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);

package/components/Masthead/masthead.css

@@ -148,13 +148,8 @@
   padding-left: var(--pf-c-masthead--PaddingLeft);
   background-color: var(--pf-c-masthead--BackgroundColor);
 }
-@media screen and (min-width: 1200px) {
-  .pf-c-masthead {
-    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-  }
-}
 @media screen and (min-width: 768px) {
-  .pf-c-masthead {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
     --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
     --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
     --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -174,6 +169,14 @@
     --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
   }
 }
+@media screen and (min-width: 1200px) {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
+    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+  }
+}
+.pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
+  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+}
 .pf-c-masthead.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -230,6 +233,9 @@
   --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor);
   --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
 }
+.pf-c-masthead .pf-c-nav {
+  align-self: stretch;
+}
 
 .pf-c-masthead__main {
   position: relative;

package/components/Masthead/masthead.scss

@@ -150,16 +150,23 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
 
-  @media screen and (min-width: $pf-global--breakpoint--xl) {
-    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-  }
 
   // Set layout to stack by default
   @include pf-c-masthead--m-display-stack;
 
   // Set layout to inline at medium breakpoint
-  @media screen and (min-width: $pf-global--breakpoint--md) {
-    @include pf-c-masthead--m-display-inline;
+  .pf-c-page:where(:not(.pf-m-resize-observer)) & {
+    @media screen and (min-width: $pf-global--breakpoint--md) {
+      @include pf-c-masthead--m-display-inline;
+    }
+
+    @media screen and (min-width: $pf-global--breakpoint--xl) {
+      --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+    }
+  }
+
+  .pf-c-page:where(.pf-m-breakpoint-xl) & {
+    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
   }
 
   @include pf-t-dark; // force the container to follow the dark theme
@@ -242,6 +249,10 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
       --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
     }
   }
+
+  .pf-c-nav {
+    align-self: stretch;
+  }
 }
 
 // Main

package/components/Table/table.css

@@ -275,6 +275,7 @@
   --pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-table__subhead--Color: var(--pf-global--Color--200);
+  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
   color: var(--pf-global--Color--100);
   width: 100%;
   background-color: var(--pf-c-table--BackgroundColor);
@@ -316,6 +317,13 @@
   content: "";
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
+.pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
+.pf-c-table > .pf-m-striped > tr:nth-child(odd),
+.pf-c-table > .pf-m-striped-even > tr:nth-child(even),
+.pf-c-table tr.pf-m-striped {
+  --pf-c-table__sticky-column--BackgroundColor: var(--pf-c-table--m-striped__tr--BackgroundColor);
+  background: var(--pf-c-table--m-striped__tr--BackgroundColor);
+}
 .pf-c-table tr:not(.pf-c-table__expandable-row) {
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }

package/components/Table/table.scss

@@ -303,6 +303,9 @@
   // Subhead
   --pf-c-table__subhead--Color: var(--pf-global--Color--200);
 
+  // Striped
+  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+
   @media screen and (min-width: $pf-global--breakpoint--xl) {
     --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-c-table--cell--first-last-child--xl--PaddingRight);
     --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--cell--first-last-child--xl--PaddingLeft);
@@ -345,6 +348,19 @@
     }
   }
 
+  // For regular and expandable tables
+  // stylelint-disable
+  &.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), // regular table
+  &.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row), // expandable table
+  > .pf-m-striped > tr:nth-child(odd), // tbody odd
+  > .pf-m-striped-even > tr:nth-child(even), // tbody even
+  tr.pf-m-striped { // tr
+    --pf-c-table__sticky-column--BackgroundColor: var(--pf-c-table--m-striped__tr--BackgroundColor);
+
+    background: var(--pf-c-table--m-striped__tr--BackgroundColor);
+  }
+  // stylelint-enable
+
   // Standard table row (non-expandable)
   // exclude expandable rows
   tr:not(.pf-c-table__expandable-row) {

package/components/Toolbar/toolbar.css

@@ -324,6 +324,12 @@
   --pf-c-toolbar--spacer: 0;
 }
 
+.pf-c-toolbar__group.pf-m-overflow-container,
+.pf-c-toolbar__item.pf-m-overflow-container {
+  flex: 1;
+  overflow: hidden;
+}
+
 .pf-c-toolbar__expand-all-icon {
   display: inline-block;
   transition: var(--pf-c-toolbar__expand-all-icon--Transition);

package/components/Toolbar/toolbar.scss

@@ -322,6 +322,15 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   }
 }
 
+.pf-c-toolbar__group,
+.pf-c-toolbar__item {
+  &.pf-m-overflow-container {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
+
 .pf-c-toolbar__expand-all-icon {
   display: inline-block;
   transition: var(--pf-c-toolbar__expand-all-icon--Transition);

package/docs/components/BackToTop/examples/BackToTop.md

@@ -1,6 +1,5 @@
 ---
 id: 'Back to top'
-beta: true
 section: components
 cssPrefix: pf-c-back-to-top
 ---import './BackToTop.css'

package/docs/components/JumpLinks/examples/JumpLinks.md

@@ -2,7 +2,6 @@
 id: Jump links
 section: components
 cssPrefix: pf-c-jump-links
-beta: true
 ---## Examples
 
 ### Horizontal default