@patternfly/patternfly 5.1.0-prerelease.10 → 5.1.0-prerelease.12

package/components/Breadcrumb/breadcrumb.css

@@ -45,6 +45,9 @@
   line-height: 1;
   color: var(--pf-v5-c-breadcrumb__item-divider--Color);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
+  scale: -1 1;
+}
 
 .pf-v5-c-breadcrumb__link {
   font-size: inherit;

package/components/Breadcrumb/breadcrumb.scss

@@ -58,6 +58,8 @@
 
 // Breadcrumb divider
 .#{$breadcrumb}__item-divider {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-end: var(--#{$breadcrumb}__item-divider--MarginRight);
   font-size: var(--#{$breadcrumb}__item-divider--FontSize);
   line-height: 1;

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

@@ -1,32 +1,9 @@
-#ws-core-c-navigation-default,
-#ws-core-c-navigation-basic,
-#ws-core-c-navigation-grouped,
-#ws-core-c-navigation-grouped-nav,
-#ws-core-c-navigation-grouped-nav-no-titles,
-#ws-core-c-navigation-expanded,
-#ws-core-c-navigation-expanded-with-subnav-titles,
-#ws-core-c-navigation-mixed,
-#ws-core-c-navigation-horizontal,
-#ws-core-c-navigation-horizontal-overflow,
-#ws-core-c-navigation-horizontal-subnav,
-#ws-core-c-navigation-horizontal-subnav-overflow,
-#ws-core-c-navigation-drilldown,
-#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
-#ws-core-c-navigation-level-2-drilldown,
-#ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
-#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
-  padding: 0;
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
-#ws-core-c-navigation-expandable-third-level .pf-v5-c-nav {
+.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .ws-preview-html {
   background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
 #ws-core-c-navigation-horizontal-in-masthead,
 #ws-core-c-navigation-horizontal-in-masthead-overflow {
-  padding: 0;
   grid-template-rows: auto;
 }
 
@@ -58,6 +35,6 @@
 
 #ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
- inset-block-start: 168px;
- inset-inline-start: 256px;
+  inset-block-start: 168px;
+  inset-inline-start: 256px;
 }

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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.1.0-prerelease.10",
+  "version": "5.1.0-prerelease.12",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -45,7 +45,7 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.0.1",
-    "@patternfly/documentation-framework": "5.1.7",
+    "@patternfly/documentation-framework": "5.1.9",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "5.0.0",
     "@patternfly/react-core": "5.0.0",

package/patternfly-no-globals.css

@@ -6929,6 +6929,9 @@
   line-height: 1;
   color: var(--pf-v5-c-breadcrumb__item-divider--Color);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
+  scale: -1 1;
+}
 
 .pf-v5-c-breadcrumb__link {
   font-size: inherit;

package/patternfly-theme-dark-unversioned.css

@@ -7046,6 +7046,9 @@ button) {
   line-height: 1;
   color: var(--pf-v5-c-breadcrumb__item-divider--Color);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
+  scale: -1 1;
+}
 
 .pf-v5-c-breadcrumb__link {
   font-size: inherit;

package/patternfly.css

@@ -7046,6 +7046,9 @@ button) {
   line-height: 1;
   color: var(--pf-v5-c-breadcrumb__item-divider--Color);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
+  scale: -1 1;
+}
 
 .pf-v5-c-breadcrumb__link {
   font-size: inherit;