@patternfly/react-core 4.199.5 → 4.200.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.199.5",
+  "version": "4.200.2",
   "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.50.5",
-    "@patternfly/react-styles": "^4.49.5",
-    "@patternfly/react-tokens": "^4.51.5",
+    "@patternfly/react-icons": "^4.51.2",
+    "@patternfly/react-styles": "^4.50.2",
+    "@patternfly/react-tokens": "^4.52.2",
     "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": "f31fca2c9a852fedd657b7e10fd7bf203849cac2"
+  "gitHead": "78e64c6891ebd263e6c35a9d70d95759aba3c7ad"
 }

package/src/components/Avatar/Avatar.tsx

@@ -12,6 +12,8 @@ export interface AvatarProps
   alt: string;
   /** Border to add */
   border?: 'light' | 'dark';
+  /** Size variant of avatar. */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export const Avatar: React.FunctionComponent<AvatarProps> = ({
@@ -19,6 +21,7 @@ export const Avatar: React.FunctionComponent<AvatarProps> = ({
   src = '',
   alt,
   border,
+  size,
   ...props
 }: AvatarProps) => (
   <img
@@ -26,6 +29,7 @@ export const Avatar: React.FunctionComponent<AvatarProps> = ({
     alt={alt}
     className={css(
       styles.avatar,
+      styles.modifiers[size],
       border === 'light' && styles.modifiers.light,
       border === 'dark' && styles.modifiers.dark,
       className

package/src/components/Avatar/examples/Avatar.md

@@ -10,30 +10,59 @@ import avatarImgDark from './avatarImgDark.svg';
 import './example.css';
 
 ## Examples
+
 ### Basic
+
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImg from './avatarImg.svg';
 
-<Avatar src={avatarImg} alt="avatar" />
+<Avatar src={avatarImg} alt="avatar" />;
+```
+
+### Size variations
+
+```ts
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from './avatarImg.svg';
+
+<React.Fragment>
+  Small
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="sm" />
+  <br />
+  Medium
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="md" />
+  <br />
+  Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="lg" />
+  <br />
+  Extra Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="xl" />
+</React.Fragment>;
 ```
 
 ### Bordered - light
+
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImg from './img_avatar.svg';
 
-<Avatar src={avatarImg} alt="avatar" border="light" />
+<Avatar src={avatarImg} alt="avatar" border="light" />;
 ```
 
 ### Bordered - dark
+
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImgDark from './img_avatar-dark.svg';
 
-<Avatar src={avatarImgDark} alt="avatar" border="dark" />
+<Avatar src={avatarImgDark} alt="avatar" border="dark" />;
 ```
-

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

@@ -1,6 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
 import { ChipGroup } from '../index';
 import { Chip } from '../../Chip';
 
@@ -34,7 +37,7 @@ describe('ChipGroup', () => {
   });
 
   test('chip group expanded', () => {
-    const view = mount(
+    render(
       <ChipGroup>
         <Chip>1</Chip>
         <Chip>2</Chip>
@@ -42,15 +45,17 @@ describe('ChipGroup', () => {
         <Chip>4</Chip>
       </ChipGroup>
     );
-    const overflowButton = view.find('.pf-m-overflow .pf-c-chip__text');
-    expect(overflowButton.text()).toBe('1 more');
-    overflowButton.simulate('click');
-    expect(overflowButton.text()).toBe('Show Less');
+
+    const moreText = screen.getByText('1 more');
+    expect(moreText).toBeInTheDocument();
+
+    userEvent.click(moreText);
+    expect(screen.getByText('Show Less')).toBeInTheDocument();
   });
 
   test('chip group will not render if no children passed', () => {
-    const view = mount(<ChipGroup />);
-    expect(view.html()).toBeNull();
+    render(<ChipGroup />);
+    expect(screen.queryByRole('group')).toBeNull();
   });
 
   test('chip group with category and tooltip', () => {

package/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { shallow } from 'enzyme';
-import { ClipboardCopyToggle } from '../ClipboardCopyToggle';
+import { ClipboardCopyToggle, ClipboardCopyToggleProps } from '../ClipboardCopyToggle';
 
-const props = {
+const props: ClipboardCopyToggleProps = {
   id: 'my-id',
   textId: 'my-text-id',
   contentId: 'my-content-id',
@@ -13,23 +12,33 @@ const props = {
   onClick: jest.fn()
 };
 
-test('toggle button render', () => {
-  const desc = 'toggle content';
-  const view = render(<ClipboardCopyToggle {...props} aria-label={desc} />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('ClipboardCopyToggle', () => {
+  test('toggle button render', () => {
+    const desc = 'toggle content';
+    const view = render(<ClipboardCopyToggle {...props} aria-label={desc} />);
 
-test('toggle button onClick', () => {
-  const onclick = jest.fn();
-  render(<ClipboardCopyToggle {...props} onClick={onclick} />);
+    expect(view.container).toMatchSnapshot();
+  });
 
-  userEvent.click(screen.getByRole('button'));
-  expect(onclick).toBeCalled();
-});
+  test('toggle button onClick', () => {
+    const onclick = jest.fn();
+    render(<ClipboardCopyToggle {...props} onClick={onclick} />);
+
+    userEvent.click(screen.getByRole('button'));
+    expect(onclick).toBeCalled();
+  });
+
+  test('has aria-expanded set to true when isExpanded is true', () => {
+    render(<ClipboardCopyToggle {...props} isExpanded />);
+
+    const toggleButton = screen.getByRole('button');
+    expect(toggleButton.getAttribute('aria-expanded')).toEqual('true');
+  });
+
+  test('has aria-expanded set to false when isExpanded is false', () => {
+    render(<ClipboardCopyToggle {...props} />);
 
-test('toggle button is on expanded mode', () => {
-  let view = shallow(<ClipboardCopyToggle {...props} isExpanded />);
-  expect(view.props()['aria-expanded']).toBe(true);
-  view = shallow(<ClipboardCopyToggle {...props} isExpanded={false} />);
-  expect(view.props()['aria-expanded']).toBe(false);
+    const toggleButton = screen.getByRole('button');
+    expect(toggleButton.getAttribute('aria-expanded')).toEqual('false');
+  });
 });

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`toggle button render 1`] = `
+exports[`ClipboardCopyToggle toggle button render 1`] = `
 <div>
   <button
     aria-controls="my-id my-content-id"

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

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { shallow } from 'enzyme';
+
 import { ContextSelector } from '../ContextSelector';
 import { ContextSelectorItem } from '../ContextSelectorItem';
 
@@ -13,20 +14,26 @@ const items = [
   <ContextSelectorItem key="4">Azure</ContextSelectorItem>
 ];
 
-test('Renders ContextSelector', () => {
-  const view = render(<ContextSelector> {items} </ContextSelector>);
-  expect(view.container).toMatchSnapshot();
-});
+describe('ContextSelector', () => {
+  test('Renders ContextSelector', () => {
+    render(<ContextSelector data-testid="context-test-id">{items}</ContextSelector>);
+    expect(screen.getByTestId('context-test-id').outerHTML).toMatchSnapshot();
+  });
 
-test('Renders ContextSelector open', () => {
-  const view = shallow(<ContextSelector isOpen> {items} </ContextSelector>);
-  expect(view).toMatchSnapshot();
-});
+  test('Renders ContextSelector open', () => {
+    render(
+      <ContextSelector isOpen data-testid="context-test-id">
+        {items}
+      </ContextSelector>
+    );
+    expect(screen.getByTestId('context-test-id').outerHTML).toMatchSnapshot();
+  });
 
-test('Verify onToggle is called ', () => {
-  const mockfn = jest.fn();
-  render(<ContextSelector onToggle={mockfn}> {items} </ContextSelector>);
+  test('Verify onToggle is called ', () => {
+    const mockfn = jest.fn();
+    render(<ContextSelector onToggle={mockfn}>{items}</ContextSelector>);
 
-  userEvent.click(screen.getByRole('button'));
-  expect(mockfn.mock.calls).toHaveLength(1);
+    userEvent.click(screen.getByRole('button'));
+    expect(mockfn.mock.calls).toHaveLength(1);
+  });
 });

package/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx

@@ -1,43 +1,58 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { ContextSelectorToggle } from '../ContextSelectorToggle';
 
-test('Renders ContextSelectorToggle', () => {
-  const view = render(<ContextSelectorToggle id="toggle-id" />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('ContextSelectorToggle', () => {
+  test('Renders ContextSelectorToggle', () => {
+    render(<ContextSelectorToggle id="toggle-id" />);
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+  });
 
-test('Verify onToggle is called ', () => {
-  const mockfnOnToggle = jest.fn();
-  const view = mount(<ContextSelectorToggle onToggle={mockfnOnToggle} id="toggle-id" />);
-  view
-    .find('button')
-    .at(0)
-    .simulate('click');
-  expect(mockfnOnToggle.mock.calls).toHaveLength(1);
-});
+  test('Verify onToggle is called ', () => {
+    const mockfnOnToggle = jest.fn();
 
-test('Verify ESC press ', () => {
-  const view = mount(<ContextSelectorToggle isOpen id="toggle-id" />);
-  view.simulate('keyDown', { key: 'Escape' });
-  expect(view).toMatchSnapshot();
-});
+    render(<ContextSelectorToggle onToggle={mockfnOnToggle} id="toggle-id" />);
 
-test('Verify ESC press with not isOpen', () => {
-  const view = mount(<ContextSelectorToggle onToggle={jest.fn()} id="toggle-id" />);
-  view.simulate('keyDown', { key: 'Escape' });
-  expect(view).toMatchSnapshot();
-});
+    userEvent.click(screen.getByRole('button'));
+    expect(mockfnOnToggle.mock.calls).toHaveLength(1);
+  });
 
-test('Verify keydown tab ', () => {
-  const view = mount(<ContextSelectorToggle isOpen id="toggle-id" />);
-  view.simulate('keyDown', { key: 'Tab' });
-  expect(view).toMatchSnapshot();
-});
+  test('Verify ESC press', () => {
+    render(<ContextSelectorToggle isOpen id="toggle-id" />);
+
+    const toggleButton = screen.getByRole('button');
+
+    userEvent.type(toggleButton, '{esc}');
+    expect(toggleButton.outerHTML).toMatchSnapshot();
+  });
+
+  test('Verify ESC press with not isOpen', () => {
+    render(<ContextSelectorToggle onToggle={jest.fn()} id="toggle-id" />);
+
+    const toggleButton = screen.getByRole('button');
+
+    userEvent.type(screen.getByRole('button'), '{esc}');
+    expect(toggleButton.outerHTML).toMatchSnapshot();
+  });
+
+  test('Verify keydown tab ', () => {
+    render(<ContextSelectorToggle isOpen id="toggle-id" />);
+
+    const toggleButton = screen.getByRole('button');
+
+    userEvent.type(screen.getByRole('button'), '{tab}');
+    expect(toggleButton.outerHTML).toMatchSnapshot();
+  });
+
+  test('Verify keydown enter ', () => {
+    render(<ContextSelectorToggle onToggle={jest.fn()} onEnter={jest.fn()} id="toggle-id" />);
+
+    const toggleButton = screen.getByRole('button');
 
-test('Verify keydown enter ', () => {
-  const view = mount(<ContextSelectorToggle onToggle={jest.fn()} onEnter={jest.fn()} id="toggle-id" />);
-  view.simulate('keyDown', { key: 'Enter' });
-  expect(view).toMatchSnapshot();
+    userEvent.type(screen.getByRole('button'), '{enter}');
+    expect(toggleButton.outerHTML).toMatchSnapshot();
+  });
 });

package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap

@@ -1,172 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Renders ContextSelector 1`] = `
-<div>
-  <div
-    class="pf-c-context-selector"
-    data-ouia-component-id="OUIA-Generated-ContextSelector-1"
-    data-ouia-component-type="PF4/ContextSelector"
-    data-ouia-safe="true"
-  >
-    
-    <button
-      aria-expanded="false"
-      aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
-      class="pf-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-0"
-      type="button"
-    >
-      <span
-        class="pf-c-context-selector__toggle-text"
-      />
-      <span
-        class="pf-c-context-selector__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</div>
-`;
+exports[`ContextSelector Renders ContextSelector 1`] = `"<div class=\\"pf-c-context-selector\\" data-ouia-component-type=\\"PF4/ContextSelector\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-ContextSelector-1\\" data-testid=\\"context-test-id\\"><button aria-labelledby=\\"pf-context-selector-label-id-0 pf-context-selector-toggle-id-0\\" id=\\"pf-context-selector-toggle-id-0\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button></div>"`;
 
-exports[`Renders ContextSelector open 1`] = `
-<div
-  className="pf-c-context-selector pf-m-expanded"
-  data-ouia-component-id="OUIA-Generated-ContextSelector-2"
-  data-ouia-component-type="PF4/ContextSelector"
-  data-ouia-safe={true}
->
-  <ContextSelectorToggle
-    aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
-    className=""
-    id="pf-context-selector-toggle-id-0"
-    isActive={false}
-    isOpen={true}
-    isPlain={false}
-    isText={false}
-    onEnter={[Function]}
-    onToggle={[Function]}
-    parentRef={null}
-    toggleText=""
-  />
-  <div
-    className="pf-c-context-selector__menu"
-  >
-    <FocusTrap
-      active={true}
-      focusTrapOptions={
-        Object {
-          "clickOutsideDeactivates": true,
-        }
-      }
-      paused={false}
-      preventScrollOnDeactivate={false}
-    >
-      <div
-        className="pf-c-context-selector__menu-search"
-      >
-        <InputGroup>
-          <TextInput
-            aria-labelledby="pf-context-selector-search-button-id-0"
-            onChange={[Function]}
-            onKeyPress={[Function]}
-            placeholder="Search"
-            type="search"
-            value=""
-          />
-          <Button
-            aria-label="Search menu items"
-            id="pf-context-selector-search-button-id-0"
-            onClick={[Function]}
-            variant="control"
-          >
-            <SearchIcon
-              aria-hidden="true"
-              color="currentColor"
-              noVerticalAlign={false}
-              size="sm"
-            />
-          </Button>
-        </InputGroup>
-      </div>
-      <ContextProvider
-        value={
-          Object {
-            "onSelect": [Function],
-          }
-        }
-      >
-        <ContextSelectorMenuList
-          className=""
-          isOpen={true}
-        >
-           
-          <ContextSelectorItem
-            className=""
-            href={null}
-            isDisabled={false}
-            key="0"
-            onClick={[Function]}
-            sendRef={[Function]}
-          >
-            My Project
-          </ContextSelectorItem>
-          <ContextSelectorItem
-            className=""
-            href={null}
-            isDisabled={false}
-            key="1"
-            onClick={[Function]}
-            sendRef={[Function]}
-          >
-            OpenShift Cluster
-          </ContextSelectorItem>
-          <ContextSelectorItem
-            className=""
-            href={null}
-            isDisabled={false}
-            key="2"
-            onClick={[Function]}
-            sendRef={[Function]}
-          >
-            Production Ansible
-          </ContextSelectorItem>
-          <ContextSelectorItem
-            className=""
-            href={null}
-            isDisabled={false}
-            key="3"
-            onClick={[Function]}
-            sendRef={[Function]}
-          >
-            AWS
-          </ContextSelectorItem>
-          <ContextSelectorItem
-            className=""
-            href={null}
-            isDisabled={false}
-            key="4"
-            onClick={[Function]}
-            sendRef={[Function]}
-          >
-            Azure
-          </ContextSelectorItem>
-           
-        </ContextSelectorMenuList>
-      </ContextProvider>
-    </FocusTrap>
-  </div>
-</div>
-`;
+exports[`ContextSelector Renders ContextSelector open 1`] = `"<div class=\\"pf-c-context-selector pf-m-expanded\\" data-ouia-component-type=\\"PF4/ContextSelector\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-ContextSelector-2\\" data-testid=\\"context-test-id\\"><button aria-labelledby=\\"pf-context-selector-label-id-0 pf-context-selector-toggle-id-0\\" id=\\"pf-context-selector-toggle-id-0\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"true\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button><div class=\\"pf-c-context-selector__menu\\"><div><div class=\\"pf-c-context-selector__menu-search\\"><div class=\\"pf-c-input-group\\"><input placeholder=\\"Search\\" aria-labelledby=\\"pf-context-selector-search-button-id-0\\" aria-describedby=\\"pf-context-selector-search-button-id-0\\" class=\\"pf-c-form-control\\" type=\\"search\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/TextInput\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-TextInputBase-1\\" value=\\"\\"><button id=\\"pf-context-selector-search-button-id-0\\" aria-disabled=\\"false\\" aria-label=\\"Search menu items\\" class=\\"pf-c-button pf-m-control\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-control-1\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"></path></svg></button></div></div><ul class=\\"pf-c-context-selector__menu-list\\" role=\\"menu\\"><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">My Project</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">OpenShift Cluster</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">Production Ansible</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">AWS</button></li><li role=\\"none\\"><button class=\\"pf-c-context-selector__menu-list-item\\">Azure</button></li></ul></div></div></div>"`;