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

package/docs/components/Panel/examples/Panel.md

@@ -15,6 +15,17 @@ cssPrefix: pf-v5-c-panel
 
 ```
 
+### Secondary
+
+```html
+<div class="pf-v5-c-panel pf-m-secondary">
+  <div class="pf-v5-c-panel__main">
+    <div class="pf-v5-c-panel__main-body">Main content with secondary styling</div>
+  </div>
+</div>
+
+```
+
 ### Header
 
 ```html
@@ -160,3 +171,4 @@ cssPrefix: pf-v5-c-panel
 | `.pf-m-bordered` | `.pf-v5-c-panel` | Modifies the panel for bordered styles. |
 | `.pf-m-raised` | `.pf-v5-c-panel` | Modifies the panel for raised styles. |
 | `.pf-m-scrollable` | `.pf-v5-c-panel` | Modifies the panel for scrollable styles. |
+| `.pf-m-secondary` | `.pf-v5-c-panel` | Modifies the panel for secondary styles. |

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/Popover/examples/Popover.md

@@ -339,7 +339,7 @@ cssPrefix: pf-v5-c-popover
     <div
       class="pf-v5-c-popover__body"
       id="popover-no-padding-body"
-    >This popover has no padding and is intended for use with content that has its own spacing and should touch the edges of the popover container.</div>
+    >This popover has no padding itself. Instead it is intended for use with content that has its own padding that prevents it from touching the popover container's edges.</div>
   </div>
 </div>
 

package/docs/components/ProgressStepper/examples/ProgressStepper.md

@@ -23,7 +23,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -74,7 +74,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -134,7 +134,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -191,7 +191,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -248,7 +248,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -305,7 +305,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -362,7 +362,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -419,7 +419,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -479,7 +479,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -539,7 +539,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -596,7 +596,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -678,7 +678,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -872,7 +872,7 @@ cssPrefix: pf-v5-c-progress-stepper
     </div>
   </li>
   <li
-    class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
+    class="pf-v5-c-progress-stepper__step pf-m-current"
     role="listitem"
     aria-label="current step,in process step,"
   >
@@ -912,7 +912,7 @@ The progress stepper is intended to show progress through a finite number of dis
 
 Add a modifier class to the progress stepper to change the orientation or alignment: `.pf-m-center`, `.pf-m-vertical`, or `.pf-m-compact`.
 
-Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and `.pf-m-info` to change their color. Use modifiers `.pf-m-pending` and `.pf-m-current` to indicate progress through the steps.
+Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, `.pf-m-info`, `.pf-m-custom`, and `.pf-m-in-progress-alt` to change their color. Use modifiers `.pf-m-pending` and `.pf-m-current` to indicate progress through the steps.
 
 ### Accessibility
 
@@ -940,6 +940,7 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and
 | `.pf-m-warning`| `.pf-v5-c-progress-stepper__step` | Modifies for warning styling. |
 | `.pf-m-danger`| `.pf-v5-c-progress-stepper__step` | Modifies for danger styling. |
 | `.pf-m-info`| `.pf-v5-c-progress-stepper__step` | Modifies for info styling. |
+| `.pf-m-custom`| `.pf-v5-c-progress-stepper__step` | Modifies for custom styling. |
 | `.pf-m-current`| `.pf-v5-c-progress-stepper__step` | Modifies styling for the current step. |
 | `.pf-m-pending`| `.pf-v5-c-progress-stepper__step` | Modifies styling for pending steps. |
 | `.pf-m-help-text`| `.pf-v5-c-progress-stepper__step-title` | Modifies styling for steps that have help text. |

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,34 +82,31 @@ 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"
+    for="radio-disabled-checked-example-input"
   >Radio disabled checked</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