@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.50

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/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