From 7e5bea53c5595565a6f5b7b3c6d374acbd528f24 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 8 Nov 2022 14:51:32 -0500
Subject: [PATCH 1/7] feat(MultipleFileUpload): added support for helper text

---
 .../MultipleFileUploadStatusItem.tsx          |  20 ++-
 .../MultipleFileUploadStatusItem.test.tsx     | 141 ++++++++++++++++++
 .../examples/MultipleFileUploadBasic.tsx      |  29 +++-
 3 files changed, 187 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
index 24f437facf9..78456a3e06c 100644
--- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/m
 import { css } from '@patternfly/react-styles';
 import { Progress } from '../Progress';
 import { Button } from '../Button';
+import { HelperText, HelperTextItem } from '../HelperText';
 import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 
@@ -54,6 +55,8 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
+  /** @beta Additional content related to the status item, intended to be dynamically rendered content such as status messages. */
+  helperText?: React.ReactNode;
 }
 
 export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileUploadStatusItemProps> = ({
@@ -75,6 +78,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressId,
   progressAriaLiveMessage,
   buttonAriaLabel = 'Remove from list',
+  helperText,
   ...props
 }: MultipleFileUploadStatusItemProps) => {
   const [loadPercentage, setLoadPercentage] = React.useState(0);
@@ -129,6 +133,9 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     return `${Math.round(size)}${prefixes[prefixUnit]}B`;
   };
 
+  const value = progressValue || loadPercentage;
+  const variant = progressVariant || loadResult;
+
   const title = (
     <span className={styles.multipleFileUploadStatusItemProgress}>
       <span className={styles.multipleFileUploadStatusItemProgressText}>{fileName || file?.name || ''}</span>
@@ -138,6 +145,14 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     </span>
   );
 
+  const helperTextVariant = variant === 'danger' ? 'error' : variant;
+
+  const statusItemHelperText = helperText && (
+    <HelperText isLiveRegion>
+      <HelperTextItem variant={helperTextVariant}>{helperText}</HelperTextItem>
+    </HelperText>
+  );
+
   return (
     <li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
       <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
@@ -151,11 +166,12 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
         </div>
         <Progress
           title={title}
-          value={progressValue || loadPercentage}
-          variant={progressVariant || loadResult}
+          value={value}
+          variant={variant}
           aria-label={progressAriaLabel}
           aria-labelledby={progressAriaLabelledBy}
           id={progressId}
+          helperText={statusItemHelperText}
         />
       </div>
       <div className={styles.multipleFileUploadStatusItemClose}>
diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
index 2b7b0a947c6..e0692990169 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
@@ -5,6 +5,8 @@ import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadStatusItem } from '../MultipleFileUploadStatusItem';
 import FileImageIcon from '@patternfly/react-icons/dist/esm/icons/file-image-icon';
 
