@patternfly/react-core 4.202.36 → 4.203.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.36",
+  "version": "4.203.1",
   "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,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.53.36",
-    "@patternfly/react-styles": "^4.52.36",
-    "@patternfly/react-tokens": "^4.54.36",
+    "@patternfly/react-icons": "^4.54.1",
+    "@patternfly/react-styles": "^4.53.1",
+    "@patternfly/react-tokens": "^4.55.1",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.186.1",
+    "@patternfly/patternfly": "4.187.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "f420c8cb16012a862440e821fb17102093bc57cd"
+  "gitHead": "2f16e9b81a8ab2c54d9ef945e50c1e4aa7510c49"
 }

package/src/components/MenuToggle/MenuToggle.tsx

@@ -16,6 +16,8 @@ export interface MenuToggleProps
   isDisabled?: boolean;
   /** Flag indicating the toggle is full height */
   isFullHeight?: boolean;
+  /** Flag indicating the toggle takes up the full width of its parent */
+  isFullWidth?: boolean;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary';
   /** Optional icon rendered inside the toggle, before the children content */
@@ -32,6 +34,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
     className: '',
     isExpanded: false,
     isDisabled: false,
+    isFullWidth: false,
     isFullHeight: false,
     variant: 'default'
   };
@@ -45,6 +48,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       isExpanded,
       isDisabled,
       isFullHeight,
+      isFullWidth,
       variant,
       innerRef,
       ...props
@@ -75,6 +79,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
           (isPlain || isPlainText) && styles.modifiers.plain,
           isPlainText && styles.modifiers.text,
           isFullHeight && styles.modifiers.fullHeight,
