@patternfly/patternfly 5.1.0-prerelease.8 → 5.1.0

package/docs/components/Nav/examples/Navigation.md

@@ -2483,6 +2483,104 @@ cssPrefix: pf-v5-c-nav
 
 ```
 
+### Nav link text
+
+When using anything other than a text node for the link text, wrap the link text in an element with `.pf-v5-c-nav__link-text`.
+
+```html isBeta
+<nav class="pf-v5-c-nav" aria-label="Global">
+  <ul class="pf-v5-c-nav__list" role="list">
+    <li class="pf-v5-c-nav__item">
+      <a href="#" class="pf-v5-c-nav__link">
+        <span class="pf-v5-c-nav__link-text">
+          Link 1
+          <i class="fas fa-arrow-right" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
+      <button
+        class="pf-v5-c-nav__link"
+        id="nav-link-text-link2"
+        aria-expanded="true"
+      >
+        <span class="pf-v5-c-nav__link-text">
+          Link 2
+          <small>(small text)</small>
+        </span>
+        <span class="pf-v5-c-nav__toggle">
+          <span class="pf-v5-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-v5-c-nav__subnav"
+        aria-labelledby="nav-link-text-link2"
+      >
+        <ul class="pf-v5-c-nav__list" role="list">
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">
+              <span class="pf-v5-c-nav__link-text">
+                <i class="fas fa-user" aria-hidden="true"></i>
+                Subnav link 1
+              </span>
+            </a>
+          </li>
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">
+              <span class="pf-v5-c-nav__link-text">
+                <i class="fas fa-user" aria-hidden="true"></i>
+                Subnav link 2
+              </span>
+            </a>
+          </li>
+        </ul>
+      </section>
+    </li>
+    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-current">
+      <button
+        class="pf-v5-c-nav__link"
+        id="nav-link-text-link4"
+        aria-expanded="false"
+      >
+        <span class="pf-v5-c-nav__link-text">
+          Link 3
+          <strong>(strong text)</strong>
+        </span>
+        <span class="pf-v5-c-nav__toggle">
+          <span class="pf-v5-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-v5-c-nav__subnav"
+        aria-labelledby="nav-link-text-link4"
+        hidden
+      >
+        <ul class="pf-v5-c-nav__list" role="list">
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
+          </li>
+          <li class="pf-v5-c-nav__item">
+            <a
+              href="#"
+              class="pf-v5-c-nav__link pf-m-current"
+              aria-current="page"
+            >Subnav link 2</a>
+          </li>
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">Subnav link 3</a>
+          </li>
+        </ul>
+      </section>
+    </li>
+  </ul>
+</nav>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2514,6 +2612,7 @@ The navigation system relies on several different sub-components:
 | `.pf-v5-c-nav__list` | `<ul>` | Initiates nav list. |
 | `.pf-v5-c-nav__item` | `<li>` | Initiates nav list item. |
 | `.pf-v5-c-nav__link` | `<a>` | Initiates nav list link. |
+| `.pf-v5-c-nav__link-text` | `<span>` | Initiates nav list link text. |
 | `.pf-v5-c-nav__section` | `<section>` | Initiates a nav section element. |
 | `.pf-v5-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
 | `.pf-v5-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |

package/docs/components/OptionsMenu/deprecated/options-menu.md

@@ -314,7 +314,10 @@ deprecated: true
     disabled
     aria-label="Sort by"
   >
-    <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+    <i
+      class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+      aria-hidden="true"
+    ></i>
   </button>
   <ul
     class="pf-v5-c-options-menu__menu"
@@ -360,7 +363,10 @@ deprecated: true
     aria-expanded="false"
     aria-label="Sort by"
   >
-    <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+    <i
+      class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+      aria-hidden="true"
+    ></i>
   </button>
   <ul
     class="pf-v5-c-options-menu__menu"
@@ -406,7 +412,10 @@ deprecated: true
     aria-expanded="true"
     aria-label="Sort by"
   >
-    <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+    <i
+      class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+      aria-hidden="true"
+    ></i>
   </button>
   <ul
     class="pf-v5-c-options-menu__menu"

package/docs/components/Popover/examples/Popover.css

@@ -1,10 +1,5 @@
 .ws-core-c-popover .ws-preview-html {
-  position: relative;
- }
-
- .ws-core-c-popover .pf-v5-c-popover {
-   position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-   transform: translate(-50%, -50%);
- }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -27051,8 +27051,8 @@ For sticky columns to function correctly, the parent table's width must be contr
 | `.pf-v5-c-scroll-outer-wrapper` | `<div>` | Initiates a table container sticky columns outer wrapper. |
 | `.pf-v5-c-scroll-inner-wrapper` | `<div>` | Initiates a table container sticky columns inner wrapper. |
 | `.pf-v5-c-table__sticky-cell` | `<th>`, `<td>` | Initiates a sticky table cell. |
-| `.pf-m-right` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, right-hand table cell. |
-| `.pf-m-left` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, left-hand table cell. |
+| `.pf-m-right`, `.pf-m-inline-end` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, right-hand (in LTR) or left-hand (in RTL) table cell. |
+| `.pf-m-left`, `.pf-m-inline-start` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, left-hand (in LTR) or right-hand (in RTL) table cell. |
 
 ## Nested column headers
 

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

