@patternfly/react-core 4.198.16 → 4.198.19

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadMain.test.tsx.snap

@@ -1,5 +1,129 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MultipleFileUploadMain passes props to the info component as expected 1`] = `
+<MultipleFileUploadMain
+  infoText="info text"
+>
+  <div
+    className="pf-c-multiple-file-upload__main"
+  >
+    <MultipleFileUploadButton>
+      <div
+        className="pf-c-multiple-file-upload__upload"
+      >
+        <Button
+          onClick={[Function]}
+          variant="secondary"
+        >
+          <ButtonBase
+            innerRef={null}
+            onClick={[Function]}
+            variant="secondary"
+          >
+            <button
+              aria-disabled={false}
+              aria-label={null}
+              className="pf-c-button pf-m-secondary"
+              data-ouia-component-id="OUIA-Generated-Button-secondary-4"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe={true}
+              disabled={false}
+              onClick={[Function]}
+              role={null}
+              type="button"
+            >
+              Upload
+            </button>
+          </ButtonBase>
+        </Button>
+      </div>
+    </MultipleFileUploadButton>
+    <MultipleFileUploadInfo>
+      <div
+        className="pf-c-multiple-file-upload__info"
+      >
+        info text
+      </div>
+    </MultipleFileUploadInfo>
+  </div>
+</MultipleFileUploadMain>
+`;
+
+exports[`MultipleFileUploadMain passes props to the title as expected 1`] = `
+<MultipleFileUploadMain
+  titleIcon="icon"
+  titleText="title text"
+  titleTextSeparator="title test separator"
+>
+  <div
+    className="pf-c-multiple-file-upload__main"
+  >
+    <MultipleFileUploadTitle
+      icon="icon"
+      text="title text"
+      textSeparator="title test separator"
+    >
+      <div
+        className="pf-c-multiple-file-upload__title"
+      >
+        <MultipleFileUploadTitleIcon>
+          <div
+            className="pf-c-multiple-file-upload__title-icon"
+          >
+            icon
+          </div>
+        </MultipleFileUploadTitleIcon>
+        <MultipleFileUploadTitleText>
+          <div
+            className="pf-c-multiple-file-upload__title-text"
+          >
+            title text 
+            <MultipleFileUploadTitleTextSeparator>
+              <div
+                className="pf-c-multiple-file-upload__title-text-separator"
+              >
+                title test separator
+              </div>
+            </MultipleFileUploadTitleTextSeparator>
+          </div>
+        </MultipleFileUploadTitleText>
+      </div>
+    </MultipleFileUploadTitle>
+    <MultipleFileUploadButton>
+      <div
+        className="pf-c-multiple-file-upload__upload"
+      >
+        <Button
+          onClick={[Function]}
+          variant="secondary"
+        >
+          <ButtonBase
+            innerRef={null}
+            onClick={[Function]}
+            variant="secondary"
+          >
+            <button
+              aria-disabled={false}
+              aria-label={null}
+              className="pf-c-button pf-m-secondary"
+              data-ouia-component-id="OUIA-Generated-Button-secondary-3"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe={true}
+              disabled={false}
+              onClick={[Function]}
+              role={null}
+              type="button"
+            >
+              Upload
+            </button>
+          </ButtonBase>
+        </Button>
+      </div>
+    </MultipleFileUploadButton>
+  </div>
+</MultipleFileUploadMain>
+`;
+
 exports[`MultipleFileUploadMain renders custom class names 1`] = `
 <MultipleFileUploadMain
   className="test"