+          isFullWidth && styles.modifiers.fullWidth,
           className
         )}
         type="button"

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -177,3 +177,19 @@ import { MenuToggle } from '@patternfly/react-core';
   </MenuToggle>
 </div>
 ```
+
+### Full width
+
+```ts
+import React from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+const fullWidth: React.FunctionComponent = () => {
+  return (
+    <MenuToggle isFullWidth aria-label="Full width menu toggle" >
+      Full width 
+    </MenuToggle>
+  );
+}
+    
+```

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -41,10 +41,12 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
 
   // Props passed through to the progress component
 
-  /** Adds accessible text to the ProgressBar. Required when title not used and there is not any label associated with the progress bar */
+  /** Adds accessible text to the progress bar. Required when title not used and there is not any label associated with the progress bar */
   progressAriaLabel?: string;
-  /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
+  /** Associates the progress bar with it's label for accessibility purposes. Required when title not used */
   progressAriaLabelledBy?: string;
+  /** Unique identifier for progress. Generated if not specified. */
+  progressId?: string;
 }
 
 export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileUploadStatusItemProps> = ({
@@ -63,6 +65,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressVariant,
   progressAriaLabel,
   progressAriaLabelledBy,
+  progressId,
   buttonAriaLabel = 'Remove from list',
   ...props
 }: MultipleFileUploadStatusItemProps) => {
@@ -137,6 +140,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           variant={progressVariant || loadResult}
           aria-label={progressAriaLabel}
           aria-labelledby={progressAriaLabelledBy}
+          id={progressId}
         />
       </div>
       <div className={styles.multipleFileUploadStatusItemClose}>

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

@@ -1,20 +1,20 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { MultipleFileUpload } from '../MultipleFileUpload';
 
 describe('MultipleFileUpload', () => {
   test('renders with expected class names when not horizontal', () => {
-    const view = mount(<MultipleFileUpload>Foo</MultipleFileUpload>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUpload>Foo</MultipleFileUpload>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with expected class names when horizontal', () => {
-    const view = mount(<MultipleFileUpload isHorizontal>Foo</MultipleFileUpload>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUpload isHorizontal>Foo</MultipleFileUpload>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUpload className='test'>Foo</MultipleFileUpload>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUpload className="test">Foo</MultipleFileUpload>);
+    expect(asFragment()).toMatchSnapshot();
   });
-})
+});

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

@@ -1,20 +1,20 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadButton } from '../MultipleFileUploadButton';
 
 describe('MultipleFileUploadButton', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadButton>Foo</MultipleFileUploadButton>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadButton>Foo</MultipleFileUploadButton>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadButton className="test">Foo</MultipleFileUploadButton>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadButton className="test">Foo</MultipleFileUploadButton>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with aria-label applied to the button', () => {
-    const view = mount(<MultipleFileUploadButton aria-label="test">Foo</MultipleFileUploadButton>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadButton aria-label="test">Foo</MultipleFileUploadButton>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadInfo } from '../MultipleFileUploadInfo';
 
 describe('MultipleFileUploadInfo', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadInfo>Foo</MultipleFileUploadInfo>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadInfo>Foo</MultipleFileUploadInfo>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadInfo className="test">Foo</MultipleFileUploadInfo>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadInfo className="test">Foo</MultipleFileUploadInfo>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

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

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

@@ -1,26 +1,28 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 
 describe('MultipleFileUploadStatus', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadStatus>Foo</MultipleFileUploadStatus>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatus>Foo</MultipleFileUploadStatus>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadStatus className="test">Foo</MultipleFileUploadStatus>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatus className="test">Foo</MultipleFileUploadStatus>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders status toggle text', () => {
-    const view = mount(<MultipleFileUploadStatus statusToggleText='test'>Foo</MultipleFileUploadStatus>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatus statusToggleText="test">Foo</MultipleFileUploadStatus>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders status toggle icon', () => {
-    const view = mount(<MultipleFileUploadStatus statusToggleIcon={<InProgressIcon />}>Foo</MultipleFileUploadStatus>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(
+      <MultipleFileUploadStatus statusToggleIcon={<InProgressIcon />}>Foo</MultipleFileUploadStatus>
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,54 +1,69 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+
 import { MultipleFileUploadStatusItem } from '../MultipleFileUploadStatusItem';
 import FileImageIcon from '@patternfly/react-icons/dist/esm/icons/file-image-icon';
 
 describe('MultipleFileUploadStatusItem', () => {
   test('renders with expected class names', () => {
-    const view = shallow(<MultipleFileUploadStatusItem />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatusItem progressId="test-progress-id" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = shallow(<MultipleFileUploadStatusItem className="test" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatusItem className="test" progressId="test-progress-id" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders expected values from a passed file object', () => {
     const testFile = new File(['foo'], 'testFile.txt');
-    const view = shallow(<MultipleFileUploadStatusItem file={testFile} />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadStatusItem file={testFile} progressId="test-progress-id" />);
+
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom file name/size/icon when passed', () => {
     const testFile = new File(['foo'], 'testFile.txt');
-    const view = shallow(
+    const { asFragment } = render(
       <MultipleFileUploadStatusItem
         file={testFile}
         fileIcon={<FileImageIcon />}
         fileName="testCustomFileName.txt"
         fileSize={42}
+        progressId="test-progress-id"
       />
     );
-    expect(view).toMatchSnapshot();
+
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom progress value/variant when passed', () => {
     const testFile = new File(['foo'], 'testFile.txt');
-    const view = shallow(<MultipleFileUploadStatusItem file={testFile} progressValue={42} progressVariant="warning" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(
+      <MultipleFileUploadStatusItem
+        file={testFile}
+        progressValue={42}
+        progressVariant="warning"
+        progressId="test-progress-id"
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom aria labels', () => {
     const testFile = new File(['foo'], 'testFile.txt');
-    const view = shallow(
+    const { asFragment } = render(
       <MultipleFileUploadStatusItem
         file={testFile}
         buttonAriaLabel="buttonAriaLabel"
         progressAriaLabel="progressAriaLabel"
         progressAriaLabelledBy="progressAriaLabelledBy"
+        progressId="test-progress-id"
       />
     );
-    expect(view).toMatchSnapshot();
+
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,30 +1,30 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadTitle } from '../MultipleFileUploadTitle';
 
 describe('MultipleFileUploadTitle', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitle />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitle className="test" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle className="test" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with title icon', () => {
-    const view = mount(<MultipleFileUploadTitle icon="icon" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle icon="icon" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with title text', () => {
-    const view = mount(<MultipleFileUploadTitle text="text" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle text="text" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with title text separator', () => {
-    const view = mount(<MultipleFileUploadTitle text="text" textSeparator="text separator" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitle text="text" textSeparator="text separator" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadTitleIcon } from '../MultipleFileUploadTitleIcon';
 
 describe('MultipleFileUploadTitleIcon', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitleIcon>Foo</MultipleFileUploadTitleIcon>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleIcon data-testid="test-id" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitleIcon className="test" />);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleIcon className="test" data-testid="test-id" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadTitleText } from '../MultipleFileUploadTitleText';
 
 describe('MultipleFileUploadTitleText', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitleText>Foo</MultipleFileUploadTitleText>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleText>Foo</MultipleFileUploadTitleText>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitleText className="test">Foo</MultipleFileUploadTitleText>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleText className="test">Foo</MultipleFileUploadTitleText>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,15 +1,17 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MultipleFileUploadTitleTextSeparator } from '../MultipleFileUploadTitleTextSeparator';
 
 describe('MultipleFileUploadTitleTextSeparator', () => {
   test('renders with expected class names', () => {
-    const view = mount(<MultipleFileUploadTitleTextSeparator>Foo</MultipleFileUploadTitleTextSeparator>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(<MultipleFileUploadTitleTextSeparator>Foo</MultipleFileUploadTitleTextSeparator>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders custom class names', () => {
-    const view = mount(<MultipleFileUploadTitleTextSeparator className="test">Foo</MultipleFileUploadTitleTextSeparator>);
-    expect(view).toMatchSnapshot();
+    const { asFragment } = render(
+      <MultipleFileUploadTitleTextSeparator className="test">Foo</MultipleFileUploadTitleTextSeparator>
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 });