@patternfly/react-core 5.0.0-alpha.90 → 5.0.0-alpha.91

package/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap

@@ -3,13 +3,13 @@
 exports[`ActionGroup component should render default action group variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__group pf-m-action"
+    class="pf-v5-c-form__group pf-m-action"
   >
     <div
-      class="pf-c-form__group-control"
+      class="pf-v5-c-form__group-control"
     >
       <div
-        class="pf-c-form__actions"
+        class="pf-v5-c-form__actions"
       >
         <div>
           Hello
@@ -23,17 +23,17 @@ exports[`ActionGroup component should render default action group variant 1`] =
 exports[`ActionGroup component should render horizontal form ActionGroup variant 1`] = `
 <DocumentFragment>
   <form
-    class="pf-c-form pf-m-horizontal"
+    class="pf-v5-c-form pf-m-horizontal"
     novalidate=""
   >
     <div
-      class="pf-c-form__group pf-m-action"
+      class="pf-v5-c-form__group pf-m-action"
     >
       <div
-        class="pf-c-form__group-control"
+        class="pf-v5-c-form__group-control"
       >
         <div
-          class="pf-c-form__actions"
+          class="pf-v5-c-form__actions"
         />
       </div>
     </div>

package/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Form component should render default form variant 1`] = `
 <DocumentFragment>
   <form
-    class="pf-c-form"
+    class="pf-v5-c-form"
     novalidate=""
   />
 </DocumentFragment>
@@ -12,7 +12,7 @@ exports[`Form component should render default form variant 1`] = `
 exports[`Form component should render form with limited width 1`] = `
 <DocumentFragment>
   <form
-    class="pf-c-form pf-m-limit-width"
+    class="pf-v5-c-form pf-m-limit-width"
     novalidate=""
   />
 </DocumentFragment>
@@ -21,7 +21,7 @@ exports[`Form component should render form with limited width 1`] = `
 exports[`Form component should render horizontal form variant 1`] = `
 <DocumentFragment>
   <form
-    class="pf-c-form pf-m-horizontal"
+    class="pf-v5-c-form pf-m-horizontal"
     novalidate=""
   />
 </DocumentFragment>

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -4,21 +4,21 @@ exports[`Check expandable form field group example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="title-text-id2"
-    class="pf-c-form__field-group pf-m-expanded"
+    class="pf-v5-c-form__field-group pf-m-expanded"
     role="group"
   >
     <div
-      class="pf-c-form__field-group-toggle"
+      class="pf-v5-c-form__field-group-toggle"
     >
       <div
-        class="pf-c-form__field-group-toggle-button"
+        class="pf-v5-c-form__field-group-toggle-button"
       >
         <button
           aria-disabled="false"
           aria-expanded="true"
           aria-label="toggle"
           aria-labelledby="title-text-id2 form-field-group-toggle0"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-1"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
@@ -26,11 +26,11 @@ exports[`Check expandable form field group example against snapshot 1`] = `
           type="button"
         >
           <span
-            class="pf-c-form__field-group-toggle-icon"
+            class="pf-v5-c-form__field-group-toggle-icon"
           >
             <svg
               aria-hidden="true"
-              class="pf-svg"
+              class="pf-v5-svg"
               fill="currentColor"
               role="img"
               viewBox="0 0 256 512"
@@ -44,33 +44,33 @@ exports[`Check expandable form field group example against snapshot 1`] = `
       </div>
     </div>
     <div
-      class="pf-c-form__field-group-header"
+      class="pf-v5-c-form__field-group-header"
     >
       <div
-        class="pf-c-form__field-group-header-main"
+        class="pf-v5-c-form__field-group-header-main"
       >
         <div
-          class="pf-c-form__field-group-header-title"
+          class="pf-v5-c-form__field-group-header-title"
         >
           <div
-            class="pf-c-form__field-group-header-title-text"
+            class="pf-v5-c-form__field-group-header-title-text"
             id="title-text-id2"
           >
             Field group 4 (non-expandable)
           </div>
         </div>
         <div
-          class="pf-c-form__field-group-header-description"
+          class="pf-v5-c-form__field-group-header-description"
         >
           Field group 4 description text.
         </div>
       </div>
       <div
-        class="pf-c-form__field-group-header-actions"
+        class="pf-v5-c-form__field-group-header-actions"
       >
         <button
           aria-disabled="false"
-          class="pf-c-button pf-m-primary"
+          class="pf-v5-c-button pf-m-primary"
           data-ouia-component-id="OUIA-Generated-Button-primary-2"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
@@ -79,7 +79,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
       </div>
     </div>
     <div
-      class="pf-c-form__field-group-body"
+      class="pf-v5-c-form__field-group-body"
     />
   </div>
 </DocumentFragment>
@@ -89,37 +89,37 @@ exports[`Check form field group example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="title-text-id1"
-    class="pf-c-form__field-group"
+    class="pf-v5-c-form__field-group"
     role="group"
   >
     <div
-      class="pf-c-form__field-group-header"
+      class="pf-v5-c-form__field-group-header"
     >
       <div
-        class="pf-c-form__field-group-header-main"
+        class="pf-v5-c-form__field-group-header-main"
       >
         <div
-          class="pf-c-form__field-group-header-title"
+          class="pf-v5-c-form__field-group-header-title"
         >
           <div
-            class="pf-c-form__field-group-header-title-text"
+            class="pf-v5-c-form__field-group-header-title-text"
             id="title-text-id1"
           >
             Field group 4 (non-expandable)
           </div>
         </div>
         <div
-          class="pf-c-form__field-group-header-description"
+          class="pf-v5-c-form__field-group-header-description"
         >
           Field group 4 description text.
         </div>
       </div>
       <div
-        class="pf-c-form__field-group-header-actions"
+        class="pf-v5-c-form__field-group-header-actions"
       >
         <button
           aria-disabled="false"
-          class="pf-c-button pf-m-primary"
+          class="pf-v5-c-button pf-m-primary"
           data-ouia-component-id="OUIA-Generated-Button-primary-1"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
@@ -128,7 +128,7 @@ exports[`Check form field group example against snapshot 1`] = `
       </div>
     </div>
     <div
-      class="pf-c-form__field-group-body"
+      class="pf-v5-c-form__field-group-body"
     />
   </div>
 </DocumentFragment>

package/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap

@@ -3,17 +3,17 @@
 exports[`FormGroup should render correctly when label is not a string with Children = Array 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__group"
+    class="pf-v5-c-form__group"
   >
     <div
-      class="pf-c-form__group-label"
+      class="pf-v5-c-form__group-label"
     >
       <label
-        class="pf-c-form__label"
+        class="pf-v5-c-form__label"
         for="id"
       >
         <span
-          class="pf-c-form__label-text"
+          class="pf-v5-c-form__label-text"
         >
           <div>
             label
@@ -23,7 +23,7 @@ exports[`FormGroup should render correctly when label is not a string with Child
        
     </div>
     <div
-      class="pf-c-form__group-control"
+      class="pf-v5-c-form__group-control"
     >
       <input
         aria-label="label"
@@ -40,17 +40,17 @@ exports[`FormGroup should render correctly when label is not a string with Child
 exports[`FormGroup should render default form group variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__group"
+    class="pf-v5-c-form__group"
   >
     <div
-      class="pf-c-form__group-label"
+      class="pf-v5-c-form__group-label"
     >
       <label
-        class="pf-c-form__label"
+        class="pf-v5-c-form__label"
         for="label-id"
       >
         <span
-          class="pf-c-form__label-text"
+          class="pf-v5-c-form__label-text"
         >
           label
         </span>
@@ -58,7 +58,7 @@ exports[`FormGroup should render default form group variant 1`] = `
        
     </div>
     <div
-      class="pf-c-form__group-control"
+      class="pf-v5-c-form__group-control"
     >
       <input
         id="label-id"
@@ -71,17 +71,17 @@ exports[`FormGroup should render default form group variant 1`] = `
 exports[`FormGroup should render form group variant with node label 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__group"
+    class="pf-v5-c-form__group"
   >
     <div
-      class="pf-c-form__group-label"
+      class="pf-v5-c-form__group-label"
     >
       <label
-        class="pf-c-form__label"
+        class="pf-v5-c-form__label"
         for="id"
       >
         <span
-          class="pf-c-form__label-text"
+          class="pf-v5-c-form__label-text"
         >
           <h1>
             Header
@@ -91,7 +91,7 @@ exports[`FormGroup should render form group variant with node label 1`] = `
        
     </div>
     <div
-      class="pf-c-form__group-control"
+      class="pf-v5-c-form__group-control"
     >
       <input
         aria-label="input"
@@ -104,23 +104,23 @@ exports[`FormGroup should render form group variant with node label 1`] = `
 exports[`FormGroup should render form group variant with required label 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__group"
+    class="pf-v5-c-form__group"
   >
     <div
-      class="pf-c-form__group-label"
+      class="pf-v5-c-form__group-label"
     >
       <label
-        class="pf-c-form__label"
+        class="pf-v5-c-form__label"
         for="label-id"
       >
         <span
-          class="pf-c-form__label-text"
+          class="pf-v5-c-form__label-text"
         >
           label
         </span>
         <span
           aria-hidden="true"
-          class="pf-c-form__label-required"
+          class="pf-v5-c-form__label-required"
         >
            *
         </span>
@@ -128,7 +128,7 @@ exports[`FormGroup should render form group variant with required label 1`] = `
        
     </div>
     <div
-      class="pf-c-form__group-control"
+      class="pf-v5-c-form__group-control"
     >
       <input
         id="label-id"
@@ -141,10 +141,10 @@ exports[`FormGroup should render form group variant with required label 1`] = `
 exports[`FormGroup should render form group variant without label 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__group"
+    class="pf-v5-c-form__group"
   >
     <div
-      class="pf-c-form__group-control"
+      class="pf-v5-c-form__group-control"
     >
       <input
         aria-label="input"
@@ -157,20 +157,20 @@ exports[`FormGroup should render form group variant without label 1`] = `
 exports[`FormGroup should render form group with additonal label info 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__group"
+    class="pf-v5-c-form__group"
   >
     <div
-      class="pf-c-form__group-label pf-m-info"
+      class="pf-v5-c-form__group-label pf-m-info"
     >
       <div
-        class="pf-c-form__group-label-main"
+        class="pf-v5-c-form__group-label-main"
       >
         <label
-          class="pf-c-form__label"
+          class="pf-v5-c-form__label"
           for="id"
         >
           <span
-            class="pf-c-form__label-text"
+            class="pf-v5-c-form__label-text"
           >
             <h1>
               Header
@@ -180,13 +180,13 @@ exports[`FormGroup should render form group with additonal label info 1`] = `
          
       </div>
       <div
-        class="pf-c-form__group-label-info"
+        class="pf-v5-c-form__group-label-info"
       >
         more info
       </div>
     </div>
     <div
-      class="pf-c-form__group-control"
+      class="pf-v5-c-form__group-control"
     >
       <input
         aria-label="input"
@@ -199,21 +199,21 @@ exports[`FormGroup should render form group with additonal label info 1`] = `
 exports[`FormGroup should render horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
-    class="pf-c-form pf-m-horizontal"
+    class="pf-v5-c-form pf-m-horizontal"
     novalidate=""
   >
     <div
-      class="pf-c-form__group"
+      class="pf-v5-c-form__group"
     >
       <div
-        class="pf-c-form__group-label"
+        class="pf-v5-c-form__group-label"
       >
         <label
-          class="pf-c-form__label"
+          class="pf-v5-c-form__label"
           for="label-id"
         >
           <span
-            class="pf-c-form__label-text"
+            class="pf-v5-c-form__label-text"
           >
             label
           </span>
@@ -221,7 +221,7 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
          
       </div>
       <div
-        class="pf-c-form__group-control"
+        class="pf-v5-c-form__group-control"
       >
         <input
           id="label-id"
@@ -235,21 +235,21 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
 exports[`FormGroup should render stacked horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
-    class="pf-c-form pf-m-horizontal"
+    class="pf-v5-c-form pf-m-horizontal"
     novalidate=""
   >
     <div
-      class="pf-c-form__group"
+      class="pf-v5-c-form__group"
     >
       <div
-        class="pf-c-form__group-label"
+        class="pf-v5-c-form__group-label"
       >
         <label
-          class="pf-c-form__label"
+          class="pf-v5-c-form__label"
           for="label-id"
         >
           <span
-            class="pf-c-form__label-text"
+            class="pf-v5-c-form__label-text"
           >
             label
           </span>
@@ -257,7 +257,7 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
          
       </div>
       <div
-        class="pf-c-form__group-control pf-m-stack"
+        class="pf-v5-c-form__group-control pf-m-stack"
       >
         <input
           id="label-id"

package/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`FormHelperText LoginFooterItem  with custom node 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__helper-text"
+    class="pf-v5-c-form__helper-text"
   >
     <div>
       My custom node
@@ -15,7 +15,7 @@ exports[`FormHelperText LoginFooterItem  with custom node 1`] = `
 exports[`FormHelperText className is added to the root element 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__helper-text extra-class"
+    class="pf-v5-c-form__helper-text extra-class"
   >
     test
   </div>
@@ -25,7 +25,7 @@ exports[`FormHelperText className is added to the root element 1`] = `
 exports[`FormHelperText renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__helper-text"
+    class="pf-v5-c-form__helper-text"
   >
     test
   </div>

package/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Check form section example against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-form__section"
+    class="pf-v5-c-form__section"
     role="group"
   />
 </DocumentFragment>
@@ -13,11 +13,11 @@ exports[`Check form section example with title 1`] = `
 <DocumentFragment>
   <section
     aria-labelledby="pf-form-section-title1"
-    class="pf-c-form__section"
+    class="pf-v5-c-form__section"
     role="group"
   >
     <h4
-      class="pf-c-form__section-title"
+      class="pf-v5-c-form__section-title"
       id="pf-form-section-title1"
     >
       Title

package/src/components/Form/examples/FormBasic.tsx

@@ -68,7 +68,7 @@ export const FormBasic: React.FunctionComponent = () => {
               aria-label="More info for name field"
               onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-01"
-              className="pf-c-form__group-label-help"
+              className="pf-v5-c-form__group-label-help"
             >
               <HelpIcon />
             </button>

package/src/components/Form/examples/FormGroupLabelInfo.tsx

@@ -55,7 +55,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
               aria-label="More info for name field"
               onClick={(e) => e.preventDefault()}
               aria-describedby="form-group-label-info"
-              className="pf-c-form__group-label-help"
+              className="pf-v5-c-form__group-label-help"
             >
               <HelpIcon />
             </button>

package/src/components/Form/examples/FormLimitWidth.tsx

@@ -68,7 +68,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
               aria-label="More info for name field"
               onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-02"
-              className="pf-c-form__group-label-help"
+              className="pf-v5-c-form__group-label-help"
             >
               <HelpIcon />
             </button>

package/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
   <select
     aria-invalid="false"
     aria-label="disabled FormSelect"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
     data-ouia-component-type="PF4/FormSelect"
     data-ouia-safe="true"
@@ -26,7 +26,7 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
   <select
     aria-invalid="false"
     aria-label="label"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
     data-ouia-component-type="PF4/FormSelect"
     data-ouia-safe="true"
@@ -46,7 +46,7 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
   <select
     aria-invalid="false"
     aria-label="label"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
     data-ouia-component-type="PF4/FormSelect"
     data-ouia-safe="true"
@@ -66,7 +66,7 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
 <DocumentFragment>
   <select
     aria-invalid="false"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
     data-ouia-component-type="PF4/FormSelect"
     data-ouia-safe="true"
@@ -86,7 +86,7 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
   <select
     aria-invalid="false"
     aria-label="grouped FormSelect"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
     data-ouia-component-type="PF4/FormSelect"
     data-ouia-safe="true"
@@ -152,7 +152,7 @@ exports[`FormSelect Simple FormSelect input 1`] = `
   <select
     aria-invalid="false"
     aria-label="simple FormSelect"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
     data-ouia-component-type="PF4/FormSelect"
     data-ouia-safe="true"
@@ -210,7 +210,7 @@ exports[`FormSelect invalid FormSelect input 1`] = `
   <select
     aria-invalid="true"
     aria-label="invalid FormSelect"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
     data-ouia-component-type="PF4/FormSelect"
     data-ouia-safe="true"
@@ -230,7 +230,7 @@ exports[`FormSelect validated success FormSelect input 1`] = `
   <select
     aria-invalid="false"
     aria-label="validated FormSelect"
-    class="pf-c-form-control pf-m-success"
+    class="pf-v5-c-form-control pf-m-success"
     data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
     data-ouia-component-type="PF4/FormSelect"
     data-ouia-safe="true"
@@ -250,7 +250,7 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
   <select
     aria-invalid="false"
     aria-label="validated FormSelect"
-    class="pf-c-form-control pf-m-warning"
+    class="pf-v5-c-form-control pf-m-warning"
     data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
     data-ouia-component-type="PF4/FormSelect"
     data-ouia-safe="true"

package/src/components/HelperText/HelperTextItem.tsx

@@ -78,7 +78,7 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
 
       <span className={css(styles.helperTextItemText)}>
         {children}
-        {isDynamic && <span className="pf-u-screen-reader">: {screenReaderText};</span>}
+        {isDynamic && <span className="pf-v5-u-screen-reader">: {screenReaderText};</span>}
       </span>
     </Component>
   );