@patternfly/patternfly 5.4.0-prerelease.2 → 5.4.0-prerelease.4

package/docs/components/Table/examples/Table.md

@@ -24712,96 +24712,523 @@ There are a few ways this can be handled:
 ```html
 <div class="pf-v5-c-scroll-inner-wrapper">
   <table
-    class="pf-v5-c-table pf-m-grid-md pf-m-sticky-header"
+    class="pf-v5-c-table pf-m-sticky-header"
     role="grid"
-    aria-label="This is a table with sticky header cells"
-    id="table-sticky-header"
+    aria-label="This is a scrollable table"
+    id="sticky-header-example"
   >
     <thead class="pf-v5-c-table__thead">
       <tr class="pf-v5-c-table__tr" role="row">
+        <th
+          class="pf-v5-c-table__th pf-v5-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          data-label="Example th"
+          scope="col"
+        >
+          <button class="pf-v5-c-table__button">
+            <div class="pf-v5-c-table__button-content">
+              <span class="pf-v5-c-table__text">Fact</span>
+              <span class="pf-v5-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-v5-c-table__th pf-v5-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          data-label="Example th"
+          scope="col"
+        >
+          <button class="pf-v5-c-table__button">
+            <div class="pf-v5-c-table__button-content">
+              <span class="pf-v5-c-table__text">State</span>
+              <span class="pf-v5-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 3</th>
+        <th
+          class="pf-v5-c-table__th"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 4</th>
+        <th
+          class="pf-v5-c-table__th"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 5</th>
         <th
           class="pf-v5-c-table__th"
           role="columnheader"
+          data-label="Example th"
           scope="col"
-        >Repositories</th>
-        <th class="pf-v5-c-table__th" role="columnheader" scope="col">Branches</th>
+        >Header 6</th>
+        <th
+          class="pf-v5-c-table__th"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 7</th>
         <th
           class="pf-v5-c-table__th"
           role="columnheader"
+          data-label="Example th"
           scope="col"
-        >Pull requests</th>
-        <th class="pf-v5-c-table__th" role="columnheader" scope="col">Workspaces</th>
+        >Header 8</th>
+
         <th
           class="pf-v5-c-table__th"
           role="columnheader"
+          data-label="Example th"
           scope="col"
-        >Last commit</th>
+        >Header 9</th>
       </tr>
     </thead>
 
     <tbody class="pf-v5-c-table__tbody" role="rowgroup">
       <tr class="pf-v5-c-table__tr" role="row">
         <td
-          class="pf-v5-c-table__td"
+          class="pf-v5-c-table__td pf-m-nowrap"
           role="cell"
-          data-label="Repository name"
-        >Repository 1</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td>
+          data-label="Example td"
+        >Fact 1</td>
         <td
-          class="pf-v5-c-table__td"
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >State 1</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-8</td>
+
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
           role="cell"
-          data-label="Last commit"
-        >2 days ago</td>
+          data-label="Example td"
+        >Test cell 1-9</td>
       </tr>
+      <tr class="pf-v5-c-table__tr" role="row">
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Fact 2</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >State 2</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-8</td>
 
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-9</td>
+      </tr>
       <tr class="pf-v5-c-table__tr" role="row">
         <td
-          class="pf-v5-c-table__td"
+          class="pf-v5-c-table__td pf-m-nowrap"
           role="cell"
-          data-label="Repository name"
-        >Repository 2</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td>
+          data-label="Example td"
+        >Fact 3</td>
         <td
-          class="pf-v5-c-table__td"
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >State 3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-8</td>
+
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-9</td>
+      </tr>
+      <tr class="pf-v5-c-table__tr" role="row">
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Fact 4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >State 4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-8</td>
+
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
           role="cell"
-          data-label="Last commit"
-        >2 days ago</td>
+          data-label="Example td"
+        >Test cell 4-9</td>
       </tr>
+      <tr class="pf-v5-c-table__tr" role="row">
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Fact 5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >State 5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-8</td>
 
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-9</td>
+      </tr>
       <tr class="pf-v5-c-table__tr" role="row">
         <td
-          class="pf-v5-c-table__td"
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Fact 6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
           role="cell"
-          data-label="Repository name"
-        >Repository 3</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td>
+          data-label="Example td"
+        >State 6</td>
         <td
-          class="pf-v5-c-table__td"
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-8</td>
+
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
           role="cell"
-          data-label="Last commit"
-        >2 days ago</td>
+          data-label="Example td"
+        >Test cell 6-9</td>
       </tr>
+      <tr class="pf-v5-c-table__tr" role="row">
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Fact 7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >State 7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-8</td>
 
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-9</td>
+      </tr>
       <tr class="pf-v5-c-table__tr" role="row">
         <td
-          class="pf-v5-c-table__td"
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Fact 8</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
           role="cell"
-          data-label="Repository name"
-        >Repository 4</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Branches">10</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests">25</td>
-        <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces">5</td>
+          data-label="Example td"
+        >State 8</td>
         <td
-          class="pf-v5-c-table__td"
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
           role="cell"
-          data-label="Last commit"
-        >2 days ago</td>
+          data-label="Example td"
+        >Test cell 8-6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-8</td>
+
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-9</td>
+      </tr>
+      <tr class="pf-v5-c-table__tr" role="row">
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Fact 9</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >State 9</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-3</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-4</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-5</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-6</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-7</td>
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-8</td>
+
+        <td
+          class="pf-v5-c-table__td pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-9</td>
       </tr>
     </tbody>
   </table>

package/docs/demos/PasswordStrength/examples/PasswordStrength.md

@@ -13,14 +13,7 @@ section: components
           class="pf-v5-c-form__label"
           for="password-strength-demo--initial-password"
         >
-          <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-          class="pf-v5-c-form__group-label-help"
-          aria-label="More information for password field"
-          aria-describedby="password-strength-demo--initial-password"
-          role="button"
-          type="button"
-          tabindex="0"
-        ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+          <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
       </div>
       <div class="pf-v5-c-form__group-label-info"></div>
     </div>
@@ -99,14 +92,7 @@ section: components
           class="pf-v5-c-form__label"
           for="password-strength-demo--invalid-password"
         >
-          <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-          class="pf-v5-c-form__group-label-help"
-          aria-label="More information for password field"
-          aria-describedby="password-strength-demo--invalid-password"
-          role="button"
-          type="button"
-          tabindex="0"
-        ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+          <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
       </div>
       <div class="pf-v5-c-form__group-label-info"></div>
     </div>
@@ -179,14 +165,7 @@ section: components
           class="pf-v5-c-form__label"
           for="password-strength-demo--weak-password"
         >
-          <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-          class="pf-v5-c-form__group-label-help"
-          aria-label="More information for password field"
-          aria-describedby="password-strength-demo--weak-password"
-          role="button"
-          type="button"
-          tabindex="0"
-        ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+          <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
       </div>
       <div class="pf-v5-c-form__group-label-info">
         <div class="pf-v5-c-helper-text">
@@ -268,14 +247,7 @@ section: components
           class="pf-v5-c-form__label"
           for="password-strength-demo--strong-password"
         >
-          <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-          class="pf-v5-c-form__group-label-help"
-          aria-label="More information for password field"
-          aria-describedby="password-strength-demo--strong-password"
-          role="button"
-          type="button"
-          tabindex="0"
-        ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+          <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
       </div>
       <div class="pf-v5-c-form__group-label-info">
         <div class="pf-v5-c-helper-text">

package/docs/utilities/Display/examples/Display.css

@@ -1,11 +1,4 @@
-.ws-core-u-display .pf-v5-u-display-inline-block,
-.ws-core-u-display .pf-v5-u-display-block,
-.ws-core-u-display .pf-v5-u-display-flex,
-.ws-core-u-display .pf-v5-u-display-inline-flex,
-.ws-core-u-display .pf-v5-u-display-grid,
-.ws-core-u-display .pf-v5-u-display-inline,
-.ws-core-u-display .pf-v5-u-display-table,
-.ws-core-u-display .pf-v5-u-display-table-cell {
+.ws-core-u-display [class*="pf-v5-u-display-"] {
   padding: .5rem !important;
   border: 2px dashed #393f44;
 }