@patternfly/react-core 4.198.16 → 4.198.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.198.16",
+  "version": "4.198.17",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.49.16",
-    "@patternfly/react-styles": "^4.48.16",
-    "@patternfly/react-tokens": "^4.50.16",
+    "@patternfly/react-icons": "^4.49.17",
+    "@patternfly/react-styles": "^4.48.17",
+    "@patternfly/react-tokens": "^4.50.17",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "752c9d1a3638f356f2e68f670e79356f03ebea8e"
+  "gitHead": "0a5989506d02f2a0eef3f0a714dbcee41c556494"
 }

package/src/components/MultipleFileUpload/MultipleFileUploadMain.tsx

@@ -1,22 +1,43 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
+import { MultipleFileUploadTitle } from './MultipleFileUploadTitle';
+import { MultipleFileUploadButton } from './MultipleFileUploadButton';
+import { MultipleFileUploadInfo } from './MultipleFileUploadInfo';
 
 export interface MultipleFileUploadMainProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside multiple file upload main */
-  children?: React.ReactNode;
   /** Class to add to outer div */
   className?: string;
+  /** Content rendered inside the title icon div */
+  titleIcon?: React.ReactNode;
+  /** Content rendered inside the title text div */
+  titleText?: React.ReactNode;
+  /** Content rendered inside the title text separator div */
+  titleTextSeparator?: React.ReactNode;
+  /** Content rendered inside the info div */
+  infoText?: React.ReactNode;
+  /** Flag to prevent the upload button from being rendered */
+  isUploadButtonHidden?: boolean;
 }
 
 export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadMainProps> = ({
   className,
-  children,
+  titleIcon,
+  titleText,
+  titleTextSeparator,
+  infoText,
+  isUploadButtonHidden,
   ...props
-}: MultipleFileUploadMainProps) => (
-  <div className={css(styles.multipleFileUploadMain, className)} {...props}>
-    {children}
-  </div>
-);
+}: MultipleFileUploadMainProps) => {
+  const showTitle = !!titleIcon || !!titleText || !!titleTextSeparator;
+
+  return (
+    <div className={css(styles.multipleFileUploadMain, className)} {...props}>
+      {showTitle && <MultipleFileUploadTitle icon={titleIcon} text={titleText} textSeparator={titleTextSeparator} />}
+      {isUploadButtonHidden || <MultipleFileUploadButton />}
+      {!!infoText && <MultipleFileUploadInfo>{infoText}</MultipleFileUploadInfo>}
+    </div>
+  );
+};
 
 MultipleFileUploadMain.displayName = 'MultipleFileUploadMain';

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 import { ExpandableSection } from '../ExpandableSection';
+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';
 
 export interface MultipleFileUploadStatusProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside multi file upload status list */
@@ -11,7 +14,7 @@ export interface MultipleFileUploadStatusProps extends React.HTMLProps<HTMLDivEl
   /** String to show in the status toggle */
   statusToggleText?: string;
   /** Icon to show in the status toggle */
