@patternfly/patternfly 4.171.1 → 4.175.0

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

@@ -42,7 +42,7 @@ cssPrefix: pf-c-text-input-group
 
 ```
 
-### Utilities and icon
+### Utilities and icon with placeholder text
 
 ```html
 <div class="pf-c-text-input-group">
@@ -56,6 +56,7 @@ cssPrefix: pf-c-text-input-group
         type="text"
         value
         aria-label="Type to filter"
+        placeholder="placeholder"
       />
     </span>
   </div>

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.175.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;
@@ -25174,6 +25185,8 @@ svg.pf-c-spinner.pf-m-xl {
   --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);
@@ -25234,6 +25247,11 @@ svg.pf-c-spinner.pf-m-xl {
 .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;
@@ -26725,6 +26743,7 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__text-input--MinWidth: 12ch;
   --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
+  --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
   --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
   --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -26831,6 +26850,9 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-text-input-group__text-input.pf-m-hint {
   color: var(--pf-c-text-input-group__text-input--m-hint--Color);
 }
+.pf-c-text-input-group__text-input::placeholder {
+  color: var(--pf-c-text-input-group--placeholder--Color);
+}
 
 .pf-c-text-input-group__utilities {
   display: flex;
@@ -27268,7 +27290,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 +27300,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;
@@ -25296,6 +25307,8 @@ svg.pf-c-spinner.pf-m-xl {
   --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);
@@ -25356,6 +25369,11 @@ svg.pf-c-spinner.pf-m-xl {
 .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;
@@ -26847,6 +26865,7 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__text-input--MinWidth: 12ch;
   --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
+  --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
   --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
   --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -26953,6 +26972,9 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-text-input-group__text-input.pf-m-hint {
   color: var(--pf-c-text-input-group__text-input--m-hint--Color);
 }
+.pf-c-text-input-group__text-input::placeholder {
+  color: var(--pf-c-text-input-group--placeholder--Color);
+}
 
 .pf-c-text-input-group__utilities {
   display: flex;
@@ -27390,7 +27412,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 +27422,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,