@patternfly/react-core 5.0.0-prerelease.2 → 5.0.0-prerelease.21

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`simple fileuploadfield 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
+          <span
             class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
           >
             <input
@@ -22,7 +22,7 @@ exports[`simple fileuploadfield 1`] = `
               aria-invalid="false"
               aria-label="Do something custom with this!"
               data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-              data-ouia-component-type="PF4/TextInput"
+              data-ouia-component-type="PF5/TextInput"
               data-ouia-safe="true"
               id="custom-file-upload-filename"
               name="custom-file-upload-filename"
@@ -31,7 +31,7 @@ exports[`simple fileuploadfield 1`] = `
               type="text"
               value=""
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -40,7 +40,7 @@ exports[`simple fileuploadfield 1`] = `
             aria-disabled="false"
             class="pf-v5-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-1"
-            data-ouia-component-type="PF4/Button"
+            data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
             id="custom-file-upload-browse-button"
             type="button"
@@ -55,7 +55,7 @@ exports[`simple fileuploadfield 1`] = `
             aria-disabled="false"
             class="pf-v5-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-2"
-            data-ouia-component-type="PF4/Button"
+            data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
             type="button"
           >
@@ -67,7 +67,7 @@ exports[`simple fileuploadfield 1`] = `
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <div
+      <span
         class="pf-v5-c-form-control pf-m-resize-vertical"
       >
         <textarea
@@ -77,7 +77,7 @@ exports[`simple fileuploadfield 1`] = `
           name="custom-file-upload"
           placeholder=""
         />
-      </div>
+      </span>
     </div>
     <p>
       A custom preview of the uploaded file can be passed as children

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

@@ -20,7 +20,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
           aria-labelledby="title-text-id2 form-field-group-toggle0"
           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-component-type="PF5/Button"
           data-ouia-safe="true"
           id="form-field-group-toggle0"
           type="button"
@@ -32,8 +32,10 @@ exports[`Check expandable form field group example against snapshot 1`] = `
               aria-hidden="true"
               class="pf-v5-svg"
               fill="currentColor"
+              height="1em"
               role="img"
               viewBox="0 0 256 512"
+              width="1em"
             >
               <path
                 d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -72,7 +74,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
           aria-disabled="false"
           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-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
         />
@@ -121,7 +123,7 @@ exports[`Check form field group example against snapshot 1`] = `
           aria-disabled="false"
           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-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
         />

package/src/components/FormControl/FormControlIcon.tsx

@@ -24,8 +24,8 @@ export const FormControlIcon = ({ status, customIcon, className, ...props }: For
   const StatusIcon = status && statusIcons[status];
 
   return (
-    <div className={css(styles.formControlIcon, status && styles.modifiers.status, className)} {...props}>
+    <span className={css(styles.formControlIcon, status && styles.modifiers.status, className)} {...props}>
       {customIcon || <StatusIcon />}
-    </div>
+    </span>
   );
 };

package/src/components/FormSelect/FormSelect.tsx

@@ -76,7 +76,7 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <div
+      <span
         className={css(
           styles.formControl,
           isDisabled && styles.modifiers.disabled,
@@ -96,13 +96,13 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
         >
           {children}
         </select>
-        <div className={css(styles.formControlUtilities)}>
+        <span className={css(styles.formControlUtilities)}>
           {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
-          <div className={css(styles.formControlToggleIcon)}>
+          <span className={css(styles.formControlToggleIcon)}>
             <CaretDownIcon />
-          </div>
-        </div>
-      </div>
+          </span>
+        </span>
+      </span>
     );
   }
 }

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

@@ -2,14 +2,14 @@
 
 exports[`FormSelect Disabled FormSelect input  1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-disabled"
   >
     <select
       aria-invalid="false"
       aria-label="disabled FormSelect"
       data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
-      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-component-type="PF5/FormSelect"
       data-ouia-safe="true"
       disabled=""
     >
@@ -20,39 +20,41 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
       aria-invalid="false"
       aria-label="label"
       data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
-      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-component-type="PF5/FormSelect"
       data-ouia-safe="true"
     >
       <option
@@ -62,39 +64,41 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with id does not generate console error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
       aria-invalid="false"
       aria-label="label"
       data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
-      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-component-type="PF5/FormSelect"
       data-ouia-safe="true"
       id="id"
     >
@@ -105,38 +109,40 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
       aria-invalid="false"
       data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
-      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-component-type="PF5/FormSelect"
       data-ouia-safe="true"
     >
       <option
@@ -146,39 +152,41 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect Grouped FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
       aria-invalid="false"
       aria-label="grouped FormSelect"
       data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
-      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-component-type="PF5/FormSelect"
       data-ouia-safe="true"
     >
       <optgroup
@@ -234,39 +242,41 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
         </option>
       </optgroup>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect Simple FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
       aria-invalid="false"
       aria-label="simple FormSelect"
       data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
-      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-component-type="PF5/FormSelect"
       data-ouia-safe="true"
     >
       <option
@@ -314,39 +324,41 @@ exports[`FormSelect Simple FormSelect input 1`] = `
         Other
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect invalid FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-error"
   >
     <select
       aria-invalid="true"
       aria-label="invalid FormSelect"
       data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
-      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-component-type="PF5/FormSelect"
       data-ouia-safe="true"
     >
       <option
@@ -356,54 +368,58 @@ exports[`FormSelect invalid FormSelect input 1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-      <div
+      </span>
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated success FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-success"
   >
     <select
       aria-invalid="false"
       aria-label="validated FormSelect"
       data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
-      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-component-type="PF5/FormSelect"
       data-ouia-safe="true"
     >
       <option
@@ -413,54 +429,58 @@ exports[`FormSelect validated success FormSelect input 1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
           />
         </svg>
-      </div>
-      <div
+      </span>
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated warning FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-warning"
   >
     <select
       aria-invalid="false"
       aria-label="validated FormSelect"
       data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
-      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-component-type="PF5/FormSelect"
       data-ouia-safe="true"
     >
       <option
@@ -470,40 +490,44 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 576 512"
+          width="1em"
         >
           <path
             d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-      <div
+      </span>
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 320 512"
+          width="1em"
         >
           <path
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;

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

@@ -30,8 +30,10 @@ exports[`HelperText dynamic helper text renders successfully 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 448 512"
+          width="1em"
         >
           <path
             d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
@@ -105,8 +107,10 @@ exports[`HelperText icon helper text renders properly 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"