@patternfly/react-core 4.198.14 → 4.198.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.198.14",
+  "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.14",
-    "@patternfly/react-styles": "^4.48.14",
-    "@patternfly/react-tokens": "^4.50.14",
+    "@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": "94e4c0985dd4cad90d4551cead82695a7e854332"
+  "gitHead": "0a5989506d02f2a0eef3f0a714dbcee41c556494"
 }

package/src/components/Form/FormFieldGroup.tsx

@@ -6,7 +6,7 @@ export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
   className?: string;
-  /** Form filed group header */
+  /** Form field group header */
   header?: React.ReactNode;
 }
 

package/src/components/Form/FormFieldGroupExpandable.tsx

@@ -7,11 +7,11 @@ export interface FormFieldGroupExpandableProps extends React.HTMLProps<HTMLDivEl
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
   className?: string;
-  /** Form filed group header */
+  /** Form field group header */
   header?: React.ReactNode;
   /** Flag indicating if the form field group is initially expanded */
   isExpanded?: boolean;
-  /** Aria-label to use on the form filed group toggle button */
+  /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
 }
 

package/src/components/Form/FormFieldGroupHeader.tsx

@@ -2,17 +2,21 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 
+// typo - rename to FormFieldGroupHeaderTitleTextObject during breaking change release
 export interface FormFiledGroupHeaderTitleTextObject {
   /** Title text. */
   text: React.ReactNode;
   /** The applied to the title div for accessibility */
   id: string;
 }
+
+export interface FormFieldGroupHeaderTitleTextObject extends FormFiledGroupHeaderTitleTextObject {}
+
 export interface FormFieldGroupHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the section */
   className?: string;
   /** Field group header title text */
-  titleText?: FormFiledGroupHeaderTitleTextObject;
+  titleText?: FormFieldGroupHeaderTitleTextObject;
   /** Field group header title description */
   titleDescription?: React.ReactNode;
   /** Field group header actions */

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -9,7 +9,7 @@ export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDi
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
   className?: string;
-  /** Form filed group header */
+  /** Form field group header */
   header?: any;
   /** Flag indicating if the field group is expandable */
   isExpandable?: boolean;
@@ -17,7 +17,7 @@ export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDi
   isExpanded?: boolean;
   /** Function callback called when user clicks toggle button */
   onToggle?: () => void;
-  /** Aria-label to use on the form filed group toggle button */
+  /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
 }
 

package/src/components/Form/__tests__/FormFieldGroup.test.tsx

@@ -5,7 +5,7 @@ import { FormFieldGroupHeader } from '../FormFieldGroupHeader';
 import { Button } from '../../Button';
 import { render } from '@testing-library/react';
 
-test('Check form filed group example against snapshot', () => {
+test('Check form field group example against snapshot', () => {
   const FieldGroup = (
     <FormFieldGroup
       header={

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -85,7 +85,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
 </div>
 `;
 
-exports[`Check form filed group example against snapshot 1`] = `
+exports[`Check form field group example against snapshot 1`] = `
 <div>
   <div
     class="pf-c-form__field-group"

package/src/components/Form/examples/Form.md

@@ -12,7 +12,7 @@ propComponents:
     'FormFieldGroup',
     'FormFieldGroupExpandable',
     'FormFieldGroupHeader',
-    'FormFiledGroupHeaderTitleTextObject',
+    'FormFieldGroupHeaderTitleTextObject',
     'Button',
     'Popover',
   ]

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