@@ -7,7 +131,37 @@ exports[`MultipleFileUploadMain renders custom class names 1`] = `
   <div
     className="pf-c-multiple-file-upload__main test"
   >
-    Foo
+    <MultipleFileUploadButton>
+      <div
+        className="pf-c-multiple-file-upload__upload"
+      >
+        <Button
+          onClick={[Function]}
+          variant="secondary"
+        >
+          <ButtonBase
+            innerRef={null}
+            onClick={[Function]}
+            variant="secondary"
+          >
+            <button
+              aria-disabled={false}
+              aria-label={null}
+              className="pf-c-button pf-m-secondary"
+              data-ouia-component-id="OUIA-Generated-Button-secondary-2"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe={true}
+              disabled={false}
+              onClick={[Function]}
+              role={null}
+              type="button"
+            >
+              Upload
+            </button>
+          </ButtonBase>
+        </Button>
+      </div>
+    </MultipleFileUploadButton>
   </div>
 </MultipleFileUploadMain>
 `;
@@ -17,7 +171,49 @@ exports[`MultipleFileUploadMain renders with expected class names 1`] = `
   <div
     className="pf-c-multiple-file-upload__main"
   >
-    Foo
+    <MultipleFileUploadButton>
+      <div
+        className="pf-c-multiple-file-upload__upload"
+      >
+        <Button
+          onClick={[Function]}
+          variant="secondary"
+        >
+          <ButtonBase
+            innerRef={null}
+            onClick={[Function]}
+            variant="secondary"
+          >
+            <button
+              aria-disabled={false}
+              aria-label={null}
+              className="pf-c-button pf-m-secondary"
+              data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe={true}
+              disabled={false}
+              onClick={[Function]}
+              role={null}
+              type="button"
+            >
+              Upload
+            </button>
+          </ButtonBase>
+        </Button>
+      </div>
+    </MultipleFileUploadButton>
+  </div>
+</MultipleFileUploadMain>
+`;
+
+exports[`MultipleFileUploadMain renders without the button when expected 1`] = `
+<MultipleFileUploadMain
+  isUploadButtonHidden={true}
+>
+  <div
+    className="pf-c-multiple-file-upload__main"
+  >
+    <Component />
   </div>
 </MultipleFileUploadMain>
 `;

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadTitle.test.tsx.snap

@@ -6,18 +6,76 @@ exports[`MultipleFileUploadTitle renders custom class names 1`] = `
 >
   <div
     className="pf-c-multiple-file-upload__title test"
-  >
-    Foo
-  </div>
+  />
 </MultipleFileUploadTitle>
 `;
 
 exports[`MultipleFileUploadTitle renders with expected class names 1`] = `
 <MultipleFileUploadTitle>
+  <div
+    className="pf-c-multiple-file-upload__title"
+  />
+</MultipleFileUploadTitle>
+`;
+
+exports[`MultipleFileUploadTitle renders with title icon 1`] = `
+<MultipleFileUploadTitle
+  icon="icon"
+>
+  <div
+    className="pf-c-multiple-file-upload__title"
+  >
+    <MultipleFileUploadTitleIcon>
+      <div
+        className="pf-c-multiple-file-upload__title-icon"
+      >
+        icon
+      </div>
+    </MultipleFileUploadTitleIcon>
+  </div>
+</MultipleFileUploadTitle>
+`;
+
+exports[`MultipleFileUploadTitle renders with title text 1`] = `
+<MultipleFileUploadTitle
+  text="text"
+>
+  <div
+    className="pf-c-multiple-file-upload__title"
+  >
+    <MultipleFileUploadTitleText>
+      <div
+        className="pf-c-multiple-file-upload__title-text"
+      >
+        text 
+      </div>
+    </MultipleFileUploadTitleText>
+  </div>
+</MultipleFileUploadTitle>
+`;
+
+exports[`MultipleFileUploadTitle renders with title text separator 1`] = `
+<MultipleFileUploadTitle
+  text="text"
+  textSeparator="text separator"
+>
   <div
     className="pf-c-multiple-file-upload__title"
   >
-    Foo
+    <MultipleFileUploadTitleText>
+      <div
+        className="pf-c-multiple-file-upload__title-text"
+      >
+        text 
+        <MultipleFileUploadTitleTextSeparator>
+          <div
+            className="pf-c-multiple-file-upload__title-text-separator"
+          >
+            text separator
+          </div>
+        </MultipleFileUploadTitleTextSeparator>
+      </div>
+    </MultipleFileUploadTitleText>
   </div>
 </MultipleFileUploadTitle>
 `;

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadTitleIcon.test.tsx.snap

