@patternfly/react-core 4.198.14 → 4.198.17

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/Tabs/Tab.tsx

@@ -4,6 +4,7 @@ import { OUIAProps } from '../../helpers';
 import { TabButton } from './TabButton';
 import { TabsContext } from './TabsContext';
 import { css } from '@patternfly/react-styles';
+import { Tooltip } from '../Tooltip';
 
 export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title'>, OUIAProps {
   /** content rendered inside the Tab content area. */
@@ -30,6 +31,8 @@ export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLB
   inoperableEvents?: string[];
   /** Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
+  tooltip?: React.ReactElement<any>;
 }
 
 const TabBase: React.FunctionComponent<TabProps> = ({
@@ -45,6 +48,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   inoperableEvents = ['onClick', 'onKeyPress'],
   href,
   innerRef,
+  tooltip,
   ...props
 }: TabProps) => {
   const preventedEvents = inoperableEvents.reduce(
@@ -69,31 +73,34 @@ const TabBase: React.FunctionComponent<TabProps> = ({
       return null;
     }
   };
-  return (
-    <li
-      className={css(styles.tabsItem, eventKey === localActiveKey && styles.modifiers.current, childClassName)}
-      ref={innerRef}
+
+  const tabButton = (
+    <TabButton
+      parentInnerRef={innerRef}
+      className={css(
+        styles.tabsLink,
+        isDisabled && href && styles.modifiers.disabled,
+        isAriaDisabled && styles.modifiers.ariaDisabled
+      )}
+      disabled={isButtonElement ? isDisabled : null}
+      aria-disabled={isDisabled || isAriaDisabled}
+      tabIndex={getDefaultTabIdx()}
+      onClick={(event: any) => handleTabClick(event, eventKey, tabContentRef)}
+      {...(isAriaDisabled ? preventedEvents : null)}
+      id={`pf-tab-${eventKey}-${childId || uniqueId}`}
+      aria-controls={ariaControls}
+      tabContentRef={tabContentRef}
+      ouiaId={childOuiaId}
+      href={href}
+      {...props}
     >
-      <TabButton
-        className={css(
-          styles.tabsLink,
-          isDisabled && href && styles.modifiers.disabled,
-          isAriaDisabled && styles.modifiers.ariaDisabled
-        )}
-        disabled={isButtonElement ? isDisabled : null}
-        aria-disabled={isDisabled || isAriaDisabled}
-        tabIndex={getDefaultTabIdx()}
-        onClick={(event: any) => handleTabClick(event, eventKey, tabContentRef)}
-        {...(isAriaDisabled ? preventedEvents : null)}
-        id={`pf-tab-${eventKey}-${childId || uniqueId}`}
-        aria-controls={ariaControls}
-        tabContentRef={tabContentRef}
-        ouiaId={childOuiaId}
-        href={href}
-        {...props}
-      >
-        {title}
-      </TabButton>
+      {title}
+    </TabButton>
+  );
+
+  return (
+    <li className={css(styles.tabsItem, eventKey === localActiveKey && styles.modifiers.current, childClassName)}>
+      {tooltip ? <Tooltip {...tooltip.props}>{tabButton}</Tooltip> : tabButton}
     </li>
   );
 };

package/src/components/Tabs/TabButton.tsx

@@ -10,6 +10,8 @@ export interface TabButtonProps extends Omit<React.HTMLProps<HTMLAnchorElement |
   href?: string;
   /** child reference for case in which a TabContent section is defined outside of a Tabs component */
   tabContentRef?: React.Ref<any>;
+  /** Parents' innerRef passed down for properly displaying Tooltips */
+  parentInnerRef?: React.Ref<any>;
 }
 
 export const TabButton: React.FunctionComponent<TabButtonProps> = ({
@@ -17,12 +19,14 @@ export const TabButton: React.FunctionComponent<TabButtonProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   tabContentRef,
   ouiaId,
+  parentInnerRef,
   ouiaSafe,
   ...props
 }: TabButtonProps) => {
   const Component = (props.href ? 'a' : 'button') as any;
+
   return (
-    <Component {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)} {...props}>
+    <Component ref={parentInnerRef} {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)} {...props}>
       {children}
     </Component>
   );