@patternfly/patternfly 6.0.0-alpha.2 → 6.0.0-alpha.21

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/Page/examples/Page.css

@@ -1,11 +1,3 @@
-.ws-core-c-page :is(.pf-v5-c-page__sidebar, .pf-v5-c-page__main-subnav) {
-  color: var(--pf-v5-global--Color--light-100);
-}
-
-.ws-core-c-page .pf-v5-c-page__main-section.pf-m-dark-200 {
-  color: var(--pf-v5-global--Color--dark-100);
-}
-
 #ws-core-c-page-with-or-without-fill .ws-preview-html,
 #ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
   height: 500px;

package/docs/components/Page/examples/Page.md

@@ -32,20 +32,14 @@ wrapperTag: div
     <div class="pf-v5-c-page__sidebar-body">Navigation</div>
   </div>
   <main class="pf-v5-c-page__main" tabindex="-1">
-    <section class="pf-v5-c-page__main-section pf-m-dark-100">
-      This
-      <code>.pf-v5-c-page__main-section</code> uses
-      <code>.pf-m-dark-100</code>.
-    </section>
-    <section class="pf-v5-c-page__main-section pf-m-dark-200">
-      This
-      <code>.pf-v5-c-page__main-section</code> uses
-      <code>.pf-m-dark-200</code>.
+    <section class="pf-v5-c-page__main-section">
+      This is a default
+      <code>.pf-v5-c-page__main-section</code>.
     </section>
-    <section class="pf-v5-c-page__main-section pf-m-light">
+    <section class="pf-v5-c-page__main-section pf-m-secondary">
       This
       <code>.pf-v5-c-page__main-section</code> uses
-      <code>.pf-m-light</code>.
+      <code>.pf-m-secondary</code>.
     </section>
     <section class="pf-v5-c-page__main-section">
       This is a default
@@ -78,10 +72,19 @@ wrapperTag: div
     </div>
   </header>
   <main class="pf-v5-c-page__main" tabindex="-1">
-    <section class="pf-v5-c-page__main-section pf-m-dark-100"></section>
-    <section class="pf-v5-c-page__main-section pf-m-dark-200"></section>
-    <section class="pf-v5-c-page__main-section pf-m-light"></section>
-    <section class="pf-v5-c-page__main-section"></section>
+    <section class="pf-v5-c-page__main-section">
+      This is a default
+      <code>.pf-v5-c-page__main-section</code>.
+    </section>
+    <section class="pf-v5-c-page__main-section pf-m-secondary">
+      This
+      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-m-secondary</code>.
+    </section>
+    <section class="pf-v5-c-page__main-section">
+      This is a default
+      <code>.pf-v5-c-page__main-section</code>.
+    </section>
   </main>
 </div>
 
@@ -116,7 +119,7 @@ wrapperTag: div
     <div class="pf-v5-c-page__sidebar-body pf-m-page-insets">footer content</div>
   </div>
   <main class="pf-v5-c-page__main" tabindex="-1">
-    <section class="pf-v5-c-page__main-section pf-m-light"></section>
+    <section class="pf-v5-c-page__main-section"></section>
   </main>
 </div>
 
@@ -144,14 +147,12 @@ wrapperTag: div
     </div>
   </header>
   <main class="pf-v5-c-page__main" tabindex="-1">
-    <section
-      class="pf-v5-c-page__main-section pf-m-light"
-    >A regular page section.</section>
+    <section class="pf-v5-c-page__main-section">A regular page section.</section>
     <section class="pf-v5-c-page__main-section pf-m-fill">
       This section uses
       <code>.pf-m-fill</code> to fill the available space.
     </section>
-    <section class="pf-v5-c-page__main-section pf-m-light pf-m-no-fill">
+    <section class="pf-v5-c-page__main-section pf-m-no-fill">
       This section uses
       <code>.pf-m-no-fill</code> to not fill the available space.
     </section>
@@ -189,7 +190,7 @@ wrapperTag: div
       This
       <code>.pf-v5-c-page__main-section</code> has default padding.
     </section>
-    <section class="pf-v5-c-page__main-section pf-m-no-padding pf-m-light">
+    <section class="pf-v5-c-page__main-section pf-m-no-padding">
       This
       <code>.pf-v5-c-page__main-section</code> uses
       <code>.pf-m-no-padding</code> to remove all padding.

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