-  statusToggleIcon?: React.ReactNode;
+  statusToggleIcon?: 'danger' | 'success' | 'inProgress' | React.ReactNode;
 }
 
 export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploadStatusProps> = ({
@@ -21,15 +24,32 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   statusToggleIcon,
   ...props
 }: MultipleFileUploadStatusProps) => {
+  const [icon, setIcon] = React.useState<React.ReactNode>();
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  React.useEffect(() => {
+    switch (statusToggleIcon) {
+      case 'danger':
+        setIcon(<TimesCircleIcon />);
+        break;
+      case 'success':
+        setIcon(<CheckCircleIcon />);
+        break;
+      case 'inProgress':
+        setIcon(<InProgressIcon />);
+        break;
+      default:
+        setIcon(statusToggleIcon);
+    }
+  }, [statusToggleIcon]);
+
   const toggle = (
     <div className={styles.multipleFileUploadStatusProgress}>
-      <div className={styles.multipleFileUploadStatusProgressIcon}>{statusToggleIcon}</div>
+      <div className={styles.multipleFileUploadStatusProgressIcon}>{icon}</div>
       <div className={styles.multipleFileUploadStatusItemProgressText}>{statusToggleText}</div>
     </div>
   );
 
-  const [isOpen, setIsOpen] = React.useState(true);
-
   const toggleExpandableSection = () => {
     setIsOpen(!isOpen);
   };

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -65,7 +65,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressAriaLabelledBy,
   buttonAriaLabel = 'Remove from list',
   ...props
-}) => {
+}: MultipleFileUploadStatusItemProps) => {
   const [loadPercentage, setLoadPercentage] = React.useState(0);
   const [loadResult, setLoadResult] = React.useState<undefined | 'danger' | 'success'>();
 

package/src/components/MultipleFileUpload/MultipleFileUploadTitle.tsx

@@ -1,21 +1,35 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
-
+import { MultipleFileUploadTitleIcon } from './MultipleFileUploadTitleIcon';
+import { MultipleFileUploadTitleText } from './MultipleFileUploadTitleText';
+import { MultipleFileUploadTitleTextSeparator } from './MultipleFileUploadTitleTextSeparator';
 export interface MultipleFileUploadTitleProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside multiple file upload title */
-  children?: React.ReactNode;
   /** Class to add to outer div */
   className?: string;
+  /** Content rendered inside the title icon div */
+  icon?: React.ReactNode;
+  /** Content rendered inside the title text div */
+  text?: React.ReactNode;
+  /** Content rendered inside the title text separator div */
+  textSeparator?: React.ReactNode;
 }
 
 export const MultipleFileUploadTitle: React.FunctionComponent<MultipleFileUploadTitleProps> = ({
   className,
-  children,
+  icon,
+  text = '',
+  textSeparator = '',
   ...props
 }: MultipleFileUploadTitleProps) => (
   <div className={css(styles.multipleFileUploadTitle, className)} {...props}>
-    {children}
+    {icon && <MultipleFileUploadTitleIcon>{icon}</MultipleFileUploadTitleIcon>}
+    {text && (
+      <MultipleFileUploadTitleText>
+        {`${text} `}
+        {textSeparator && <MultipleFileUploadTitleTextSeparator>{textSeparator}</MultipleFileUploadTitleTextSeparator>}
+      </MultipleFileUploadTitleText>
+    )}
   </div>
 );
 

package/src/components/MultipleFileUpload/MultipleFileUploadTitleIcon.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
-import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
-
 export interface MultipleFileUploadTitleIconProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside multiple file upload title icon */
+  children?: React.ReactNode;
   /** Class to add to outer div */
   className?: string;
 }
 
 export const MultipleFileUploadTitleIcon: React.FunctionComponent<MultipleFileUploadTitleIconProps> = ({
+  children,
   className,
   ...props
 }: MultipleFileUploadTitleIconProps) => (
   <div className={css(styles.multipleFileUploadTitleIcon, className)} {...props}>
-    <UploadIcon />
+    {children}
   </div>
 );
 

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

@@ -4,12 +4,29 @@ import { MultipleFileUploadMain } from '../MultipleFileUploadMain';
 
 describe('MultipleFileUploadMain', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadMain>Foo</MultipleFileUploadMain>);
+    const view = mount(<MultipleFileUploadMain />);
     expect(view).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadMain className="test">Foo</MultipleFileUploadMain>);
+    const view = mount(<MultipleFileUploadMain className="test" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('passes props to the title as expected', () => {
+    const view = mount(
+      <MultipleFileUploadMain titleIcon="icon" titleText="title text" titleTextSeparator="title test separator" />
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('renders without the button when expected', () => {
+    const view = mount(<MultipleFileUploadMain isUploadButtonHidden />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('passes props to the info component as expected', () => {
+    const view = mount(<MultipleFileUploadMain infoText="info text" />);
     expect(view).toMatchSnapshot();
   });
 });

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

@@ -4,12 +4,27 @@ import { MultipleFileUploadTitle } from '../MultipleFileUploadTitle';
 
 describe('MultipleFileUploadTitle', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitle>Foo</MultipleFileUploadTitle>);
+    const view = mount(<MultipleFileUploadTitle />);
     expect(view).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitle className="test">Foo</MultipleFileUploadTitle>);
+    const view = mount(<MultipleFileUploadTitle className="test" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('renders with title icon', () => {
+    const view = mount(<MultipleFileUploadTitle icon="icon" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('renders with title text', () => {
+    const view = mount(<MultipleFileUploadTitle text="text" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('renders with title text separator', () => {
+    const view = mount(<MultipleFileUploadTitle text="text" textSeparator="text separator" />);
     expect(view).toMatchSnapshot();
   });
 });

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

@@ -4,7 +4,7 @@ import { MultipleFileUploadTitleIcon } from '../MultipleFileUploadTitleIcon';
 
 describe('MultipleFileUploadTitleIcon', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitleIcon />);
+    const view = mount(<MultipleFileUploadTitleIcon>Foo</MultipleFileUploadTitleIcon>);
     expect(view).toMatchSnapshot();
   });
 

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>
 `;