@patternfly/patternfly 4.171.1 → 4.172.0

package/components/NumberInput/number-input.css

@@ -1,7 +1,15 @@
+.pf-c-number-input .pf-c-form-control {
+  appearance: textfield;
+}
+.pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
 .pf-c-number-input {
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
+  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-number-input--c-form-control--width-chars: 4;
   --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
   display: inline-flex;
@@ -11,11 +19,6 @@
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);
   text-align: right;
-  -moz-appearance: textfield;
-}
-.pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
 }
 
 .pf-c-input-group + .pf-c-number-input__unit,

package/components/NumberInput/number-input.scss

@@ -6,7 +6,7 @@
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
 
   // form control
-  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2); // element's padding
+  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2); // element's padding
   --pf-c-number-input--c-form-control--width-chars: 4;
   --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
 
@@ -18,15 +18,7 @@
     width: var(--pf-c-number-input--c-form-control--Width);
     text-align: right;
 
-    // disable default number increment arrows
-    // stylelint-disable
-    -moz-appearance: textfield;
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    // stylelint-enable
+    @extend %pf-remove-num-arrows;
   }
 }
 

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

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

@@ -208,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/docs/components/Table/examples/Table.md

@@ -23260,7 +23260,7 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
 ```html
 <table
-  class="pf-c-table pf-m-grid-md pf-m-striped"
+  class="pf-c-table pf-m-grid-md"
   role="grid"
   aria-label="This is a striped tr example"
   id="table-striped-tr"

package/docs/demos/DataList/examples/DataList.md

@@ -2633,9 +2633,8 @@ wrapperTag: div
                         role="columnheader"
                         scope="col"
                       >Icons</th>
-                      <th role="columnheader"></th>
-
-                      <th role="columnheader"></th>
+                      <td></td>
+                      <td></td>
                     </tr>
                   </thead>
                   <tbody role="rowgroup">

package/docs/demos/Table/examples/Table.md

@@ -4357,21 +4357,14 @@ wrapperTag: div
         >
           <thead>
             <tr role="row">
-              <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="check-all"
-                  aria-label="Select all rows"
-                />
-              </td>
+              <td></td>
               <th role="columnheader" scope="col">Repositories</th>
               <th role="columnheader" scope="col">Branches</th>
               <th role="columnheader" scope="col">Pull requests</th>
               <th role="columnheader" scope="col">Workspaces</th>
               <th role="columnheader" scope="col">Last commit</th>
-              <td role="cell"></td>
-
-              <td role="cell"></td>
+              <td></td>
+              <td></td>
             </tr>
           </thead>
 
@@ -5612,13 +5605,7 @@ wrapperTag: div
         >
           <thead>
             <tr role="row">
-              <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="check-all"
-                  aria-label="Select all rows"
-                />
-              </td>
+              <td></td>
               <th
                 class="pf-c-table__sort pf-m-selected"
                 role="columnheader"
@@ -5694,8 +5681,8 @@ wrapperTag: div
                   </div>
                 </button>
               </th>
-              <td role="cell"></td>
-              <td role="cell"></td>
+              <td></td>
+              <td></td>
             </tr>
           </thead>
 
@@ -7008,13 +6995,7 @@ wrapperTag: div
                 </button>
               </td>
 
-              <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="check-all"
-                  aria-label="Select all rows"
-                />
-              </td>
+              <td></td>
               <th
                 class="pf-m-width-30"
                 role="columnheader"
@@ -7024,9 +7005,8 @@ wrapperTag: div
               <th role="columnheader" scope="col">Pull requests</th>
               <th role="columnheader" scope="col">Work spaces</th>
               <th role="columnheader" scope="col">Last commit</th>
-              <td role="cell"></td>
-
-              <td role="cell"></td>
+              <td></td>
+              <td></td>
             </tr>
           </thead>
 
@@ -8519,22 +8499,15 @@ wrapperTag: div
         >
           <thead>
             <tr role="row">
-              <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="check-all"
-                  aria-label="Select all rows"
-                />
-              </td>
+              <td></td>
               <th role="columnheader" scope="col">Contributor</th>
               <th role="columnheader" scope="col">Position</th>
               <th role="columnheader" scope="col">Location</th>
               <th role="columnheader" scope="col">Last seen</th>
               <th role="columnheader" scope="col">Numbers</th>
               <th class="pf-c-table__icon" role="columnheader" scope="col">Icons</th>
-              <th role="columnheader"></th>
-
-              <th role="columnheader"></th>
+              <td></td>
+              <td></td>
             </tr>
           </thead>
 
@@ -14857,21 +14830,14 @@ wrapperTag: div
         >
           <thead>
             <tr role="row">
-              <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="check-all"
-                  aria-label="Select all rows"
-                />
-              </td>
+              <td></td>
               <th role="columnheader" scope="col">Repositories</th>
               <th role="columnheader" scope="col">Branches</th>
               <th role="columnheader" scope="col">Pull requests</th>
               <th role="columnheader" scope="col">Workspaces</th>
               <th role="columnheader" scope="col">Last commit</th>
-              <td role="cell"></td>
-
-              <td role="cell"></td>
+              <td></td>
+              <td></td>
             </tr>
           </thead>
 
@@ -16175,21 +16141,14 @@ wrapperTag: div
         >
           <thead>
             <tr role="row">
-              <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="check-all"
-                  aria-label="Select all rows"
-                />
-              </td>
+              <td></td>
               <th role="columnheader" scope="col">Repositories</th>
               <th role="columnheader" scope="col">Branches</th>
               <th role="columnheader" scope="col">Pull requests</th>
               <th role="columnheader" scope="col">Workspaces</th>
               <th role="columnheader" scope="col">Last commit</th>
-              <td role="cell"></td>
-
-              <td role="cell"></td>
+              <td></td>
+              <td></td>
             </tr>
           </thead>
 
@@ -17580,21 +17539,14 @@ wrapperTag: div
         >
           <thead>
             <tr role="row">
-              <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="check-all"
-                  aria-label="Select all rows"
-                />
-              </td>
+              <td></td>
               <th role="columnheader" scope="col">Repositories</th>
               <th role="columnheader" scope="col">Branches</th>
               <th role="columnheader" scope="col">Pull requests</th>
               <th role="columnheader" scope="col">Workspaces</th>
               <th role="columnheader" scope="col">Last commit</th>
-              <td role="cell"></td>
-
-              <td role="cell"></td>
+              <td></td>
+              <td></td>
             </tr>
           </thead>
 

package/docs/demos/Toolbar/examples/Toolbar.md

@@ -2246,21 +2246,14 @@ section: components
         >
           <thead>
             <tr role="row">
-              <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="check-all"
-                  aria-label="Select all rows"
-                />
-              </td>
+              <td></td>
               <th role="columnheader" scope="col">Repositories</th>
               <th role="columnheader" scope="col">Branches</th>
               <th role="columnheader" scope="col">Pull requests</th>
               <th role="columnheader" scope="col">Workspaces</th>
               <th role="columnheader" scope="col">Last commit</th>
-              <td role="cell"></td>
-
-              <td role="cell"></td>
+              <td></td>
+              <td></td>
             </tr>
           </thead>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.171.1",
+  "version": "4.172.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-reset.css

@@ -104,6 +104,14 @@
   }
 }
 
+.pf-c-number-input .pf-c-form-control, .pf-c-pagination__nav-page-select .pf-c-form-control {
+  appearance: textfield;
+}
+.pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
 :root {
   --pf-global--palette--black-100: #fafafa;
   --pf-global--palette--black-150: #f5f5f5;
@@ -19560,7 +19568,7 @@ ul.pf-c-list {
   --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;
@@ -20443,6 +20451,9 @@ ul.pf-c-list {
 .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;
@@ -27268,7 +27279,7 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-number-input {
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
+  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-number-input--c-form-control--width-chars: 4;
   --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
   display: inline-flex;
@@ -27278,11 +27289,6 @@ svg.pf-c-spinner.pf-m-xl {
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);
   text-align: right;
-  -moz-appearance: textfield;
-}
-.pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
 }
 
 .pf-c-input-group + .pf-c-number-input__unit,

package/patternfly.css

@@ -104,6 +104,14 @@
   }
 }
 
+.pf-c-number-input .pf-c-form-control, .pf-c-pagination__nav-page-select .pf-c-form-control {
+  appearance: textfield;
+}
+.pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
 :root {
   --pf-global--palette--black-100: #fafafa;
   --pf-global--palette--black-150: #f5f5f5;
@@ -19682,7 +19690,7 @@ ul.pf-c-list {
   --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;
@@ -20565,6 +20573,9 @@ ul.pf-c-list {
 .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;
@@ -27390,7 +27401,7 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-number-input {
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
+  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
   --pf-c-number-input--c-form-control--width-chars: 4;
   --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
   display: inline-flex;
@@ -27400,11 +27411,6 @@ svg.pf-c-spinner.pf-m-xl {
   display: inline-flex;
   width: var(--pf-c-number-input--c-form-control--Width);
   text-align: right;
-  -moz-appearance: textfield;
-}
-.pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
 }
 
 .pf-c-input-group + .pf-c-number-input__unit,