@@ -6,32 +6,7 @@ exports[`MultipleFileUploadTitleIcon renders custom class names 1`] = `
 >
   <div
     className="pf-c-multiple-file-upload__title-icon test"
-  >
-    <UploadIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    >
-      <svg
-        aria-hidden={true}
-        aria-labelledby={null}
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style={
-          Object {
-            "verticalAlign": "-0.125em",
-          }
-        }
-        viewBox="0 0 512 512"
-        width="1em"
-      >
-        <path
-          d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-        />
-      </svg>
-    </UploadIcon>
-  </div>
+  />
 </MultipleFileUploadTitleIcon>
 `;
 
@@ -40,30 +15,7 @@ exports[`MultipleFileUploadTitleIcon renders with expected class names 1`] = `
   <div
     className="pf-c-multiple-file-upload__title-icon"
   >
-    <UploadIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    >
-      <svg
-        aria-hidden={true}
-        aria-labelledby={null}
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style={
-          Object {
-            "verticalAlign": "-0.125em",
-          }
-        }
-        viewBox="0 0 512 512"
-        width="1em"
-      >
-        <path
-          d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-        />
-      </svg>
-    </UploadIcon>
+    Foo
   </div>
 </MultipleFileUploadTitleIcon>
 `;

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -6,70 +6,22 @@ propComponents:
   [
     'MultipleFileUpload',
     'MultipleFileUploadMain',
-    'MultipleFileUploadTitle',
-    'MultipleFileUploadTitleIcon',
-    'MultipleFileUploadTitleText',
-    'MultipleFileUploadTitleTextSeparator',
-    'MultipleFileUploadButton',
-    'MultipleFileUploadInfo',
     'MultipleFileUploadStatus',
     'MultipleFileUploadStatusItem',
   ]
 beta: true
 ---
 
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 File upload - multiple is able to:
 
-- accept one or more files via browse or drag-and-drop
-- provide their data to you using file objects via the `onFileDrop` callback prop
-- read files as dataURLs, calling provided callbacks as needed when files start/finish being read, as well as when the read succeeds or fails
-- display (in real time) the upload progress/status of each file
-  - uploaded files are represented by the `MultipleFileUploadStatusItem` component, this component includes the aforementioned built-in file reading logic
-  - if you prefer to supply your own file reading logic and strictly use `MultipleFileUploadStatusItem` as a display component, the `customFileHandler`, `fileName`, `fileSize`, `progressValue`, and `progressVariant` props exist to allow you to do that
-
-### General intended structure
-
-File upload - multiple is designed in a composable manner to maximize flexibility. The general intended component relationships are arranged similarly to:
-
-```js noLive
-import {
-  MultipleFileUpload,
-  MultipleFileUploadInfo,
-  MultipleFileUploadMain,
-  MultipleFileUploadTitle,
-  MultipleFileUploadTitleIcon,
-  MultipleFileUploadTitleText,
-  MultipleFileUploadTitleTextSeparator,
-  MultipleFileUploadButton,
-  MultipleFileUploadStatus,
-  MultipleFileUploadStatusItem
-} from '@patternfly/react-core';
-
-<MultipleFileUpload>
-  <MultipleFileUploadMain>
-    <MultipleFileUploadTitle>
-      <MultipleFileUploadTitleIcon />
-
-      <MultipleFileUploadTitleText>
-        main title text
-        <MultipleFileUploadTitleTextSeparator>title text separator</MultipleFileUploadTitleTextSeparator>
-      </MultipleFileUploadTitleText>
-    </MultipleFileUploadTitle>
-
-    <MultipleFileUploadButton />
-
-    <MultipleFileUploadInfo>Accepted file types: x, y, z</MultipleFileUploadInfo>
-  </MultipleFileUploadMain>
-
-  <MultipleFileUploadStatus>
-    <MultipleFileUploadStatusItem />
-  </MultipleFileUploadStatus>
-</MultipleFileUpload>
-```
+- Accept one or more files via browse or drag-and-drop
+- Provide their data to you using file objects via the `onFileDrop` callback prop
+- Read files as dataURLs, calling provided callbacks as needed when files start/finish being read, as well as when the read succeeds or fails
+- Display (in real time) the upload progress/status of each file
+  - Uploaded files are represented by the multiple file upload status item component, this component includes the aforementioned built-in file reading logic
+  - If you prefer to supply your own file reading logic and strictly use multiple file upload status item as a display component, the `customFileHandler`, `fileName`, `fileSize`, `progressValue`, and `progressVariant` props exist to allow you to do that
 
 ### Restricting file size and type
 