+jest.mock('../../HelperText');
+
 describe('MultipleFileUploadStatusItem', () => {
   test('renders with expected class names', () => {
     const { asFragment } = render(<MultipleFileUploadStatusItem progressId="test-progress-id" />);
@@ -99,3 +101,142 @@ describe('MultipleFileUploadStatusItem', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+test('does not render helper text by default', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+    />
+  );
+
+  const helperText = screen.queryByText('Test helper text');
+
+  expect(helperText).not.toBeInTheDocument();
+});
+
+test('renders helper text', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+      helperText="Test helper text"
+    />
+  );
+
+  const helperText = screen.getByText('Test helper text');
+
+  expect(helperText).toBeVisible();
+});
+
+test('renders the helper text inside of a HelperTextItem and HelperText component', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+      helperText="Test helper text"
+    />
+  );
+
+  const helperText = screen.getByText('Test helper text');
+  const helperTextItemContainer = screen.getByTestId('helper-text-item-children-container');
+  const helperTextContainer = screen.getByTestId('helper-text-children-container');
+
+  expect(helperTextContainer).toContainElement(helperTextItemContainer);
+  expect(helperTextItemContainer).toContainElement(helperText);
+});
+
+test('renders the helper text with a variant of undefined when the progress variant is undefined', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+      helperText="Test helper text"
+    />
+  );
+
+  expect(screen.getByText('variant: undefined')).toBeVisible();
+});
+
+test('renders the helper text with a variant of success when the progress variant is success', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+      progressVariant="success"
+      helperText="Test helper text"
+    />
+  );
+
+  expect(screen.getByText('variant: success')).toBeVisible();
+});
+
+test('renders the helper text with a variant of warning when the progress variant is warning', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+      progressVariant="warning"
+      helperText="Test helper text"
+    />
+  );
+
+  expect(screen.getByText('variant: warning')).toBeVisible();
+});
+
+test('renders the helper text with a variant of error when the progress variant is danger', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+      progressVariant="danger"
+      helperText="Test helper text"
+    />
+  );
+
+  expect(screen.getByText('variant: error')).toBeVisible();
+});
+
+test('renders the helper text as a live region', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+      helperText="Test helper text"
+    />
+  );
+
+  expect(screen.getByText('isLiveRegion: true')).toBeVisible();
+});
diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
index f18a8ace5c9..868c63efa9f 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
@@ -17,6 +17,7 @@ interface readFile {
 
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   const [isHorizontal, setIsHorizontal] = React.useState(false);
+  const [fileUploadShouldFail, setFileUploadShouldFail] = React.useState(false);
   const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
   const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
   const [showStatus, setShowStatus] = React.useState(false);
@@ -53,6 +54,17 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     setReadFileData(newReadFiles);
   };
 
+  /** this function causes uploaded files to become corrupted if the corresponding option is selected in the example,
+   * only used in this example for demonstration purposes */
+  const updateCurrentFiles = (files: File[]) => {
+    if (fileUploadShouldFail) {
+      const corruptedFiles = files.map(file => ({ ...file, lastModified: ('foo' as unknown) as number }));
+      setCurrentFiles(prevFiles => [...prevFiles, ...corruptedFiles]);
+    } else {
+      setCurrentFiles(prevFiles => [...prevFiles, ...files]);
+    }
+  };
+
   // callback that will be called by the react dropzone with the newly dropped file objects
   const handleFileDrop = (droppedFiles: File[]) => {
     // identify what, if any, files are re-uploads of already uploaded files
@@ -63,7 +75,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
      * won't realize that the status items for the re-uploaded files needs to be re-rendered */
     Promise.resolve()
       .then(() => removeFiles(reUploads.map(file => file.name)))
-      .then(() => setCurrentFiles(prevFiles => [...prevFiles, ...droppedFiles]));
+      .then(() => updateCurrentFiles(droppedFiles));
   };
 
   // callback called by the status item when a file is successfully read with the built-in file reader
@@ -79,6 +91,14 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     ]);
   };
 
+  // add helper text to a status item showing any error encountered during the file reading process
+  const createHelperText = (file: File) => {
+    const fileResult = readFileData.find(readFile => readFile.fileName === file.name);
+    if (fileResult?.loadError) {
+      return fileResult.loadError.toString();
+    }
+  };
+
   const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;
 
   return (
@@ -108,6 +128,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
                 onClearClick={() => removeFiles([file.name])}
                 onReadSuccess={handleReadSuccess}
                 onReadFail={handleReadFail}
+                helperText={createHelperText(file)}
               />
             ))}
           </MultipleFileUploadStatus>
@@ -119,6 +140,12 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
         isChecked={isHorizontal}
         onChange={() => setIsHorizontal(!isHorizontal)}
       />
+      <Checkbox
+        id="upload-should-fail-checkbox"
+        label="Force uploads to fail"
+        isChecked={fileUploadShouldFail}
+        onChange={() => setFileUploadShouldFail(!fileUploadShouldFail)}
+      />
     </>
   );
 };

