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

package/docs/components/Form/examples/Form.md

@@ -11,14 +11,17 @@ cssPrefix: pf-v5-c-form
 <form class="pf-v5-c-form" novalidate>
   <div class="pf-v5-c-form__group">
     <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-vertical-name">
-        <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-        class="pf-v5-c-form__group-label-help"
-        aria-label="More information for name field"
-        aria-describedby="form-vertical-name"
-        role="button"
-        type="button"
-        tabindex="0"
-      ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+        <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+        <span
+          class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+          type="button"
+          role="button"
+          tabindex="0"
+          aria-label="More information for name field"
+          aria-describedby="form-vertical-name"
+        >
+          <i class="fas fa-question-circle" aria-hidden="true"></i>
+        </span></span>
     </div>
     <div class="pf-v5-c-form__group-control">
       <span class="pf-v5-c-form-control pf-m-required">
@@ -56,14 +59,17 @@ cssPrefix: pf-v5-c-form
   </div>
   <div class="pf-v5-c-form__group">
     <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-horizontal-info">
-        <span class="pf-v5-c-form__label-text">Information</span></label>&nbsp;<span
-        class="pf-v5-c-form__group-label-help"
-        aria-label="More information for information field"
-        aria-describedby="form-horizontal-info"
-        role="button"
-        type="button"
-        tabindex="0"
-      ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+        <span class="pf-v5-c-form__label-text">Information</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+        <span
+          class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+          type="button"
+          role="button"
+          tabindex="0"
+          aria-label="More information for information field"
+          aria-describedby="form-horizontal-info"
+        >
+          <i class="fas fa-question-circle" aria-hidden="true"></i>
+        </span></span>
     </div>
     <div class="pf-v5-c-form__group-control">
       <span class="pf-v5-c-form-control">
@@ -85,14 +91,17 @@ cssPrefix: pf-v5-c-form
       class="pf-v5-c-form__group-label pf-m-no-padding-top"
       id="form-horizontalform-horizontal-checkbox-legend"
     ><span class="pf-v5-c-form__label">
-        <span class="pf-v5-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span
-        class="pf-v5-c-form__group-label-help"
-        aria-label="More information for label field"
-        aria-describedby="form-horizontal-checkbox-legend"
-        role="button"
-        type="button"
-        tabindex="0"
-      ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+        <span class="pf-v5-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span class="pf-v5-c-form__group-label-help">
+        <span
+          class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+          type="button"
+          role="button"
+          tabindex="0"
+          aria-label="More information for label field"
+          aria-describedby="form-horizontal-checkbox-legend"
+        >
+          <i class="fas fa-question-circle" aria-hidden="true"></i>
+        </span></span>
     </div>
     <div class="pf-v5-c-form__group-control pf-m-stack">
       <div class="pf-v5-c-check">
@@ -136,14 +145,17 @@ cssPrefix: pf-v5-c-form
         class="pf-v5-c-form__label"
         for="form-horizontal-custom-breakpoint-name"
       >
-        <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-        class="pf-v5-c-form__group-label-help"
-        aria-label="More information for name field"
-        aria-describedby="form-horizontal-custom-breakpoint-name"
-        role="button"
-        type="button"
-        tabindex="0"
-      ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+        <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+        <span
+          class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+          type="button"
+          role="button"
+          tabindex="0"
+          aria-label="More information for name field"
+          aria-describedby="form-horizontal-custom-breakpoint-name"
+        >
+          <i class="fas fa-question-circle" aria-hidden="true"></i>
+        </span></span>
     </div>
     <div class="pf-v5-c-form__group-control">
       <span class="pf-v5-c-form-control pf-m-required">
@@ -277,6 +289,9 @@ cssPrefix: pf-v5-c-form
             class="pf-v5-c-helper-text__item"
             id="form-help-text-name-helper"
           >
+            <span class="pf-v5-c-helper-text__item-icon">
+              <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
+            </span>
             <span class="pf-v5-c-helper-text__item-text">This is helper text.</span>
           </div>
         </div>
@@ -308,6 +323,9 @@ cssPrefix: pf-v5-c-form
             class="pf-v5-c-helper-text__item pf-m-warning"
             id="form-help-text-email-helper"
           >
+            <span class="pf-v5-c-helper-text__item-icon">
+              <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
+            </span>
             <span
               class="pf-v5-c-helper-text__item-text"
             >This is helper text for a warning input.</span>
@@ -342,6 +360,9 @@ cssPrefix: pf-v5-c-form
             class="pf-v5-c-helper-text__item pf-m-error"
             id="-address-helper"
           >
+            <span class="pf-v5-c-helper-text__item-icon">
+              <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+            </span>
             <span
               class="pf-v5-c-helper-text__item-text"
             >This is helper text for an invalid input.</span>