@@ -85,8 +37,3 @@ Restricting file sizes and types in this way is for user convenience only, and i
 
 ```ts file="./MultipleFileUploadBasic.tsx"
 ```
-
-### Horizontal
-
-```ts file="./MultipleFileUploadHorizontal.tsx"
-```

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -1,20 +1,12 @@
 import React from 'react';
 import {
   MultipleFileUpload,
-  MultipleFileUploadInfo,
   MultipleFileUploadMain,
-  MultipleFileUploadTitle,
-  MultipleFileUploadTitleIcon,
-  MultipleFileUploadTitleText,
-  MultipleFileUploadTitleTextSeparator,
-  MultipleFileUploadButton,
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
-  Modal
+  Checkbox
 } from '@patternfly/react-core';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
   fileName: string;
@@ -24,10 +16,11 @@ interface readFile {
 }
 
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
+  const [isHorizontal, setIsHorizontal] = React.useState(false);
   const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
   const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
   const [showStatus, setShowStatus] = React.useState(false);
-  const [modalText, setModalText] = React.useState('');
+  const [statusIcon, setStatusIcon] = React.useState('inProgress');
 
   // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed
   if (!showStatus && currentFiles.length > 0) {
@@ -35,17 +28,15 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   }
 
   // determine the icon that should be shown for the overall status list
-  const getStatusIcon = () => {
+  React.useEffect(() => {
     if (readFileData.length < currentFiles.length) {
-      return <InProgressIcon />;
-    }
-
-    if (readFileData.every(file => file.loadResult === 'success')) {
-      return <CheckCircleIcon />;
+      setStatusIcon('inProgress');
+    } else if (readFileData.every(file => file.loadResult === 'success')) {
+      setStatusIcon('success');
+    } else {
+      setStatusIcon('danger');
     }
-
-    return <TimesCircleIcon />;
-  };
+  }, [readFileData, currentFiles]);
 
   // remove files from both state arrays based on their name
   const removeFiles = (namesOfFilesToRemove: string[]) => {
@@ -88,63 +79,46 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     ]);
   };
 
