@patternfly/react-core 6.0.0-alpha.4 → 6.0.0-alpha.41

package/src/components/FileUpload/FileUploadField.tsx

@@ -19,6 +19,10 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   'aria-label'?: string;
   /** Text for the browse button. */
   browseButtonText?: string;
+  /** ID or ID's of elements that describe the browse button. Typically this should refer
+   * to elements such as helper text when there are file restrictions.
+   */
+  browseButtonAriaDescribedby?: string;
   /** Additional children to render after (or instead of) the file preview. */
   children?: React.ReactNode;
   /** Additional classes added to the file upload field container element. */
@@ -37,6 +41,8 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   hideDefaultPreview?: boolean;
   /** Unique id for the text area. Also used to generate ids for accessible labels. */
   id: string;
+  /** Name property for the text input. */
+  name?: string;
   /** Flag to disable the clear button. */
   isClearButtonDisabled?: boolean;
   /** Flag to show if the field is disabled. */
@@ -84,6 +90,7 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
 
 export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   id,
+  name,
   type,
   value = '',
   filename = '',
@@ -105,6 +112,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   filenamePlaceholder = 'Drag a file here or browse to upload',
   filenameAriaLabel = filename ? 'Read only filename' : filenamePlaceholder,
   browseButtonText = 'Browse...',
+  browseButtonAriaDescribedby,
   clearButtonText = 'Clear',
   isClearButtonDisabled = !filename && !value,
   containerRef = null as React.Ref<HTMLDivElement>,
@@ -135,19 +143,18 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
               readOnlyVariant="default" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
               isDisabled={isDisabled}
               id={`${id}-filename`}
-              name={`${id}-filename`}
+              name={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}
+              aria-describedby={browseButtonAriaDescribedby}
             >
               {browseButtonText}
             </Button>
@@ -172,7 +179,6 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             resizeOrientation={TextAreResizeOrientation.vertical}
             validated={validated}
             id={id}
-            name={id}
             aria-label={ariaLabel}
             value={value as string}
             onChange={onTextAreaChange}

package/src/components/FileUpload/FileUploadHelperText.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
+import { css } from '@patternfly/react-styles';
+
+/** A container for helper text content. This sub-component should be passed as a child to
+ * the main file upload or file upload field component.
+ */
+
+export interface FileUploadHelperTextProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content to render inside the file upload helper text container. Typically this will be
+   * the helper text component.
+   */
+  children: React.ReactNode;
+  /** Additional classes added to the file upload helper text container element. */
+  className?: string;
+}
+
+export const FileUploadHelperText: React.FunctionComponent<FileUploadHelperTextProps> = ({
+  children,
+  className,
+  ...props
+}: FileUploadHelperTextProps) => (
+  <div className={css(`${styles.fileUpload}__helper-text`, className)} {...props}>
+    {children}
+  </div>
+);
+FileUploadHelperText.displayName = 'FileUploadHelperText';

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

@@ -1,6 +1,6 @@
 import { FileUploadField } from '../FileUploadField';
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
@@ -25,3 +25,19 @@ test('simple fileuploadfield', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders without aria-describedby on browse button by default', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" />);
+
+  expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAccessibleDescription();
+});
+
+test('Renders without aria-describedby on browse button by default', () => {
+  render(
+    <FileUploadField id="file-upload-field" browseButtonText="Upload" browseButtonAriaDescribedby="helper-text">
+      <div id="helper-text">Helper text</div>
+    </FileUploadField>
+  );
+
+  expect(screen.getByRole('button', { name: 'Upload' })).toHaveAccessibleDescription('Helper text');
+});