@@ -375,6 +396,9 @@ cssPrefix: pf-v5-c-form
             class="pf-v5-c-helper-text__item pf-m-success"
             id="form-help-text-comment-helper"
           >
+            <span class="pf-v5-c-helper-text__item-icon">
+              <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
+            </span>
             <span
               class="pf-v5-c-helper-text__item-text"
             >This is helper text for success input.</span>
@@ -429,14 +453,17 @@ cssPrefix: pf-v5-c-form
   <div class="pf-v5-c-form__group">
     <div class="pf-v5-c-form__group-label pf-m-info">
       <div class="pf-v5-c-form__group-label-main"><label class="pf-v5-c-form__label" for="form-additional-info-name">
-          <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-          class="pf-v5-c-form__group-label-help"
-          aria-label="More information for name field"
-          aria-describedby="form-additional-infoform-additional-info-name"
-          role="button"
-          type="button"
-          tabindex="0"
-        ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+          <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+          <span
+            class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+            type="button"
+            role="button"
+            tabindex="0"
+            aria-label="More information for name field"
+            aria-describedby="form-additional-infoform-additional-info-name"
+          >
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
+          </span></span>
       </div>
       <div class="pf-v5-c-form__group-label-info">info</div>
     </div>
@@ -500,14 +527,17 @@ cssPrefix: pf-v5-c-form
             class="pf-v5-c-form__label"
             for="form-field-group-field-group-label1"
           >
-            <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-            class="pf-v5-c-form__group-label-help"
-            aria-label="More information for label 1 field"
-            aria-describedby="form-field-group-field-group-label1"
-            role="button"
-            type="button"
-            tabindex="0"
-          ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+            <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+            <span
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+              type="button"
+              role="button"
+              tabindex="0"
+              aria-label="More information for label 1 field"
+              aria-describedby="form-field-group-field-group-label1"
+            >
+              <i class="fas fa-question-circle" aria-hidden="true"></i>
+            </span></span>
         </div>
         <div class="pf-v5-c-form__group-control">
           <span class="pf-v5-c-form-control pf-m-required">
@@ -525,14 +555,17 @@ cssPrefix: pf-v5-c-form
             class="pf-v5-c-form__label"
             for="form-field-group-field-group-label2"
           >
-            <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-            class="pf-v5-c-form__group-label-help"
-            aria-label="More information for label 2 field"
-            aria-describedby="form-field-group-field-group-label2"
-            role="button"
-            type="button"
-            tabindex="0"
-          ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+            <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+            <span
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+              type="button"
+              role="button"
+              tabindex="0"
+              aria-label="More information for label 2 field"
+              aria-describedby="form-field-group-field-group-label2"
+            >
+              <i class="fas fa-question-circle" aria-hidden="true"></i>
+            </span></span>
         </div>
         <div class="pf-v5-c-form__group-control">
           <span class="pf-v5-c-form-control pf-m-required">
@@ -633,14 +666,17 @@ cssPrefix: pf-v5-c-form
             class="pf-v5-c-form__label"
             for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
           >
-            <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-            class="pf-v5-c-form__group-label-help"
-            aria-label="More information for label 1 field"
-            aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
-            role="button"
-            type="button"
-            tabindex="0"
-          ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+            <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+            <span
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+              type="button"
+              role="button"
+              tabindex="0"
+              aria-label="More information for label 1 field"
+              aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
+            >
+              <i class="fas fa-question-circle" aria-hidden="true"></i>
+            </span></span>
         </div>
         <div class="pf-v5-c-form__group-control">
           <span class="pf-v5-c-form-control pf-m-required">
@@ -658,14 +694,17 @@ cssPrefix: pf-v5-c-form
             class="pf-v5-c-form__label"
             for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
           >
-            <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
-            class="pf-v5-c-form__group-label-help"
-            aria-label="More information for label 2 field"
-            aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
-            role="button"
-            type="button"
-            tabindex="0"
-          ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+            <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+            <span
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+              type="button"
+              role="button"
+              tabindex="0"
+              aria-label="More information for label 2 field"
+              aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
+            >
+              <i class="fas fa-question-circle" aria-hidden="true"></i>
+            </span></span>
         </div>
         <div class="pf-v5-c-form__group-control">
           <span class="pf-v5-c-form-control pf-m-required">
@@ -702,14 +741,17 @@ cssPrefix: pf-v5-c-form
                 <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span
                   class="pf-v5-c-form__label-required"
                   aria-hidden="true"