From b7d4201238b6f377ad8b02d8d08ed8b3388f1090 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 8 Nov 2022 17:19:30 -0500
Subject: [PATCH 2/7] adjusted verbiage

---
 .../MultipleFileUpload/examples/MultipleFileUploadBasic.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
index 868c63efa9f..77832133bb5 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
@@ -54,7 +54,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     setReadFileData(newReadFiles);
   };
 
-  /** this function causes uploaded files to become corrupted if the corresponding option is selected in the example,
+  /** this function forces uploaded files to become corrupted if "Demonstrate error state with helper text" is selected in the example,
    * only used in this example for demonstration purposes */
   const updateCurrentFiles = (files: File[]) => {
     if (fileUploadShouldFail) {
@@ -142,7 +142,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
       />
       <Checkbox
         id="upload-should-fail-checkbox"
-        label="Force uploads to fail"
+        label="Demonstrate error state with helper text"
         isChecked={fileUploadShouldFail}
         onChange={() => setFileUploadShouldFail(!fileUploadShouldFail)}
       />

From 87a9dc42f75405f57cd0a35e21266c1d6d272f79 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 8 Nov 2022 17:19:54 -0500
Subject: [PATCH 3/7] added example description

---
 .../MultipleFileUpload/examples/MultipleFileUpload.md       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
index c6c9474aa45..63709afdb3c 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
@@ -42,5 +42,11 @@ File upload - multiple is designed in a composable manner to make customization
 
 ### Basic
 
+The below example demonstrates a typical application of file upload - multiple, with a few tweaks from that typical application to enhance the convenience of the example.
+
+The "Show as horizontal" checkbox can be used to easily toggle the `isHorizontal` prop, showing our available styling variations.
+
+The "Demonstrate error state with helper text" checkbox shows how our `helperText` prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.
+
 ```ts file="./MultipleFileUploadBasic.tsx"
 ```

From f18dd6db90cc4dae27d4e60e5d49a90b9198d477 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 8 Nov 2022 17:37:21 -0500
Subject: [PATCH 4/7] adjusted prop name

---
 .../MultipleFileUploadStatusItem.tsx               |  8 ++++----
 .../MultipleFileUploadStatusItem.test.tsx          | 14 +++++++-------
 .../examples/MultipleFileUpload.md                 |  2 +-
 .../examples/MultipleFileUploadBasic.tsx           |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
index 78456a3e06c..8b5c0d42da7 100644
--- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
@@ -56,7 +56,7 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
   /** @beta Additional content related to the status item, intended to be dynamically rendered content such as status messages. */
-  helperText?: React.ReactNode;
+  progressHelperText?: React.ReactNode;
 }
 
 export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileUploadStatusItemProps> = ({
@@ -78,7 +78,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressId,
   progressAriaLiveMessage,
   buttonAriaLabel = 'Remove from list',
-  helperText,
+  progressHelperText,
   ...props
 }: MultipleFileUploadStatusItemProps) => {
   const [loadPercentage, setLoadPercentage] = React.useState(0);
@@ -147,9 +147,9 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
 
   const helperTextVariant = variant === 'danger' ? 'error' : variant;
 
-  const statusItemHelperText = helperText && (
+  const statusItemHelperText = progressHelperText && (
     <HelperText isLiveRegion>
-      <HelperTextItem variant={helperTextVariant}>{helperText}</HelperTextItem>
+      <HelperTextItem variant={helperTextVariant}>{progressHelperText}</HelperTextItem>
     </HelperText>
   );
 
diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
index e0692990169..7c408d46926 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
@@ -128,7 +128,7 @@ test('renders helper text', () => {
       progressAriaLabel="progressAriaLabel"
       progressAriaLabelledBy="progressAriaLabelledBy"
       progressId="test-progress-id"
-      helperText="Test helper text"
+      progressHelperText="Test helper text"
     />
   );
 
@@ -146,7 +146,7 @@ test('renders the helper text inside of a HelperTextItem and HelperText componen
       progressAriaLabel="progressAriaLabel"
       progressAriaLabelledBy="progressAriaLabelledBy"
       progressId="test-progress-id"
-      helperText="Test helper text"
+      progressHelperText="Test helper text"
     />
   );
 
@@ -167,7 +167,7 @@ test('renders the helper text with a variant of undefined when the progress vari
       progressAriaLabel="progressAriaLabel"
       progressAriaLabelledBy="progressAriaLabelledBy"
       progressId="test-progress-id"
-      helperText="Test helper text"
+      progressHelperText="Test helper text"
     />
   );
 
@@ -184,7 +184,7 @@ test('renders the helper text with a variant of success when the progress varian
       progressAriaLabelledBy="progressAriaLabelledBy"
       progressId="test-progress-id"
       progressVariant="success"
-      helperText="Test helper text"
+      progressHelperText="Test helper text"
     />
   );
 
@@ -201,7 +201,7 @@ test('renders the helper text with a variant of warning when the progress varian
       progressAriaLabelledBy="progressAriaLabelledBy"
       progressId="test-progress-id"
       progressVariant="warning"
-      helperText="Test helper text"
+      progressHelperText="Test helper text"
     />
   );
 
@@ -218,7 +218,7 @@ test('renders the helper text with a variant of error when the progress variant
       progressAriaLabelledBy="progressAriaLabelledBy"
       progressId="test-progress-id"
       progressVariant="danger"
-      helperText="Test helper text"
+      progressHelperText="Test helper text"
     />
   );
 
@@ -234,7 +234,7 @@ test('renders the helper text as a live region', () => {
       progressAriaLabel="progressAriaLabel"
       progressAriaLabelledBy="progressAriaLabelledBy"
       progressId="test-progress-id"
-      helperText="Test helper text"
+      progressHelperText="Test helper text"
     />
   );
 
diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
index 63709afdb3c..cb45330be87 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
@@ -46,7 +46,7 @@ The below example demonstrates a typical application of file upload - multiple,
 
 The "Show as horizontal" checkbox can be used to easily toggle the `isHorizontal` prop, showing our available styling variations.
 
-The "Demonstrate error state with helper text" checkbox shows how our `helperText` prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.
+The "Demonstrate error state with helper text" checkbox shows how our `progressHelperText` prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.
 
 ```ts file="./MultipleFileUploadBasic.tsx"
 ```
diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
index 77832133bb5..f379980f701 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
@@ -128,7 +128,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
                 onClearClick={() => removeFiles([file.name])}
                 onReadSuccess={handleReadSuccess}
                 onReadFail={handleReadFail}
-                helperText={createHelperText(file)}
+                progressHelperText={createHelperText(file)}
               />
             ))}
           </MultipleFileUploadStatus>

From 2f4afeebcdbcbfa0d9a070034bc8d34ab649013a Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 8 Nov 2022 17:39:42 -0500
Subject: [PATCH 5/7] adjusted forced error checkbox label

---
 .../MultipleFileUpload/examples/MultipleFileUpload.md           | 2 +-
 .../MultipleFileUpload/examples/MultipleFileUploadBasic.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
index cb45330be87..2f1c7116706 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md
@@ -46,7 +46,7 @@ The below example demonstrates a typical application of file upload - multiple,
 
 The "Show as horizontal" checkbox can be used to easily toggle the `isHorizontal` prop, showing our available styling variations.
 
-The "Demonstrate error state with helper text" checkbox shows how our `progressHelperText` prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.
+The "Demonstrate error reporting by forcing uploads to fail" checkbox shows how our `progressHelperText` prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.
 
 ```ts file="./MultipleFileUploadBasic.tsx"
 ```
diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
index f379980f701..3464b74d7fe 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
@@ -142,7 +142,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
       />
       <Checkbox
         id="upload-should-fail-checkbox"
-        label="Demonstrate error state with helper text"
+        label="Demonstrate error reporting by forcing uploads to fail"
         isChecked={fileUploadShouldFail}
         onChange={() => setFileUploadShouldFail(!fileUploadShouldFail)}
       />

From 0807143549c31b122292b403d93496e11acec6a9 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 8 Nov 2022 17:57:06 -0500
Subject: [PATCH 6/7] refactored to make helper text component fully consumer
 managed

---
 .../MultipleFileUploadStatusItem.tsx          |  13 +--
 .../MultipleFileUploadStatusItem.test.tsx     | 106 ------------------
 .../examples/MultipleFileUploadBasic.tsx      |  10 +-
 3 files changed, 10 insertions(+), 119 deletions(-)

diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
index 8b5c0d42da7..1794664c698 100644
--- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
@@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/m
 import { css } from '@patternfly/react-styles';
 import { Progress } from '../Progress';
 import { Button } from '../Button';
-import { HelperText, HelperTextItem } from '../HelperText';
 import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 
@@ -55,7 +54,7 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
-  /** @beta Additional content related to the status item, intended to be dynamically rendered content such as status messages. */
+  /** @beta Additional content related to the status item. */
   progressHelperText?: React.ReactNode;
 }
 
@@ -145,14 +144,6 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     </span>
   );
 