package/src/components/FileUpload/__tests__/FileUploadHelperText.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { FileUploadHelperText } from '../FileUploadHelperText';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
+
+test(`Renders only with class ${styles.fileUpload}__helper-text by default`, () => {
+  render(<FileUploadHelperText>Content</FileUploadHelperText>);
+
+  expect(screen.getByText('Content')).toHaveClass(`${styles.fileUpload}__helper-text`, { exact: true });
+});
+
+test(`Renders with custom class when className is passed in`, () => {
+  render(<FileUploadHelperText className="test">Content</FileUploadHelperText>);
+
+  expect(screen.getByText('Content')).toHaveClass('test');
+});
+
+test(`Spreads props when passed in`, () => {
+  render(<FileUploadHelperText id="test-id">Content</FileUploadHelperText>);
+
+  expect(screen.getByText('Content')).toHaveAttribute('id', 'test-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<FileUploadHelperText>Content</FileUploadHelperText>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -3,23 +3,22 @@
 exports[`simple fileupload 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-file-upload"
+    class="pf-v6-c-file-upload"
     role="presentation"
   >
     <div
-      class="pf-v5-c-file-upload__file-select"
+      class="pf-v6-c-file-upload__file-select"
     >
       <div
-        class="pf-v5-c-input-group"
+        class="pf-v6-c-input-group"
       >
         <div
-          class="pf-v5-c-input-group__item pf-m-fill"
+          class="pf-v6-c-input-group__item pf-m-fill"
         >
           <span
-            class="pf-v5-c-form-control pf-m-readonly"
+            class="pf-v6-c-form-control pf-m-readonly"
           >
             <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"
@@ -35,26 +34,25 @@ exports[`simple fileupload 1`] = `
           </span>
         </div>
         <div
-          class="pf-v5-c-input-group__item"
+          class="pf-v6-c-input-group__item"
         >
           <button
             aria-disabled="false"
-            class="pf-v5-c-button pf-m-control"
+            class="pf-v6-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"
+          class="pf-v6-c-input-group__item"
         >
           <button
             aria-disabled="true"
-            class="pf-v5-c-button pf-m-control pf-m-disabled"
+            class="pf-v6-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"
@@ -67,16 +65,15 @@ exports[`simple fileupload 1`] = `
       </div>
     </div>
     <div
-      class="pf-v5-c-file-upload__file-details"
+      class="pf-v6-c-file-upload__file-details"
     >
       <span
-        class="pf-v5-c-form-control pf-m-resize-vertical"
+        class="pf-v6-c-form-control pf-m-resize-vertical"
       >
         <textarea
           aria-invalid="false"
           aria-label="File upload"
           id="simple-text-file"
-          name="simple-text-file"
           placeholder=""
         />
       </span>

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

@@ -3,22 +3,21 @@
 exports[`simple fileuploadfield 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-file-upload"
+    class="pf-v6-c-file-upload"
   >
     <div
-      class="pf-v5-c-file-upload__file-select"
+      class="pf-v6-c-file-upload__file-select"
     >
       <div
-        class="pf-v5-c-input-group"
+        class="pf-v6-c-input-group"
       >
         <div
-          class="pf-v5-c-input-group__item pf-m-fill"
+          class="pf-v6-c-input-group__item pf-m-fill"
         >
           <span
-            class="pf-v5-c-form-control pf-m-readonly"
+            class="pf-v6-c-form-control pf-m-readonly"
           >
             <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"
@@ -34,26 +33,25 @@ exports[`simple fileuploadfield 1`] = `
           </span>
         </div>
         <div
-          class="pf-v5-c-input-group__item"
+          class="pf-v6-c-input-group__item"
         >
           <button
             aria-disabled="false"
-            class="pf-v5-c-button pf-m-control"
+            class="pf-v6-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"
+          class="pf-v6-c-input-group__item"
         >
           <button
             aria-disabled="false"
-            class="pf-v5-c-button pf-m-control"
+            class="pf-v6-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-2"
             data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
@@ -65,16 +63,15 @@ exports[`simple fileuploadfield 1`] = `
       </div>
     </div>
     <div
-      class="pf-v5-c-file-upload__file-details"
+      class="pf-v6-c-file-upload__file-details"
     >
       <span
-        class="pf-v5-c-form-control pf-m-resize-vertical"
+        class="pf-v6-c-form-control pf-m-resize-vertical"
       >
         <textarea
           aria-invalid="false"
           aria-label="File upload"
           id="custom-file-upload"
-          name="custom-file-upload"
           placeholder=""
         />
       </span>

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-file-upload__helper-text"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

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

@@ -7,6 +7,7 @@ subsection: file-upload
 ---
 
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 ## Examples
 
@@ -22,11 +23,18 @@ Pressing _Clear_ button triggers `onClearClick` event.
 ```ts file="./FileUploadSimpleText.tsx"
 ```
 
-A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `allowEditingUploadedText` prop.
-Typing/pasting text in the box will call `onTextChange` with a string, and a string value is expected for the `value` prop. :
+### With helper text
+
+You can pass in the `<FileUploadHelperText` sub-component via the `children` property to `<FileUpload>`.
+
+```ts file="./FileUploadWithHelperText.tsx"
+```
 
 ### Text file with edits allowed
 
+A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `allowEditingUploadedText` prop.
+Typing/pasting text in the box will call `onTextChange` with a string, and a string value is expected for the `value` prop. :
+
 ```ts file="./FileUploadTextWithEdits.tsx"
 ```
 

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = React.useState<File>();
@@ -29,7 +28,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
       browseButtonText="Upload"
     >
       {value && (
-        <div className={spacing.mMd}>
+        <div>
           <FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
           {value.name}
         </div>

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUploadField, Checkbox } from '@patternfly/react-core';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Checkbox } from '@patternfly/react-core';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const properties = [
@@ -9,7 +8,8 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     'isDragActive',
     'isLoading',
     'hideDefaultPreview',
-    'children',
+    'hasCustomFilePreview',
+    'hasHelperText',
     'hasPlaceholderText'
   ];
 
@@ -19,7 +19,8 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [isLoading, setIsLoading] = React.useState(false);
   const [isDragActive, setIsDragActive] = React.useState(false);
   const [hideDefaultPreview, setHideDefaultPreview] = React.useState(false);
-  const [children, setChildren] = React.useState(false);
+  const [hasCustomFilePreview, setHasCustomFilePreview] = React.useState(false);
+  const [hasHelperText, setHasHelperText] = React.useState(false);
   const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
   const [checkedState, setCheckedState] = React.useState([
     filename,
@@ -27,7 +28,8 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     isLoading,
     isDragActive,
     hideDefaultPreview,
-    children,
+    hasCustomFilePreview,
+    hasHelperText,
     hasPlaceholderText
   ]);
 
@@ -68,8 +70,12 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         }
         break;
 
-      case 'children':
-        checked ? setChildren(true) : setChildren(false);
+      case 'hasCustomFilePreview':
+        checked ? setHasCustomFilePreview(true) : setHasCustomFilePreview(false);
+        break;
+
+      case 'hasHelperText':
+        checked ? setHasHelperText(true) : setHasHelperText(false);
         break;
 
       case 'hasPlaceholderText':
@@ -108,10 +114,16 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         isDragActive={isDragActive}
         hideDefaultPreview={hideDefaultPreview}
         browseButtonText="Upload"
+        browseButtonAriaDescribedby={hasHelperText ? 'custom-upload-helpText' : undefined}
         textAreaPlaceholder={hasPlaceholderText ? 'File preview' : ''}
       >
-        {children && (
-          <div className={spacing.mMd}>(A custom preview of the uploaded file can be passed as children)</div>
+        {hasCustomFilePreview && <div>(A custom preview of the uploaded file can be passed as children)</div>}
+        {hasHelperText && (
+          <FileUploadHelperText>
+            <HelperText>
+              <HelperTextItem id="custom-upload-helpText">Upload a CSV file</HelperTextItem>
+            </HelperText>
+          </FileUploadHelperText>
         )}
       </FileUploadField>
     </div>

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import {
   FileUpload,
+  FileUploadHelperText,
   Form,
   FormGroup,
-  FormHelperText,
   HelperText,
   HelperTextItem,
-  DropEvent
+  DropEvent,
+  Icon
 } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
@@ -68,14 +70,25 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           }}
           validated={isRejected ? 'error' : 'default'}
           browseButtonText="Upload"
-        />
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem variant={isRejected ? 'error' : 'default'}>
-              {isRejected ? 'Must be a CSV file no larger than 1 KB' : 'Upload a CSV file'}
-            </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
+          browseButtonAriaDescribedby="restricted-file-example-helpText"
+        >
+          <FileUploadHelperText>
+            <HelperText isLiveRegion>
+              <HelperTextItem id="restricted-file-example-helpText" variant={isRejected ? 'error' : 'default'}>
+                {isRejected ? (
+                  <>
+                    <Icon status="danger">
+                      <ExclamationCircleIcon />
+                    </Icon>
+                    Must be a CSV file no larger than 1 KB
+                  </>
+                ) : (
+                  'Upload a CSV file'
+                )}
+              </HelperTextItem>
+            </HelperText>
+          </FileUploadHelperText>
+        </FileUpload>
       </FormGroup>
     </Form>
   );

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { FileUpload, FileUploadHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core';
+
+export const FileUploadWithHelperText: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [filename, setFilename] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleFileInputChange = (_, file: File) => {
+    setFilename(file.name);
+  };
+
+  const handleTextChange = (_event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => {
+    setValue(value);
+  };
+
+  const handleDataChange = (_event: DropEvent, value: string) => {
+    setValue(value);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+  };
+
+  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) => {
+    setIsLoading(true);
+  };
+
+  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) => {
+    setIsLoading(false);
+  };
+
+  return (
+    <FileUpload
+      id="file-upload-helper-text"
+      type="text"
+      value={value}
+      filename={filename}
+      filenamePlaceholder="Drag and drop a file or upload one"
+      onFileInputChange={handleFileInputChange}
+      onDataChange={handleDataChange}
+      onTextChange={handleTextChange}
+      onReadStarted={handleFileReadStarted}
+      onReadFinished={handleFileReadFinished}
+      onClearClick={handleClear}
+      isLoading={isLoading}
+      allowEditingUploadedText={false}
+      browseButtonText="Upload"
+      browseButtonAriaDescribedby="helper-text-example-helpText"
+    >
+      <FileUploadHelperText>
+        <HelperText>
+          <HelperTextItem id="helper-text-example-helpText">Upload a CSV file</HelperTextItem>
+        </HelperText>
+      </FileUploadHelperText>
+    </FileUpload>
+  );
+};

package/src/components/FileUpload/index.ts

@@ -1,2 +1,3 @@
 export * from './FileUploadField';
 export * from './FileUpload';
+export * from './FileUploadHelperText';

package/src/components/Form/FormAlert.tsx

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

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-v5-c-form__group pf-m-action"
+    class="pf-v6-c-form__group pf-m-action"
   >
     <div
-      class="pf-v5-c-form__group-control"
+      class="pf-v6-c-form__group-control"
     >
       <div
-        class="pf-v5-c-form__actions"
+        class="pf-v6-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-v5-c-form pf-m-horizontal"
+    class="pf-v6-c-form pf-m-horizontal"
     novalidate=""
   >
     <div
-      class="pf-v5-c-form__group pf-m-action"
+      class="pf-v6-c-form__group pf-m-action"
     >
       <div
-        class="pf-v5-c-form__group-control"
+        class="pf-v6-c-form__group-control"
       >
         <div
-          class="pf-v5-c-form__actions"
+          class="pf-v6-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-v5-c-form"
+    class="pf-v6-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-v5-c-form pf-m-limit-width"
+    class="pf-v6-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-v5-c-form pf-m-horizontal"
+    class="pf-v6-c-form pf-m-horizontal"
     novalidate=""
   />
 </DocumentFragment>

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-v5-c-form__alert"
+    class="pf-v6-c-form__alert"
   />
 </DocumentFragment>
 `;