-                >&#42;</span></label>&nbsp;<span
-                class="pf-v5-c-form__group-label-help"
-                aria-label="More information for label 1 field"
-                aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
-                role="button"
-                type="button"
-                tabindex="0"
-              ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+                >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+                <span
+                  class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+                  type="button"
+                  role="button"
+                  tabindex="0"
+                  aria-label="More information for label 1 field"
+                  aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
+                >
+                  <i class="fas fa-question-circle" aria-hidden="true"></i>
+                </span></span>
             </div>
             <div class="pf-v5-c-form__group-control">
               <span class="pf-v5-c-form-control pf-m-required">
@@ -730,14 +772,17 @@ cssPrefix: pf-v5-c-form
                 <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span
                   class="pf-v5-c-form__label-required"
                   aria-hidden="true"
-                >&#42;</span></label>&nbsp;<span
-                class="pf-v5-c-form__group-label-help"
-                aria-label="More information for label 2 field"
-                aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
-                role="button"
-                type="button"
-                tabindex="0"
-              ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
+                >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
+                <span
+                  class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+                  type="button"
+                  role="button"
+                  tabindex="0"
+                  aria-label="More information for label 2 field"
+                  aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
+                >
+                  <i class="fas fa-question-circle" aria-hidden="true"></i>
+                </span></span>
             </div>
             <div class="pf-v5-c-form__group-control">
               <span class="pf-v5-c-form-control pf-m-required">
@@ -799,7 +844,7 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
 | `.pf-v5-c-form__label-required` | `<span>` |  Initiates a form label required indicator. |
 | `.pf-v5-c-form__group-label-main` | `<div>` |  Initiates a form group label main container. |
 | `.pf-v5-c-form__group-label-info` | `<div>` |  Initiates a form group info label. |
-| `.pf-v5-c-form__group-label-help` | `<button>`, `<span>` | Initiates a field level help span/button. |
+| `.pf-v5-c-form__group-label-help` | `<span>` | Initiates field level help. |
 | `.pf-v5-c-form__group-control` | `<div>` |  Initiates a form group control section. |
 | `.pf-v5-c-form__actions` | `<div>` | Iniates a row of actions. |
 | `.pf-v5-c-form__helper-text` | `<p>`, `<div>` |  Initiates a form helper text block. |

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -930,4 +930,6 @@ All accessibility requirements for inputs apply to elements within inline edit.
 | `.pf-m-valid` | `.pf-v5-c-inline-edit__action` | Modifies the action button state. |
 | `.pf-m-enable-editable` | `.pf-v5-c-inline-edit__action` | Exposes an inline edit action by default. |
 
-    -->
+```
+-->
+```

package/docs/components/Label/examples/Label.md

@@ -1949,16 +1949,16 @@ This style of label is used to indicate overflow within a label group.
 
 **Note: Editable label behavior must be handled with JavaScript.**
 
-*   `.pf-v5-c-label__editable-text` onClick event should:
-    *   Set `.pf-m-editable-active` on `.pf-v5-c-label`
-    *   Change `.pf-v5-c-label__editable-text`from a button to an input
-*   Return keypress, when content is editable, should:
-    *   Be captured to prevent line wrapping and save updates to label text
-    *   Remove `.pf-m-editable-active` from `.pf-v5-c-label`
-*   Esc keypress, when content is editable, should:
-    *   Undo any update to label text
-    *   Remove `.pf-m-editable-active` from `.pf-v5-c-label`
-    *   Change `.pf-v5-c-label__editable-text` back to a button
+* `.pf-v5-c-label__editable-text` onClick event should:
+  * Set `.pf-m-editable-active` on `.pf-v5-c-label`
+  * Change `.pf-v5-c-label__editable-text`from a button to an input
+* Return keypress, when content is editable, should:
+  * Be captured to prevent line wrapping and save updates to label text
+  * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
+* Esc keypress, when content is editable, should:
+  * Undo any update to label text
+  * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
+  * Change `.pf-v5-c-label__editable-text` back to a button
 
 ```html isBeta
 <span class="pf-v5-c-label pf-m-editable pf-m-blue">
@@ -2692,7 +2692,7 @@ The contents of a label group can be modified by removing labels or adding new o
 
 In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
 
-*   `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
+* `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
 
 ### Editable labels, dynamic label group
 
@@ -3265,7 +3265,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-label-group__close > button] [id value of .pf-v5-c-label-group__label]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
 | `aria-label="[label text]"` | `.pf-v5-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |

package/docs/components/LogViewer/examples/LogViewer.css

@@ -6,8 +6,8 @@
   display: none;
   position: absolute;
   z-index: 9999;
-  top: 52px;
-  right: 78px;
+ inset-block-start: 52px;
+ inset-inline-end: 78px;
 }
 
 @media screen and (min-width: 992px) {