@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

package/src/components/EmptyState/examples/EmptyStateSpinner.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { EmptyState, EmptyStateHeader, EmptyStateIcon, Spinner } from '@patternfly/react-core';
+import { EmptyState, Spinner } from '@patternfly/react-core';
 
 export const EmptyStateSpinner: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader titleText="Loading" headingLevel="h4" icon={<EmptyStateIcon icon={Spinner} />} />
-  </EmptyState>
+  <EmptyState titleText="Loading" headingLevel="h4" icon={Spinner} />
 );

package/src/components/EmptyState/examples/EmptyStateWithStatus.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateActions,
+  EmptyStateStatus,
+  Button
+} from '@patternfly/react-core';
+
+export const EmptyStateWithStatus: React.FunctionComponent = () => {
+  const [status, setStatus] = React.useState<EmptyStateStatus>(EmptyStateStatus.success);
+
+  const toggleStatus = () => {
+    interface StatusToggleMap {
+      [status: string]: EmptyStateStatus;
+    }
+
+    const statusToggleMap: StatusToggleMap = {
+      success: EmptyStateStatus.danger,
+      danger: EmptyStateStatus.warning,
+      warning: EmptyStateStatus.info,
+      info: EmptyStateStatus.custom,
+      custom: EmptyStateStatus.success
+    };
+
+    setStatus((prevStatus: EmptyStateStatus) => statusToggleMap[prevStatus]);
+  };
+
+  const titleMap = {
+    success: "You're all set",
+    danger: "You're not set",
+    warning: "You're probably not set",
+    info: 'You might be set',
+    custom: "You're custom"
+  };
+
+  return (
+    <EmptyState status={status} titleText={titleMap[status]} headingLevel="h4">
+      <EmptyStateBody>
+        This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible
+        enough to meet a variety of needs.
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="primary" onClick={toggleStatus}>
+            Toggle status
+          </Button>
+        </EmptyStateActions>
+        <EmptyStateActions>
+          <Button variant="link">Multiple</Button>
+          <Button variant="link">Action Buttons</Button>
+          <Button variant="link">Can</Button>
+          <Button variant="link">Go here</Button>
+          <Button variant="link">In the secondary</Button>
+          <Button variant="link">Action area</Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -31,8 +31,6 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
   toggleId?: string;
   /** Display size variant. Set to "lg" for disclosure styling. */
   displaySize?: 'default' | 'lg';
-  /** Forces active state. */
-  isActive?: boolean;
   /** Indicates the expandable section has a detached toggle. */
   isDetached?: boolean;
   /** Flag to indicate if the content is expanded. */
@@ -103,7 +101,6 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
     toggleTextCollapsed: '',
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onToggle: (event, isExpanded): void => undefined,
-    isActive: false,
     isDetached: false,
     displaySize: 'default',
     isWidthLimited: false,
@@ -182,8 +179,6 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   render() {
     const {
       onToggle: onToggleProp,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isActive,
       className,
       toggleText,
       toggleTextExpanded,
@@ -244,7 +239,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
             <AngleRightIcon aria-hidden />
           </span>
         )}
-        <span className={css(`${styles.expandableSection}__toggle-text`)}>{toggleContent || computedToggleText}</span>
+        <span className={css(styles.expandableSectionToggleText)}>{toggleContent || computedToggleText}</span>
       </button>
     );
 
@@ -253,7 +248,6 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
         className={css(
           styles.expandableSection,
           propOrStateIsExpanded && styles.modifiers.expanded,
-          isActive && styles.modifiers.active,
           displaySize === 'lg' && styles.modifiers.displayLg,
           isWidthLimited && styles.modifiers.limitWidth,
           isIndented && styles.modifiers.indented,

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -68,7 +68,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
           <AngleRightIcon aria-hidden />
         </span>
       )}
-      <span className={css(`${styles.expandableSection}__toggle-text`)}>{children}</span>
+      <span className={css(styles.expandableSectionToggleText)}>{children}</span>
     </button>
   </div>
 );

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

@@ -37,11 +37,15 @@ When passing the `isDetached` property into `<ExpandableSection>`, you must also
 
 ### Disclosure variation
 
+You can pass in the `displaySize="lg"` property for a disclosure variation styling.
+
 ```ts file="ExpandableSectionDisclosure.tsx"
 
 ```
 
-### Indented
+### Indented expandable content
+
+You can indent the expandable content by passing in the `isIndented` property. This will not affect the expandable toggle.
 
 ```ts file="ExpandableSectionIndented.tsx"
 

package/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx

@@ -1,21 +1,34 @@
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
+import React, { FormEvent } from 'react';
+import { ExpandableSection, Checkbox } from '@patternfly/react-core';
 
 export const ExpandableSectionIndented: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(true);
+  const [isDisplayLgChecked, setIsDisplayLgChecked] = React.useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
+  const onDisplaySizeCheck = (_event: FormEvent<HTMLInputElement>, checked: boolean) => setIsDisplayLgChecked(checked);
+
   return (
-    <ExpandableSection
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
-      onToggle={onToggle}
-      isExpanded={isExpanded}
-      isIndented
-    >
-      This content is visible only when the component is expanded.
-    </ExpandableSection>
+    <>
+      <Checkbox
+        id="displaySize-checkbox"
+        isChecked={isDisplayLgChecked}
+        label='displaySize="lg"'
+        onChange={onDisplaySizeCheck}
+      />
+      <br />
+      <ExpandableSection
+        toggleText={isExpanded ? 'Show less' : 'Show more'}
+        onToggle={onToggle}
+        isExpanded={isExpanded}
+        isIndented
+        displaySize={isDisplayLgChecked ? 'lg' : 'default'}
+      >
+        This content is visible only when the component is expanded.
+      </ExpandableSection>
+    </>
   );
 };

package/src/components/FileUpload/FileUpload.tsx

@@ -16,6 +16,10 @@ export interface FileUploadProps
   '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 container element. */

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

@@ -19,7 +19,6 @@ exports[`simple fileupload 1`] = `
             class="pf-v5-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"
@@ -43,7 +42,6 @@ exports[`simple fileupload 1`] = `
             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...
@@ -76,7 +74,6 @@ exports[`simple fileupload 1`] = `
           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

@@ -18,7 +18,6 @@ exports[`simple fileuploadfield 1`] = `
             class="pf-v5-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"
@@ -42,7 +41,6 @@ exports[`simple fileuploadfield 1`] = `
             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...
@@ -74,7 +72,6 @@ exports[`simple fileuploadfield 1`] = `
           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-v5-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';