@@ -3416,22 +3416,26 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
           </div>
 
           <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
-            <button
-              class="pf-v5-c-button pf-m-plain pf-m-disabled"
-              type="button"
-              aria-label="Go to first page"
-              aria-disabled="true"
-            >
-              <i class="fas fa-angle-double-left" aria-hidden="true"></i>
-            </button>
-            <button
-              class="pf-v5-c-button pf-m-plain pf-m-disabled"
-              type="button"
-              aria-label="Go to previous page"
-              aria-disabled="true"
-            >
-              <i class="fas fa-angle-left" aria-hidden="true"></i>
-            </button>
+            <div class="pf-v5-c-pagination__nav-control pf-m-first">
+              <button
+                class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                type="button"
+                aria-label="Go to first page"
+                aria-disabled="true"
+              >
+                <i class="fas fa-angle-double-left" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="pf-v5-c-pagination__nav-control pf-m-prev">
+              <button
+                class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                type="button"
+                aria-label="Go to previous page"
+                aria-disabled="true"
+              >
+                <i class="fas fa-angle-left" aria-hidden="true"></i>
+              </button>
+            </div>
 
             <div
               class="pf-v5-c-pagination__nav-page-select"
@@ -3448,20 +3452,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               </span>
               <span aria-hidden="true">of 4</span>
             </div>
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Go to next page"
-            >
-              <i class="fas fa-angle-right" aria-hidden="true"></i>
-            </button>
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Go to last page"
-            >
-              <i class="fas fa-angle-double-right" aria-hidden="true"></i>
-            </button>
+            <div class="pf-v5-c-pagination__nav-control pf-m-next">
+              <button
+                class="pf-v5-c-button pf-m-plain"
+                type="button"
+                aria-label="Go to next page"
+              >
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="pf-v5-c-pagination__nav-control pf-m-last">
+              <button
+                class="pf-v5-c-button pf-m-plain"
+                type="button"
+                aria-label="Go to last page"
+              >
+                <i class="fas fa-angle-double-right" aria-hidden="true"></i>
+              </button>
+            </div>
           </nav>
         </div>
       </div>
@@ -3959,22 +3967,26 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
           </div>
 
           <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
-            <button
-              class="pf-v5-c-button pf-m-plain pf-m-disabled"
-              type="button"
-              aria-label="Go to first page"
-              aria-disabled="true"
-            >
-              <i class="fas fa-angle-double-left" aria-hidden="true"></i>
-            </button>
-            <button
-              class="pf-v5-c-button pf-m-plain pf-m-disabled"
-              type="button"
-              aria-label="Go to previous page"
-              aria-disabled="true"
-            >
-              <i class="fas fa-angle-left" aria-hidden="true"></i>
-            </button>
+            <div class="pf-v5-c-pagination__nav-control pf-m-first">
+              <button
+                class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                type="button"
+                aria-label="Go to first page"
+                aria-disabled="true"
+              >
+                <i class="fas fa-angle-double-left" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="pf-v5-c-pagination__nav-control pf-m-prev">
+              <button
+                class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                type="button"
+                aria-label="Go to previous page"
+                aria-disabled="true"
+              >
+                <i class="fas fa-angle-left" aria-hidden="true"></i>
+              </button>
+            </div>
 
             <div
               class="pf-v5-c-pagination__nav-page-select"
@@ -3991,20 +4003,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               </span>
               <span aria-hidden="true">of 4</span>
             </div>
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Go to next page"
-            >
-              <i class="fas fa-angle-right" aria-hidden="true"></i>
-            </button>
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Go to last page"
-            >
-              <i class="fas fa-angle-double-right" aria-hidden="true"></i>
-            </button>
+            <div class="pf-v5-c-pagination__nav-control pf-m-next">
+              <button
+                class="pf-v5-c-button pf-m-plain"
+                type="button"
+                aria-label="Go to next page"
+              >
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="pf-v5-c-pagination__nav-control pf-m-last">
+              <button
+                class="pf-v5-c-button pf-m-plain"
+                type="button"
+                aria-label="Go to last page"
+              >
+                <i class="fas fa-angle-double-right" aria-hidden="true"></i>
+              </button>
+            </div>
           </nav>
         </div>
       </div>

package/docs/components/Tooltip/examples/Tooltip.css

@@ -0,0 +1,4 @@
+/* adds padding to full page examples so arrows are visible */
+.ws-core-c-tooltip:not(.ws-preview) {
+  padding: var(--pf-v5-global--spacer--md);
+}

package/docs/components/Tooltip/examples/Tooltip.md

@@ -2,7 +2,9 @@
 id: Tooltip
 section: components
 cssPrefix: pf-v5-c-tooltip
----## Examples
+---import "./Tooltip.css"
+
+## Examples
 
 ### Top
 

package/docs/components/Truncate/examples/Truncate.md

