@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.9

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -275,14 +275,18 @@ cssPrefix: pf-v5-c-menu-toggle
 
 ```html
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
-  <label class="pf-v5-c-check pf-m-standalone">
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    id="split-button-checkbox-disabled-example-check"
+    for="split-button-checkbox-disabled-example-check-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-disabled-example-check-input"
+      name="split-button-checkbox-disabled-example-check-input"
+      aria-label="Standalone check"
       disabled
-      id="split-button-checkbox-disabled-example-input"
-      name="split-button-checkbox-disabled-example-input"
-      aria-label="Standalone input"
     />
   </label>
   <button
@@ -302,13 +306,17 @@ cssPrefix: pf-v5-c-menu-toggle
 </div>
 &nbsp;
 <div class="pf-v5-c-menu-toggle pf-m-split-button">
-  <label class="pf-v5-c-check pf-m-standalone">
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    id="split-button-checkbox-example-check"
+    for="split-button-checkbox-example-check-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-example-input"
-      name="split-button-checkbox-example-input"
-      aria-label="Standalone input"
+      id="split-button-checkbox-example-check-input"
+      name="split-button-checkbox-example-check-input"
+      aria-label="Standalone check"
     />
   </label>
   <button
@@ -327,13 +335,17 @@ cssPrefix: pf-v5-c-menu-toggle
 </div>
 &nbsp;
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
-  <label class="pf-v5-c-check pf-m-standalone">
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    id="split-button-checkbox-expanded-example-check"
+    for="split-button-checkbox-expanded-example-check-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-expanded-example-input"
-      name="split-button-checkbox-expanded-example-input"
-      aria-label="Standalone input"
+      id="split-button-checkbox-expanded-example-check-input"
+      name="split-button-checkbox-expanded-example-check-input"
+      aria-label="Standalone check"
     />
   </label>
   <button
@@ -359,14 +371,15 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-with-toggle-text-disabled-example-input"
+    id="split-button-checkbox-with-toggle-text-disabled-example-check"
+    for="split-button-checkbox-with-toggle-text-disabled-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-with-toggle-text-disabled-example-check-input"
+      name="split-button-checkbox-with-toggle-text-disabled-example-check-input"
       disabled
-      id="split-button-checkbox-with-toggle-text-disabled-example-input"
-      name="split-button-checkbox-with-toggle-text-disabled-example-input"
     />
     <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -389,13 +402,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-with-toggle-text-example-input"
+    id="split-button-checkbox-with-toggle-text-example-check"
+    for="split-button-checkbox-with-toggle-text-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-with-toggle-text-example-input"
-      name="split-button-checkbox-with-toggle-text-example-input"
+      id="split-button-checkbox-with-toggle-text-example-check-input"
+      name="split-button-checkbox-with-toggle-text-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -417,13 +431,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-with-toggle-text-expanded-example-input"
+    id="split-button-checkbox-with-toggle-text-expanded-example-check"
+    for="split-button-checkbox-with-toggle-text-expanded-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-with-toggle-text-expanded-example-input"
-      name="split-button-checkbox-with-toggle-text-expanded-example-input"
+      id="split-button-checkbox-with-toggle-text-expanded-example-check-input"
+      name="split-button-checkbox-with-toggle-text-expanded-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -450,14 +465,15 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-primary-disabled-example-input"
+    id="split-button-checkbox-primary-disabled-example-check"
+    for="split-button-checkbox-primary-disabled-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-primary-disabled-example-check-input"
+      name="split-button-checkbox-primary-disabled-example-check-input"
       disabled
-      id="split-button-checkbox-primary-disabled-example-input"
-      name="split-button-checkbox-primary-disabled-example-input"
     />
     <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -480,13 +496,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-primary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-primary-example-input"
+    id="split-button-checkbox-primary-example-check"
+    for="split-button-checkbox-primary-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-primary-example-input"
-      name="split-button-checkbox-primary-example-input"
+      id="split-button-checkbox-primary-example-check-input"
+      name="split-button-checkbox-primary-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -508,13 +525,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-primary-expanded-example-input"
+    id="split-button-checkbox-primary-expanded-example-check"
+    for="split-button-checkbox-primary-expanded-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-primary-expanded-example-input"
-      name="split-button-checkbox-primary-expanded-example-input"
+      id="split-button-checkbox-primary-expanded-example-check-input"
+      name="split-button-checkbox-primary-expanded-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -541,14 +559,15 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-secondary-disabled-example-input"
+    id="split-button-checkbox-secondary-disabled-example-check"
+    for="split-button-checkbox-secondary-disabled-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-secondary-disabled-example-check-input"
+      name="split-button-checkbox-secondary-disabled-example-check-input"
       disabled
-      id="split-button-checkbox-secondary-disabled-example-input"
-      name="split-button-checkbox-secondary-disabled-example-input"
     />
     <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -571,13 +590,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-secondary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-secondary-example-input"
+    id="split-button-checkbox-secondary-example-check"
+    for="split-button-checkbox-secondary-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-secondary-example-input"
-      name="split-button-checkbox-secondary-example-input"
+      id="split-button-checkbox-secondary-example-check-input"
+      name="split-button-checkbox-secondary-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -599,13 +619,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-secondary-expanded-example-input"
+    id="split-button-checkbox-secondary-expanded-example-check"
+    for="split-button-checkbox-secondary-expanded-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-secondary-expanded-example-input"
-      name="split-button-checkbox-secondary-expanded-example-input"
+      id="split-button-checkbox-secondary-expanded-example-check-input"
+      name="split-button-checkbox-secondary-expanded-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>

package/docs/components/ModalBox/examples/ModalBox.css

@@ -1,10 +1,5 @@
 .ws-core-c-modal .ws-preview-html {
-  position: relative;
-}
-
-.ws-core-c-modal .pf-v5-c-modal-box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

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

@@ -1,27 +1,10 @@
-#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 {
+.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
   padding: 0;
+  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;
 }
 
@@ -53,6 +36,6 @@
 
 #ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
-  top: 168px;
-  left: 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/NotificationBadge/examples/NotificationBadge.md

@@ -2,14 +2,12 @@
 id: Notification badge
 section: components
 cssPrefix: pf-v5-c-notification-badge
----import './NotificationBadge.css'
-
-## Examples
+---## Examples
 
 ### Basic
 
 ```html
-<div class="pf-v5-t-dark">
+<div>
   <button
     class="pf-v5-c-button pf-m-plain"
     type="button"
@@ -69,7 +67,7 @@ cssPrefix: pf-v5-c-notification-badge
 ### With count
 
 ```html
-<div class="pf-v5-t-dark">
+<div>
   <button
     class="pf-v5-c-button pf-m-plain"
     type="button"
@@ -135,7 +133,7 @@ cssPrefix: pf-v5-c-notification-badge
 ### Expanded
 
 ```html
-<div class="pf-v5-t-dark">
+<div>
   <button
     class="pf-v5-c-button pf-m-plain"
     type="button"
@@ -206,7 +204,7 @@ cssPrefix: pf-v5-c-notification-badge
 
 ### Overview
 
-Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
+Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own.
 
 ### Accessibility
 

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;
-   top: 50%;
-   left: 50%;
-   transform: translate(-50%, -50%);
- }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}