@patternfly/patternfly 4.170.0 → 4.173.0

package/components/OptionsMenu/options-menu.scss

@@ -31,6 +31,8 @@
   --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
+  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
 
   // Text toggle button
   --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
@@ -153,15 +155,19 @@
     }
   }
 
-  &.pf-m-plain:not(.pf-m-text) {
-    --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
-    --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
+  &.pf-m-plain {
+    --pf-c-options-menu__toggle-icon--Color: var(--pf-c-options-menu--m-plain__toggle-icon--Color);
 
-    display: inline-block;
-    color: var(--pf-c-options-menu__toggle--m-plain--Color);
+    &:not(.pf-m-text) {
+      --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
+      --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
 
-    .pf-c-options-menu__toggle-button-icon {
-      line-height: var(--pf-c-options-menu__toggle--LineHeight);
+      display: inline-block;
+      color: var(--pf-c-options-menu__toggle--m-plain--Color);
+
+      .pf-c-options-menu__toggle-button-icon {
+        line-height: var(--pf-c-options-menu__toggle--LineHeight);
+      }
     }
 
     &:hover,
@@ -170,6 +176,7 @@
     &:focus,
     .pf-c-options-menu.pf-m-expanded > & {
       --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
+      --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
     }
 
     &.pf-m-disabled,
@@ -207,6 +214,11 @@
   @include pf-text-overflow;
 }
 
+.pf-c-options-menu__toggle-icon,
+.pf-c-options-menu__toggle-button-icon {
+  color: var(--pf-c-options-menu__toggle-icon--Color, inherit);
+}
+
 .pf-c-options-menu__toggle-icon {
   margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
   margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);

package/components/Pagination/pagination.css

@@ -1,3 +1,11 @@
+.pf-c-pagination__nav-page-select .pf-c-form-control {
+  appearance: textfield;
+}
+.pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-inner-spin-button, .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
 .pf-c-pagination {
   --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
   --pf-c-pagination--m-bottom--child--MarginRight: 0;
@@ -26,7 +34,7 @@
   --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
+  --pf-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
   --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
   --pf-c-pagination__total-items--Display: block;

package/components/Pagination/pagination.scss

@@ -37,7 +37,7 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
   --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
+  --pf-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
   --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
 
@@ -257,6 +257,8 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
 
   .pf-c-form-control {
     width: var(--pf-c-pagination__nav-page-select--c-form-control--Width);
+
+    @extend %pf-remove-num-arrows;
   }
 }
 

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);
@@ -170,6 +172,9 @@
 .pf-c-progress-stepper__step.pf-m-info {
   --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100);
 }
+.pf-c-progress-stepper__step:last-child {
+  --pf-c-progress-stepper__step-main--MarginBottom: 0;
+}
 
 .pf-c-progress-stepper__step-connector {
   position: relative;

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;
@@ -206,6 +208,10 @@
   &.pf-m-info {
     --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100);
   }
+
+  &:last-child {
+    --pf-c-progress-stepper__step-main--MarginBottom: 0;
+  }
 }
 
 // The step icon wrapper provides a container on which to use the before for the line connecting the steps

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-tree-view.css

@@ -3,6 +3,8 @@
   --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
   --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
   --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
+  --pf-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-table__tree-view-icon--MinWidth: var(--pf-global--FontSize--md);
   --pf-c-table__tree-view-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -63,6 +65,11 @@
 .pf-c-table__tree-view-main > .pf-c-table__check {
   margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
 }
+.pf-c-table__tree-view-main > .pf-c-table__check label {
+  padding-right: var(--pf-c-table__tree-view-main--c-table__check--PaddingRight);
+  padding-left: var(--pf-c-table__tree-view-main--c-table__check--PaddingLeft);
+  margin: 0 calc(var(--pf-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
+}
 
 .pf-c-table__tree-view-text {
   display: flex;

package/components/Table/table-tree-view.scss

@@ -9,6 +9,8 @@ $pf-c-tree-view--MaxDepth: 10;
   --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
 
   // check
+  --pf-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
 
   // icon
@@ -61,6 +63,12 @@ $pf-c-tree-view--MaxDepth: 10;
   > .pf-c-table__check {
     margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
   }
+
+  > .pf-c-table__check label {
+    padding-right: var(--pf-c-table__tree-view-main--c-table__check--PaddingRight);
+    padding-left: var(--pf-c-table__tree-view-main--c-table__check--PaddingLeft);
+    margin: 0 calc(var(--pf-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
+  }
 }
 
 .pf-c-table__tree-view-text {

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

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;