@@ -30,8 +30,8 @@ The truncate component contains two child elements, `.pf-v5-c-truncate__start` a
   <span class="pf-v5-c-truncate">
     <span
       class="pf-v5-c-truncate__start"
-    >redhat_logo_black_and_white_reversed_simple_with_fedora_con</span>
-    <span class="pf-v5-c-truncate__end">tainer.zip</span>
+    >Vestibulum interdum risus et enim faucibus,&nbsp;</span>
+    <span class="pf-v5-c-truncate__end">sit amet molestie est accumsan.</span>
   </span>
 </div>
 

package/docs/demos/Card/examples/Card.md

@@ -248,7 +248,7 @@ wrapperTag: div
                 <span class="pf-v5-c-label__text">Set up your cluster</span>
               </span>
             </span>
-            <p>Continue setting up your cluster to access all you cain in the Console</p>
+            <p>Continue setting up your cluster to access all you can in the Console</p>
             <ul class="pf-v5-c-list pf-m-plain" role="list">
               <li>
                 <a href="#">Add identity provider</a>
@@ -266,7 +266,11 @@ wrapperTag: div
             <span
               class="pf-v5-c-button__icon pf-m-end"
             >
-              <i class="fas fa-arrow-right" aria-hidden="true"></i>
+              <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
+                <span class="pf-v5-c-icon__content">
+                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
+                </span>
+              </span>
             </span>
           </a>
         </div>
@@ -297,7 +301,11 @@ wrapperTag: div
           <a class="pf-v5-c-button pf-m-link pf-m-inline" href="#">
             View all guided tours
             <span class="pf-v5-c-button__icon pf-m-end">
-              <i class="fas fa-arrow-right" aria-hidden="true"></i>
+              <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
+                <span class="pf-v5-c-icon__content">
+                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
+                </span>
+              </span>
             </span>
           </a>
         </div>
@@ -331,7 +339,11 @@ wrapperTag: div
           <a class="pf-v5-c-button pf-m-link pf-m-inline" href="#">
             View all quick starts
             <span class="pf-v5-c-button__icon pf-m-end">
-              <i class="fas fa-arrow-right" aria-hidden="true"></i>
+              <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
+                <span class="pf-v5-c-icon__content">
+                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
+                </span>
+              </span>
             </span>
           </a>
         </div>
@@ -370,7 +382,11 @@ wrapperTag: div
             <span
               class="pf-v5-c-button__icon pf-m-end"
             >
-              <i class="fas fa-arrow-right" aria-hidden="true"></i>
+              <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
+                <span class="pf-v5-c-icon__content">
+                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
+                </span>
+              </span>
             </span>
           </a>
         </div>
@@ -387,8 +403,8 @@ wrapperTag: div
 <div class="pf-v5-c-card pf-m-flat" id="card-demo-horizontal-split-example">
   <div class="pf-v5-l-grid pf-m-all-6-col-on-md">
     <div
-      class="pf-v5-l-grid__item pf-d-card__media-item"
-      style="min-height: 200px; background: center / cover url('/assets/images/pfbg_992@2x.jpg'); "
+      class="pf-v5-l-grid__item"
+      style="min-height: 200px; background: no-repeat bottom right / auto 75% url(/assets/images/pfbg-icon.svg) black;"
     ></div>
     <div class="pf-v5-l-grid__item">
       <div class="pf-v5-c-card__title">

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

@@ -1940,8 +1940,14 @@ wrapperTag: div
                   type="button"
                   aria-label="Expand all rows"
                 >
-                  <span class="pf-v5-c-toolbar__expand-all-icon">
-                    <i class="fas fa-angle-right" aria-hidden="true"></i>
+                  <span class="pf-v5-c-icon">
+                    <span
+                      class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+                    >
+                      <span class="pf-v5-c-toolbar__expand-all-icon">
+                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                      </span>
+                    </span>
                   </span>
                 </button>
               </div>

package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md

@@ -551,7 +551,10 @@ wrapperTag: div
                         type="button"
                         aria-label="Sort"
                       >
-                        <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+                        <i
+                          class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+                          aria-hidden="true"
+                        ></i>
                       </button>
                     </div>
 
@@ -1809,7 +1812,10 @@ wrapperTag: div
                         type="button"
                         aria-label="Sort"
                       >
-                        <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+                        <i
+                          class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+                          aria-hidden="true"
+                        ></i>
                       </button>
                     </div>
 
@@ -2880,7 +2886,10 @@ wrapperTag: div
                         type="button"
                         aria-label="Sort"
                       >
-                        <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+                        <i
+                          class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+                          aria-hidden="true"
+                        ></i>
                       </button>
                     </div>
 
@@ -3888,7 +3897,10 @@ wrapperTag: div
                     type="button"
                     aria-label="Sort"
                   >
-                    <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+                    <i
+                      class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
+                      aria-hidden="true"
+                    ></i>
                   </button>
                 </div>
 

package/docs/demos/Skeleton/examples/Skeleton.md

@@ -206,11 +206,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -231,11 +227,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -256,11 +248,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -281,11 +269,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -306,11 +290,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -331,11 +311,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -356,11 +332,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">