-  const helperTextVariant = variant === 'danger' ? 'error' : variant;
-
-  const statusItemHelperText = progressHelperText && (
-    <HelperText isLiveRegion>
-      <HelperTextItem variant={helperTextVariant}>{progressHelperText}</HelperTextItem>
-    </HelperText>
-  );
-
   return (
     <li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
       <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
@@ -171,7 +162,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           aria-label={progressAriaLabel}
           aria-labelledby={progressAriaLabelledBy}
           id={progressId}
-          helperText={statusItemHelperText}
+          helperText={progressHelperText}
         />
       </div>
       <div className={styles.multipleFileUploadStatusItemClose}>
diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
index 7c408d46926..7f59631f14c 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
@@ -5,8 +5,6 @@ import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadStatusItem } from '../MultipleFileUploadStatusItem';
 import FileImageIcon from '@patternfly/react-icons/dist/esm/icons/file-image-icon';
 
-jest.mock('../../HelperText');
-
 describe('MultipleFileUploadStatusItem', () => {
   test('renders with expected class names', () => {
     const { asFragment } = render(<MultipleFileUploadStatusItem progressId="test-progress-id" />);
@@ -136,107 +134,3 @@ test('renders helper text', () => {
 
   expect(helperText).toBeVisible();
 });
-
-test('renders the helper text inside of a HelperTextItem and HelperText component', () => {
-  const testFile = new File(['foo'], 'testFile.txt');
-  render(
-    <MultipleFileUploadStatusItem
-      file={testFile}
-      buttonAriaLabel="buttonAriaLabel"
-      progressAriaLabel="progressAriaLabel"
-      progressAriaLabelledBy="progressAriaLabelledBy"
-      progressId="test-progress-id"
-      progressHelperText="Test helper text"
-    />
-  );
-
-  const helperText = screen.getByText('Test helper text');
-  const helperTextItemContainer = screen.getByTestId('helper-text-item-children-container');
-  const helperTextContainer = screen.getByTestId('helper-text-children-container');
-
-  expect(helperTextContainer).toContainElement(helperTextItemContainer);
-  expect(helperTextItemContainer).toContainElement(helperText);
-});
-
-test('renders the helper text with a variant of undefined when the progress variant is undefined', () => {
-  const testFile = new File(['foo'], 'testFile.txt');
-  render(
-    <MultipleFileUploadStatusItem
-      file={testFile}
-      buttonAriaLabel="buttonAriaLabel"
-      progressAriaLabel="progressAriaLabel"
-      progressAriaLabelledBy="progressAriaLabelledBy"
-      progressId="test-progress-id"
-      progressHelperText="Test helper text"
-    />
-  );
-
-  expect(screen.getByText('variant: undefined')).toBeVisible();
-});
-
-test('renders the helper text with a variant of success when the progress variant is success', () => {
-  const testFile = new File(['foo'], 'testFile.txt');
-  render(
-    <MultipleFileUploadStatusItem
-      file={testFile}
-      buttonAriaLabel="buttonAriaLabel"
-      progressAriaLabel="progressAriaLabel"
-      progressAriaLabelledBy="progressAriaLabelledBy"
-      progressId="test-progress-id"
-      progressVariant="success"
-      progressHelperText="Test helper text"
-    />
-  );
-
-  expect(screen.getByText('variant: success')).toBeVisible();
-});
-
-test('renders the helper text with a variant of warning when the progress variant is warning', () => {
-  const testFile = new File(['foo'], 'testFile.txt');
-  render(
-    <MultipleFileUploadStatusItem
-      file={testFile}
-      buttonAriaLabel="buttonAriaLabel"
-      progressAriaLabel="progressAriaLabel"
-      progressAriaLabelledBy="progressAriaLabelledBy"
-      progressId="test-progress-id"
-      progressVariant="warning"
-      progressHelperText="Test helper text"
-    />
-  );
-
-  expect(screen.getByText('variant: warning')).toBeVisible();
-});
-
-test('renders the helper text with a variant of error when the progress variant is danger', () => {
-  const testFile = new File(['foo'], 'testFile.txt');
-  render(
-    <MultipleFileUploadStatusItem
-      file={testFile}
-      buttonAriaLabel="buttonAriaLabel"
-      progressAriaLabel="progressAriaLabel"
-      progressAriaLabelledBy="progressAriaLabelledBy"
-      progressId="test-progress-id"
-      progressVariant="danger"
-      progressHelperText="Test helper text"
-    />
-  );
-
-  expect(screen.getByText('variant: error')).toBeVisible();
-});
-
-test('renders the helper text as a live region', () => {
-  const testFile = new File(['foo'], 'testFile.txt');
-  render(
-    <MultipleFileUploadStatusItem
-      file={testFile}
-      buttonAriaLabel="buttonAriaLabel"
-      progressAriaLabel="progressAriaLabel"
-      progressAriaLabelledBy="progressAriaLabelledBy"
-      progressId="test-progress-id"
-      progressHelperText="Test helper text"
-    />
-  );
-
-  expect(screen.getByText('isLiveRegion: true')).toBeVisible();
-});
diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
index 3464b74d7fe..06dc7175e3c 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
@@ -4,7 +4,9 @@ import {
   MultipleFileUploadMain,
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
-  Checkbox
+  Checkbox,
+  HelperText,
+  HelperTextItem
 } from '@patternfly/react-core';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
@@ -95,7 +97,11 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   const createHelperText = (file: File) => {
     const fileResult = readFileData.find(readFile => readFile.fileName === file.name);
     if (fileResult?.loadError) {
-      return fileResult.loadError.toString();
+      return (
+        <HelperText isLiveRegion>
+          <HelperTextItem variant={'error'}>{fileResult.loadError.toString()}</HelperTextItem>
+        </HelperText>
+      );
     }
   };
 

From 229e405d6c780bb38f758a0901a5ea223bb73ca0 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
Date: Wed, 9 Nov 2022 10:05:55 -0500
Subject: [PATCH 7/7] Updated example comment

Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com>
---
 .../MultipleFileUpload/examples/MultipleFileUploadBasic.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
index 06dc7175e3c..7687f60b0ad 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
@@ -56,7 +56,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     setReadFileData(newReadFiles);
   };
 
-  /** this function forces uploaded files to become corrupted if "Demonstrate error state with helper text" is selected in the example,
+  /** Forces uploaded files to become corrupted if "Demonstrate error reporting by forcing uploads to fail" is selected in the example,
    * only used in this example for demonstration purposes */
   const updateCurrentFiles = (files: File[]) => {
     if (fileUploadShouldFail) {