@patternfly/patternfly 4.168.0 → 4.171.1

package/components/ProgressStepper/progress-stepper.css

@@ -80,6 +80,8 @@
   --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200);
   --pf-c-progress-stepper__step-description--TextAlign: left;
   --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
+  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
+  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
   position: relative;
   display: grid;
   grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);

package/components/ProgressStepper/progress-stepper.scss

@@ -102,6 +102,8 @@
   --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200);
   --pf-c-progress-stepper__step-description--TextAlign: left;
   --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
+  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
+  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
 
   position: relative;
   display: grid;

package/components/Select/select.css

@@ -80,6 +80,8 @@
   --pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
+  --pf-c-select--m-plain__toggle-arrow--Color: var(--pf-global--Color--200);
+  --pf-c-select--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100);
   --pf-c-select__toggle-clear--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-select__toggle-clear--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-select__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
@@ -257,9 +259,15 @@
   --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--m-expanded--before--BorderBottomColor);
   --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--m-expanded--before--BorderBottomWidth);
 }
+.pf-c-select__toggle.pf-m-plain {
+  --pf-c-select__toggle-arrow--Color: var(--pf-c-select--m-plain__toggle-arrow--Color);
+}
 .pf-c-select__toggle.pf-m-plain::before {
   border-color: var(--pf-c-select__toggle--m-plain--before--BorderColor);
 }
+.pf-c-select__toggle.pf-m-plain:hover, .pf-c-select__toggle.pf-m-plain:active, .pf-c-select__toggle.pf-m-plain.pf-m-active, .pf-c-select__toggle.pf-m-plain:focus, .pf-c-select.pf-m-expanded > .pf-c-select__toggle.pf-m-plain {
+  --pf-c-select--m-plain__toggle-arrow--Color: var(--pf-c-select--m-plain--hover__toggle-arrow--Color);
+}
 .pf-c-select__toggle.pf-m-typeahead {
   --pf-c-select__toggle--PaddingTop: 0;
   --pf-c-select__toggle--PaddingRight: 0;
@@ -288,6 +296,9 @@
   --pf-c-select__toggle-text--Color: var(--pf-c-select__toggle--m-placeholder__toggle-text--Color);
 }
 
+.pf-c-select__toggle-arrow {
+  color: var(--pf-c-select__toggle-arrow--Color, inherit);
+}
 * + .pf-c-select__toggle-arrow {
   margin-right: var(--pf-c-select__toggle-arrow--MarginRight);
   margin-left: var(--pf-c-select__toggle-arrow--MarginLeft);

package/components/Select/select.scss

@@ -95,6 +95,8 @@
   --pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
+  --pf-c-select--m-plain__toggle-arrow--Color: var(--pf-global--Color--200);
+  --pf-c-select--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100);
 
   // Toggle button
   --pf-c-select__toggle-clear--PaddingRight: var(--pf-global--spacer--sm);
