@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.10

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;
+}

package/docs/components/Radio/examples/Radio.md

@@ -8,15 +8,17 @@ cssPrefix: pf-v5-c-radio
 ### Basic
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-basic-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-simple"
-    name="exampleRadioSimple"
+    id="radio-basic-example-input"
+    name="radio-basic-example-input"
   />
-
-  <label class="pf-v5-c-radio__label" for="radio-simple">Radio</label>
+  <label
+    class="pf-v5-c-radio__label"
+    for="radio-basic-example-input"
+  >Basic radio</label>
 </div>
 
 ```
@@ -24,16 +26,18 @@ cssPrefix: pf-v5-c-radio
 ### Checked
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-checked-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-checked"
-    name="exampleRadioChecked"
+    id="radio-checked-example-input"
+    name="radio-checked-example-input"
     checked
   />
-
-  <label class="pf-v5-c-radio__label" for="radio-checked">Radio checked</label>
+  <label
+    class="pf-v5-c-radio__label"
+    for="radio-checked-example-input"
+  >Radio checked</label>
 </div>
 
 ```
@@ -41,14 +45,17 @@ cssPrefix: pf-v5-c-radio
 ### Label wrapping input
 
 ```html
-<label class="pf-v5-c-radio" for="radio-wrap">
+<label
+  class="pf-v5-c-radio"
+  id="radio-label-wrapping-input-example"
+  for="radio-label-wrapping-input-example-input"
+>
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-wrap"
-    name="exampleRadioWrap"
+    id="radio-label-wrapping-input-example-input"
+    name="radio-label-wrapping-input-example-input"
   />
-
   <span class="pf-v5-c-radio__label">Radio label wraps input</span>
 </label>
 
@@ -57,14 +64,16 @@ cssPrefix: pf-v5-c-radio
 ### Reversed
 
 ```html
-<div class="pf-v5-c-radio">
-  <label class="pf-v5-c-radio__label" for="radio-rev">Radio reversed</label>
-
+<div class="pf-v5-c-radio" id="radio-reversed-example">
+  <label
+    class="pf-v5-c-radio__label"
+    for="radio-reversed-example-input"
+  >Radio reversed</label>
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-rev"
-    name="exampleRadioReversed"
+    id="radio-reversed-example-input"
+    name="radio-reversed-example-input"
   />
 </div>
 
@@ -73,35 +82,32 @@ cssPrefix: pf-v5-c-radio
 ### Disabled
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-disabled-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-disabled"
-    name="exampleRadioDisabled"
+    id="radio-disabled-example-input"
+    name="radio-disabled-example-input"
     disabled
   />
-
   <label
     class="pf-v5-c-radio__label pf-m-disabled"
-    for="radio-disabled"
+    for="radio-disabled-example-input"
   >Radio disabled</label>
 </div>
-
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-disabled-checked-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-disabled-checked"
-    name="exampleRadioDisabledChecked"
-    disabled
+    id="radio-disabled-checked-example-input"
+    name="radio-disabled-checked-example-input"
     checked
+    disabled
   />
-
   <label
     class="pf-v5-c-radio__label pf-m-disabled"
-    for="radio-disabled-checked"
-  >Radio disabled checked</label>
+    for="radio-disabled-checked-example-input"
+  >Radio disabled</label>
 </div>
 
 ```
@@ -109,21 +115,21 @@ cssPrefix: pf-v5-c-radio
 ### With description
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-with-description-exmaple">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-description"
-    name="exampleRadioDescription"
+    aria-describedby="radio-with-description-exmaple-description"
+    id="radio-with-description-exmaple-input"
+    name="radio-with-description-exmaple-input"
   />
-
   <label
     class="pf-v5-c-radio__label"
-    for="radio-description"
+    for="radio-with-description-exmaple-input"
   >Radio with description</label>
-
   <span
     class="pf-v5-c-radio__description"
+    id="radio-with-description-exmaple-description"
   >Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS od GCP.</span>
 </div>
 
@@ -132,16 +138,17 @@ cssPrefix: pf-v5-c-radio
 ### With body
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-with-body-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-body"
-    name="exampleRadioBody"
+    id="radio-with-body-example-input"
+    name="radio-with-body-example-input"
   />
-
-  <label class="pf-v5-c-radio__label" for="radio-body">Radio with body</label>
-
+  <label
+    class="pf-v5-c-radio__label"
+    for="radio-with-body-example-input"
+  >Radio with body</label>
   <span class="pf-v5-c-radio__body">This is where custom content goes.</span>
 </div>
 
@@ -150,21 +157,21 @@ cssPrefix: pf-v5-c-radio
 ### With description and body
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-with-description-body-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-description-body"
-    name="exampleRadioDescriptionBody"
+    aria-describedby="radio-with-description-body-example-description"
+    id="radio-with-description-body-example-input"
+    name="radio-with-description-body-example-input"
   />
-
   <label
     class="pf-v5-c-radio__label"
-    for="radio-description-body"
+    for="radio-with-description-body-example-input"
   >Radio with description and body</label>
-
   <span
     class="pf-v5-c-radio__description"
+    id="radio-with-description-body-example-description"
   >Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS od GCP.</span>
   <span class="pf-v5-c-radio__body">This is where custom content goes.</span>
 </div>
@@ -174,15 +181,15 @@ cssPrefix: pf-v5-c-radio
 ### Standalone input
 
 ```html
-<div class="pf-v5-c-radio pf-m-standalone">
+<label class="pf-v5-c-radio pf-m-standalone" id="radio-standalon-input-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-standalone"
-    name="exampleRadioStandalone"
-    aria-label="Standalone input"
+    id="radio-standalon-input-example-input"
+    name="radio-standalon-input-example-input"
+    aria-label="Standalone radio"
   />
-</div>
+</label>
 
 ```
 
@@ -199,6 +206,7 @@ If you extend this component or modify the styles of this component, then make s
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
 | `disabled` | `<input type="radio">` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
+| `aria-describedby` | `.pf-v5-c-radio__input` |  When using `.pf-v5-c-radio__description` make use of this on the input. |
 
 ### Usage