@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -1,7 +1,7 @@
 ---
 id: Dual list selector
 section: components
-cssPrefix: 'pf-c-dual-list-selector'
+cssPrefix: 'pf-v5-c-dual-list-selector'
 propComponents:
   [
     'DualListSelector',

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -27,10 +27,10 @@ export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> =
   icon,
   ...props
 }: EmptyStateHeaderProps) => (
-  <div className={css('pf-c-empty-state__header', className)} {...props}>
+  <div className={css('pf-v5-c-empty-state__header', className)} {...props}>
     {icon}
     {(titleText || children) && (
-      <div className={css('pf-c-empty-state__title')}>
+      <div className={css('pf-v5-c-empty-state__title')}>
         {titleText && (
           <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
         )}

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap

@@ -11,8 +11,10 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
       aria-labelledby="icon-title-0"
       class="pf-v5-svg ''"
       fill="currentColor"
+      height="1em"
       role="img"
       viewBox="0 0 448 512"
+      width="1em"
     >
       <title
         id="icon-title-0"

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

@@ -9,10 +9,10 @@ exports[`EmptyState Full height 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -29,7 +29,7 @@ exports[`EmptyState Full height 1`] = `
 exports[`EmptyState Header with icon 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__header"
+    class="pf-v5-c-empty-state__header"
   >
     <div
       class="pf-v5-c-empty-state__icon"
@@ -38,8 +38,10 @@ exports[`EmptyState Header with icon 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 448 512"
+        width="1em"
       >
         <path
           d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"
@@ -59,10 +61,10 @@ exports[`EmptyState Main 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -86,7 +88,7 @@ exports[`EmptyState Main 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"
           >
@@ -101,7 +103,7 @@ exports[`EmptyState Main 1`] = `
             aria-label="learn more action"
             class="pf-v5-c-button pf-m-link"
             data-ouia-component-id="OUIA-Generated-Button-link-1"
-            data-ouia-component-type="PF4/Button"
+            data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
             type="button"
           >
@@ -123,10 +125,10 @@ exports[`EmptyState Main variant large 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -149,10 +151,10 @@ exports[`EmptyState Main variant small 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -175,10 +177,10 @@ exports[`EmptyState Main variant xs 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"

package/src/components/EmptyState/examples/EmptyState.md

@@ -1,7 +1,7 @@
 ---
 id: Empty state
 section: components
-cssPrefix: pf-c-empty-state
+cssPrefix: pf-v5-c-empty-state
 propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';

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

@@ -28,8 +28,10 @@ exports[`Detached ExpandableSection renders successfully 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"
@@ -62,8 +64,10 @@ exports[`Disclosure ExpandableSection 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"
@@ -101,8 +105,10 @@ exports[`ExpandableSection 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"
@@ -141,8 +147,10 @@ exports[`Renders ExpandableSection expanded 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"
@@ -180,8 +188,10 @@ exports[`Renders ExpandableSection indented 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"
@@ -218,8 +228,10 @@ exports[`Renders Uncontrolled ExpandableSection 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"

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -1,7 +1,7 @@
 ---
 id: Expandable section
 section: components
-cssPrefix: pf-c-expandable-section
+cssPrefix: pf-v5-c-expandable-section
 propComponents: ['ExpandableSection', 'ExpandableSectionToggle']
 ---
 

package/src/components/FileUpload/FileUpload.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { DropEvent, DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
+import { DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
 import { FileUploadField, FileUploadFieldProps } from './FileUploadField';
 import { readFile, fileReaderType } from '../../helpers/fileUtils';
+import { DropEvent } from '../../helpers/typeUtils';
 import { fromEvent } from 'file-selector';
 
 export interface FileUploadProps

package/src/components/FileUpload/FileUploadField.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
 import { css } from '@patternfly/react-styles';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Button, ButtonVariant } from '../Button';
 import { TextArea, TextAreResizeOrientation } from '../TextArea';
@@ -130,31 +130,37 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
     >
       <div className={styles.fileUploadFileSelect}>
         <InputGroup>
-          <TextInput
-            isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
-            isDisabled={isDisabled}
-            id={`${id}-filename`}
-            name={`${id}-filename`}
-            aria-label={filenameAriaLabel}
-            placeholder={filenamePlaceholder}
-            aria-describedby={`${id}-browse-button`}
-            value={filename}
-          />
-          <Button
-            id={`${id}-browse-button`}
-            variant={ButtonVariant.control}
-            onClick={onBrowseButtonClick}
-            isDisabled={isDisabled}
-          >
-            {browseButtonText}
-          </Button>
-          <Button
-            variant={ButtonVariant.control}
-            isDisabled={isDisabled || isClearButtonDisabled}
-            onClick={onClearButtonClick}
-          >
-            {clearButtonText}
-          </Button>
+          <InputGroupItem isFill>
+            <TextInput
+              readOnlyVariant="plain" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
+              isDisabled={isDisabled}
+              id={`${id}-filename`}
+              name={`${id}-filename`}
+              aria-label={filenameAriaLabel}
+              placeholder={filenamePlaceholder}
+              aria-describedby={`${id}-browse-button`}
+              value={filename}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              id={`${id}-browse-button`}
+              variant={ButtonVariant.control}
+              onClick={onBrowseButtonClick}
+              isDisabled={isDisabled}
+            >
+              {browseButtonText}
+            </Button>
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              variant={ButtonVariant.control}
+              isDisabled={isDisabled || isClearButtonDisabled}
+              onClick={onClearButtonClick}
+            >
+              {clearButtonText}
+            </Button>
+          </InputGroupItem>
         </InputGroup>
       </div>
       <div className={styles.fileUploadFileDetails}>

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

@@ -12,56 +12,74 @@ exports[`simple fileupload 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-describedby="simple-text-file-browse-button"
-          aria-invalid="false"
-          aria-label="Drag a file here or browse to upload"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="simple-text-file-filename"
-          name="simple-text-file-filename"
-          placeholder="Drag a file here or browse to upload"
-          readonly=""
-          type="text"
-          value=""
-        />
-        <button
-          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-safe="true"
-          id="simple-text-file-browse-button"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          Browse...
-        </button>
-        <button
-          aria-disabled="true"
-          class="pf-v5-c-button pf-m-control pf-m-disabled"
-          data-ouia-component-id="OUIA-Generated-Button-control-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
+          <div
+            class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+          >
+            <input
+              aria-describedby="simple-text-file-browse-button"
+              aria-invalid="false"
+              aria-label="Drag a file here or browse to upload"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF5/TextInput"
+              data-ouia-safe="true"
+              id="simple-text-file-filename"
+              name="simple-text-file-filename"
+              placeholder="Drag a file here or browse to upload"
+              readonly=""
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
         >
-          Clear
-        </button>
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-type="PF5/Button"
+            data-ouia-safe="true"
+            id="simple-text-file-browse-button"
+            type="button"
+          >
+            Browse...
+          </button>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-disabled="true"
+            class="pf-v5-c-button pf-m-control pf-m-disabled"
+            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-type="PF5/Button"
+            data-ouia-safe="true"
+            disabled=""
+            type="button"
+          >
+            Clear
+          </button>
+        </div>
       </div>
     </div>
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <textarea
-        aria-invalid="false"
-        aria-label="File upload"
+      <div
         class="pf-v5-c-form-control pf-m-resize-vertical"
-        id="simple-text-file"
-        name="simple-text-file"
-        placeholder=""
-      />
+      >
+        <textarea
+          aria-invalid="false"
+          aria-label="File upload"
+          id="simple-text-file"
+          name="simple-text-file"
+          placeholder=""
+        />
+      </div>
     </div>
     <input
       style="display: none;"

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

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

package/src/components/FileUpload/examples/FileUpload.md

@@ -1,6 +1,6 @@
 ---
 id: Simple file upload
-cssPrefix: pf-c-file-upload
+cssPrefix: pf-v5-c-file-upload
 propComponents: ['FileUpload', 'FileUploadField']
 section: components
 subsection: file-upload
@@ -71,3 +71,16 @@ Note that the `isLoading` prop is styled to position the spinner dead center abo
 
 ```ts file="./FileUploadCustomUpload.tsx"
 ```
+
+## Types
+
+File upload uses the `DropzoneOptions` type from react-dropzone. It is comprised of additional props with their own types. For more information on using `DropzoneOptions` visit [react-dropzone props and methods](https://react-dropzone.js.org/#src).
+
+Additionally, it calls the `onDataChange`, `onReadFailed`, `onReadFinished`, and `onReadStarted` callbacks with an event of type `DropEvent`. `DropEvent` is a union comprised of the following types:
+
+```noLive
+ React.DragEvent<HTMLElement>
+ | React.ChangeEvent<HTMLInputElement>
+ | DragEvent
+ | Event
+```

package/src/components/FileUpload/examples/FileUploadSimpleText.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
+import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const SimpleTextFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

package/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
+import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
+import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

package/src/components/Form/FormAlert.tsx

@@ -13,9 +13,9 @@ export const FormAlert: React.FunctionComponent<FormAlertProps> = ({
   className = '',
   ...props
 }: FormAlertProps) => (
-  // There are currently no associated styles with the pf-c-form_alert class.
+  // There are currently no associated styles with the pf-v5-c-form_alert class.
   // Therefore, it does not exist in react-styles
-  <div {...props} className={css('pf-c-form__alert', className)}>
+  <div {...props} className={css('pf-v5-c-form__alert', className)}>
     {children}
   </div>
 );

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

@@ -3,7 +3,7 @@
 exports[`Form Alert component should render form group required variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__alert"
+    class="pf-v5-c-form__alert"
   />
 </DocumentFragment>
 `;

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