-  // dropzone prop that communicates to the user that files they've attempted to upload are not an appropriate type
-  const handleDropRejected = (files: File[], _event: React.DragEvent<HTMLElement>) => {
-    if (files.length === 1) {
-      setModalText(`${files[0].name} is not an accepted file type`);
-    } else {
-      const rejectedMessages = files.reduce((acc, file) => (acc += `${file.name}, `), '');
-      setModalText(`${rejectedMessages}are not accepted file types`);
-    }
-  };
-
   const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;
 
   return (
-    <MultipleFileUpload
-      onFileDrop={handleFileDrop}
-      dropzoneProps={{
-        accept: 'image/jpeg, application/msword, application/pdf, image/png',
-        onDropRejected: handleDropRejected
-      }}
-    >
-      <MultipleFileUploadMain>
-        <MultipleFileUploadTitle>
-          <MultipleFileUploadTitleIcon />
-          <MultipleFileUploadTitleText>
-            Drag and drop files here
-            <MultipleFileUploadTitleTextSeparator>or</MultipleFileUploadTitleTextSeparator>
-          </MultipleFileUploadTitleText>
-        </MultipleFileUploadTitle>
-        <MultipleFileUploadButton />
-        <MultipleFileUploadInfo>Accepted file types: JPEG, Doc, PDF, PNG</MultipleFileUploadInfo>
-      </MultipleFileUploadMain>
-      {showStatus && (
-        <MultipleFileUploadStatus
-          statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}
-          statusToggleIcon={getStatusIcon()}
-        >
-          {currentFiles.map(file => (
-            <MultipleFileUploadStatusItem
-              file={file}
-              key={file.name}
-              onClearClick={() => removeFiles([file.name])}
-              onReadSuccess={handleReadSuccess}
-              onReadFail={handleReadFail}
-            />
-          ))}
-        </MultipleFileUploadStatus>
-      )}
-      <Modal
-        isOpen={!!modalText}
-        title="Unsupported file"
-        titleIconVariant="warning"
-        showClose
-        aria-label="unsupported file upload attempted"
-        onClose={() => setModalText('')}
+    <>
+      <MultipleFileUpload
+        onFileDrop={handleFileDrop}
+        dropzoneProps={{
+          accept: 'image/jpeg, application/msword, application/pdf, image/png'
+        }}
+        isHorizontal={isHorizontal}
       >
-        {modalText}
-      </Modal>
-    </MultipleFileUpload>
+        <MultipleFileUploadMain
+          titleIcon={<UploadIcon />}
+          titleText="Drag and drop files here"
+          titleTextSeparator="or"
+          infoText="Accepted file types: JPEG, Doc, PDF, PNG"
+        />
+        {showStatus && (
+          <MultipleFileUploadStatus
+            statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}
+            statusToggleIcon={statusIcon}
+          >
+            {currentFiles.map(file => (
+              <MultipleFileUploadStatusItem
+                file={file}
+                key={file.name}
+                onClearClick={() => removeFiles([file.name])}
+                onReadSuccess={handleReadSuccess}
+                onReadFail={handleReadFail}
+              />
+            ))}
+          </MultipleFileUploadStatus>
+        )}
+      </MultipleFileUpload>
+      <Checkbox
+        id="horizontal-checkbox"
+        label="Show as horizontal"
+        isChecked={isHorizontal}
+        onChange={() => setIsHorizontal(!isHorizontal)}
+      />
+    </>
   );
 };

package/src/components/MultipleFileUpload/index.ts

@@ -1,10 +1,4 @@
 export * from './MultipleFileUpload';
-export * from './MultipleFileUploadInfo';
 export * from './MultipleFileUploadMain';
-export * from './MultipleFileUploadTitle';
-export * from './MultipleFileUploadTitleIcon';
-export * from './MultipleFileUploadTitleText';
-export * from './MultipleFileUploadTitleTextSeparator';
-export * from './MultipleFileUploadButton';
 export * from './MultipleFileUploadStatus';
 export * from './MultipleFileUploadStatusItem';

package/src/components/NumberInput/NumberInput.tsx

@@ -83,6 +83,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   const numberInputUnit = <div className={css(styles.numberInputUnit)}>{unit}</div>;
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
+
   return (
     <div
       className={css(styles.numberInput, className)}
@@ -99,7 +100,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
         <Button
           variant="control"
           aria-label={minusBtnAriaLabel}
-          isDisabled={isDisabled || value === min}
+          isDisabled={isDisabled || value <= min}
           onClick={evt => onMinus(evt, inputName)}
           {...minusBtnProps}
         >
@@ -122,7 +123,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
         <Button
           variant="control"
           aria-label={plusBtnAriaLabel}
-          isDisabled={isDisabled || value === max}
+          isDisabled={isDisabled || value >= max}
           onClick={evt => onPlus(evt, inputName)}
           {...plusBtnProps}
         >