@@ -323,9 +325,19 @@
   }
 
   &.pf-m-plain {
+    --pf-c-select__toggle-arrow--Color: var(--pf-c-select--m-plain__toggle-arrow--Color);
+
     &::before {
       border-color: var(--pf-c-select__toggle--m-plain--before--BorderColor);
     }
+
+    &:hover,
+    &:active,
+    &.pf-m-active,
+    &:focus,
+    .pf-c-select.pf-m-expanded > & {
+      --pf-c-select--m-plain__toggle-arrow--Color: var(--pf-c-select--m-plain--hover__toggle-arrow--Color);
+    }
   }
 
   &.pf-m-typeahead {
@@ -363,6 +375,8 @@
 }
 
 .pf-c-select__toggle-arrow {
+  color: var(--pf-c-select__toggle-arrow--Color, inherit);
+
   * + & {
     margin-right: var(--pf-c-select__toggle-arrow--MarginRight);
     margin-left: var(--pf-c-select__toggle-arrow--MarginLeft);

package/components/Sidebar/sidebar.css

@@ -21,6 +21,7 @@
   --pf-c-sidebar--m-split__panel--Position: static;
   --pf-c-sidebar--m-split__panel--Top: auto;
   --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
+  --pf-c-sidebar__panel--FlexBasis--base: auto;
   --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
   --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
   --pf-c-sidebar__panel--Top: 0;

package/components/Sidebar/sidebar.scss

@@ -37,6 +37,7 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
 
   // Panel
+  --pf-c-sidebar__panel--FlexBasis--base: auto;
   --pf-c-sidebar__panel--BoxShadow--base: #{0 pf-size-prem(4px) pf-size-prem(4px) pf-size-prem(-4px) rgba($pf-color-black-1000, .16)}; // modified so the shadow is only visible on the bottom of the element
   --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
   --pf-c-sidebar__panel--Top: 0;

package/components/Table/table-scrollable.css

@@ -7,6 +7,8 @@
   --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
   --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
 }
 .pf-c-table .pf-c-table__sticky-column {

package/components/Table/table-scrollable.scss

@@ -7,6 +7,8 @@
   --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
   --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
 
   .pf-c-table__sticky-column {

package/components/Table/table.css

@@ -382,7 +382,7 @@
   border-right: var(--pf-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-c-table--cell--m-border-right--before--BorderRightColor);
 }
 .pf-c-table tr > *.pf-m-border-left::before {
-  border-left: var(--pf-c-table--cell--m-border-right--before--BorderLeftWidth) solid var(--pf-c-table--cell--m-border-left--before--BorderLeftColor);
+  border-left: var(--pf-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-c-table--cell--m-border-left--before--BorderLeftColor);
 }
 .pf-c-table caption {
   padding-top: var(--pf-c-table-caption--PaddingTop);

package/components/Table/table.scss

@@ -440,7 +440,7 @@
     }
 
     &.pf-m-border-left::before {
-      border-left: var(--pf-c-table--cell--m-border-right--before--BorderLeftWidth) solid var(--pf-c-table--cell--m-border-left--before--BorderLeftColor);
+      border-left: var(--pf-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-c-table--cell--m-border-left--before--BorderLeftColor);
     }
   }
 

package/components/Toolbar/toolbar.css

@@ -68,6 +68,7 @@
   --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-toolbar__item--Display: block;
+  --pf-c-toolbar__item--MinWidth--base: auto;
   --pf-c-toolbar__group--Display: flex;
   --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
@@ -324,6 +325,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

@@ -12,6 +12,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 
   // Item
   --pf-c-toolbar__item--Display: block;
+  --pf-c-toolbar__item--MinWidth--base: auto;
 
   // Group
   --pf-c-toolbar__group--Display: flex;
@@ -322,6 +323,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

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -33,8 +33,8 @@ cssPrefix: pf-c-text-input-group
         class="pf-c-text-input-group__text-input"
         type="text"
         value="Disabled"
-        aria-label="Disabled text input group example input"
         disabled
+        aria-label="Type to filter"
       />
     </span>
   </div>
@@ -490,3 +490,28 @@ cssPrefix: pf-c-text-input-group
 </div>
 
 ```
+
+### Autocomplete last option hint
+
+```html
+<div class="pf-c-text-input-group">
+  <div class="pf-c-text-input-group__main">
+    <span class="pf-c-text-input-group__text">
+      <input
+        class="pf-c-text-input-group__text-input pf-m-hint"
+        type="text"
+        value="appleseed"
+        disabled
+        aria-hidden="true"
+      />
+      <input
+        class="pf-c-text-input-group__text-input"
+        type="text"
+        value="apples"
+        aria-label="Type to filter"
+      />
+    </span>
+  </div>
+</div>
+
+```

package/docs/components/Toolbar/examples/Toolbar.md

@@ -4100,6 +4100,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-m-align-left{-on-[breakpoint]}`  | `.pf-c-toolbar > *`                                                                                       | Modifies toolbar element to align left, at optional breakpoint.                                                                                                                                                                             |
 | `.pf-m-label`                         | `.pf-c-toolbar__item`                                                                                     | Modifies toolbar item to label.                                                                                                                                                                                                             |
 | `.pf-m-chip-container`                | `.pf-c-toolbar__content`, `.pf-c-toolbar__group`                                                          | Modifies the toolbar element for applied filters layout.                                                                                                                                                                                    |
+| `.pf-m-overflow-container`            | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`                                                             | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation.                                                                                                                               |
 | `.pf-m-expanded`                      | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle`                                              | Modifies the component for the expanded state.                                                                                                                                                                                              |
 | `.pf-m-wrap`                          | `.pf-c-toolbar`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group`                                 | Modifies the toolbar element to wrap.                                                                                                                                                                                                       |
 | `.pf-m-nowrap`                        | `.pf-c-toolbar`, `.pf-c-toolbar__group`                                                                   | Modifies the toolbar element to nowrap.                                                                                                                                                                                                     |

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -1,6 +1,5 @@
 ---
 id: 'Back to top'
-beta: true
 section: components
 cssPrefix: pf-d-back-to-top
 ---## Examples

package/docs/demos/JumpLinks/examples/JumpLinks.md

@@ -1,6 +1,5 @@
 ---
 id: Jump links
-beta: true
 section: components
 ---## Examples