@patternfly/react-core 4.202.12 → 4.202.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.12",
+  "version": "4.202.15",
   "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.12",
-    "@patternfly/react-styles": "^4.52.12",
-    "@patternfly/react-tokens": "^4.54.12",
+    "@patternfly/react-icons": "^4.53.15",
+    "@patternfly/react-styles": "^4.52.15",
+    "@patternfly/react-tokens": "^4.54.15",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.185.0",
+    "@patternfly/patternfly": "4.185.1",
     "@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": "fc5d999e50a87f1e2eb6a630b8c810ed720a5e14"
+  "gitHead": "af93f798f3d171321a1f2992eebaee672fc95132"
 }

package/src/components/Drawer/DrawerContent.tsx

@@ -37,7 +37,7 @@ export const DrawerContent: React.SFC<DrawerContentProps> = ({
       >
         {children}
       </div>
-      {React.cloneElement(panelContent as React.ReactElement, { drawerContentRef })}
+      {panelContent && React.cloneElement(panelContent as React.ReactElement, { drawerContentRef })}
     </DrawerMain>
   );
 };

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

@@ -1,6 +1,8 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import "@testing-library/jest-dom";
+
 import AddressBookIcon from '@patternfly/react-icons/dist/esm/icons/address-book-icon';
 import { EmptyState, EmptyStateVariant } from '../EmptyState';
 import { EmptyStateBody } from '../EmptyStateBody';
@@ -12,8 +14,8 @@ import { Title, TitleSizes } from '../../Title';
 
 describe('EmptyState', () => {
   test('Main', () => {
-    const view = render(
-      <EmptyState>
+    render(
+      <EmptyState data-testid="empty-state-test-id">
         <Title headingLevel="h5" size="lg">
           HTTP Proxies
         </Title>
@@ -28,58 +30,59 @@ describe('EmptyState', () => {
         </EmptyStateSecondaryActions>
       </EmptyState>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
   });
 
   test('Main variant large', () => {
-    const view = render(
-      <EmptyState variant={EmptyStateVariant.large}>
-        <Title headingLevel="h3" size={TitleSizes.md}>EmptyState large</Title>
+    render(
+      <EmptyState variant={EmptyStateVariant.large} data-testid="empty-state-test-id">
+        <Title headingLevel="h3" size={TitleSizes.md}>
+          EmptyState large
+        </Title>
       </EmptyState>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
   });
 
   test('Main variant small', () => {
-    const view = render(
-      <EmptyState variant={EmptyStateVariant.small}>
-        <Title headingLevel="h3" size={TitleSizes.md}>EmptyState small</Title>
+    render(
+      <EmptyState variant={EmptyStateVariant.small} data-testid="empty-state-test-id">
+        <Title headingLevel="h3" size={TitleSizes.md}>
+          EmptyState small
+        </Title>
       </EmptyState>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
   });
 
   test('Main variant xs', () => {
-    const view = render(
-      <EmptyState variant={EmptyStateVariant.xs}>
-        <Title headingLevel="h3" size={TitleSizes.md}>EmptyState small</Title>
+    render(
+      <EmptyState variant={EmptyStateVariant.xs} data-testid="empty-state-test-id">
+        <Title headingLevel="h3" size={TitleSizes.md}>
+          EmptyState small
+        </Title>
       </EmptyState>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
   });
 
   test('Body', () => {
-    const view = shallow(<EmptyStateBody className="custom-empty-state-body" id="empty-state-1" />);
-    expect(view.props().className).toBe('pf-c-empty-state__body custom-empty-state-body');
-    expect(view.props().id).toBe('empty-state-1');
+    render(<EmptyStateBody className="custom-empty-state-body" data-testid="body-test-id" />);
+    expect(screen.getByTestId('body-test-id')).toHaveClass('custom-empty-state-body pf-c-empty-state__body');
   });
 
   test('Secondary Action', () => {
-    const view = shallow(<EmptyStateSecondaryActions className="custom-empty-state-secondary" id="empty-state-2" />);
-    expect(view.props().className).toBe('pf-c-empty-state__secondary custom-empty-state-secondary');
-    expect(view.props().id).toBe('empty-state-2');
+    render(<EmptyStateSecondaryActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
+    expect(screen.getByTestId('actions-test-id')).toHaveClass('custom-empty-state-secondary pf-c-empty-state__secondary');
   });
 
   test('Icon', () => {
-    const view = shallow(
-      <EmptyStateIcon icon={AddressBookIcon} className="custom-empty-state-icon" id="empty-state-icon" />
-    );
-    expect(view.props().className).toBe('pf-c-empty-state__icon custom-empty-state-icon');
-    expect(view.props().id).toBe('empty-state-icon');
+    render(<EmptyStateIcon icon={AddressBookIcon} data-testid="icon-test-id" />);
+    expect(screen.getByTestId('icon-test-id').outerHTML).toContain('pf-c-empty-state__icon');
   });
 
   test('Wrap icon in a div', () => {
-    const view = shallow(
+    const view = render(
       <EmptyStateIcon
         variant="container"
         component={AddressBookIcon}
@@ -87,27 +90,28 @@ describe('EmptyState', () => {
         id="empty-state-icon"
       />
     );
-    expect(view.find('div').props().className).toBe('pf-c-empty-state__icon custom-empty-state-icon');
-    expect(view.find('AddressBookIcon').length).toBe(1);
-  });
+
+    expect(view.container.querySelector('div')).toHaveClass('pf-c-empty-state__icon custom-empty-state-icon');
+    expect(view.container.querySelector('svg')).toBeInTheDocument();
+  })
 
   test('Primary div', () => {
-    const view = shallow(
-      <EmptyStatePrimary className="custom-empty-state-prim-cls" id="empty-state-prim-id">
+    render(
+      <EmptyStatePrimary data-testid="primary-test-id">
         <Button variant="link">Link</Button>
       </EmptyStatePrimary>
     );
-    expect(view.props().className).toBe('pf-c-empty-state__primary custom-empty-state-prim-cls');
-    expect(view.props().id).toBe('empty-state-prim-id');
+    expect(screen.getByTestId('primary-test-id').className).toContain('pf-c-empty-state__primary');
   });
 
   test('Full height', () => {
-    const view = render(
-      <EmptyState isFullHeight variant={EmptyStateVariant.large}>
-        <Title headingLevel="h3" size={TitleSizes.md}>EmptyState large</Title>
+    render(
+      <EmptyState isFullHeight variant={EmptyStateVariant.large} data-testid="empty-state-test-id">
+        <Title headingLevel="h3" size={TitleSizes.md}>
+          EmptyState large
+        </Title>
       </EmptyState>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
   });
-
 });

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

@@ -1,136 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EmptyState Full height 1`] = `
-<div>
-  <div
-    class="pf-c-empty-state pf-m-lg pf-m-full-height"
-  >
-    <div
-      class="pf-c-empty-state__content"
-    >
-      <h3
-        class="pf-c-title pf-m-md"
-        data-ouia-component-id="OUIA-Generated-Title-5"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-      >
-        EmptyState large
-      </h3>
-    </div>
-  </div>
-</div>
-`;
+exports[`EmptyState Full height 1`] = `"<div class=\\"pf-c-empty-state pf-m-lg pf-m-full-height\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h3 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-5\\" class=\\"pf-c-title pf-m-md\\">EmptyState large</h3></div></div>"`;
 
-exports[`EmptyState Main 1`] = `
-<div>
-  <div
-    class="pf-c-empty-state"
-  >
-    <div
-      class="pf-c-empty-state__content"
-    >
-      <h5
-        class="pf-c-title pf-m-lg"
-        data-ouia-component-id="OUIA-Generated-Title-1"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-      >
-        HTTP Proxies
-      </h5>
-      <div
-        class="pf-c-empty-state__body"
-      >
-        Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.
-      </div>
-      <button
-        aria-disabled="false"
-        class="pf-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        New HTTP Proxy
-      </button>
-      <div
-        class="pf-c-empty-state__secondary"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="learn more action"
-          class="pf-c-button pf-m-link"
-          data-ouia-component-id="OUIA-Generated-Button-link-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          Learn more about this in the documentation.
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
+exports[`EmptyState Main 1`] = `"<div class=\\"pf-c-empty-state\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h5 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-1\\" class=\\"pf-c-title pf-m-lg\\">HTTP Proxies</h5><div class=\\"pf-c-empty-state__body\\">Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.</div><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-primary\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-primary-1\\">New HTTP Proxy</button><div class=\\"pf-c-empty-state__secondary\\"><button aria-disabled=\\"false\\" aria-label=\\"learn more action\\" class=\\"pf-c-button pf-m-link\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-1\\">Learn more about this in the documentation.</button></div></div></div>"`;
 
-exports[`EmptyState Main variant large 1`] = `
-<div>
-  <div
-    class="pf-c-empty-state pf-m-lg"
-  >
-    <div
-      class="pf-c-empty-state__content"
-    >
-      <h3
-        class="pf-c-title pf-m-md"
-        data-ouia-component-id="OUIA-Generated-Title-2"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-      >
-        EmptyState large
-      </h3>
-    </div>
-  </div>
-</div>
-`;
+exports[`EmptyState Main variant large 1`] = `"<div class=\\"pf-c-empty-state pf-m-lg\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h3 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-2\\" class=\\"pf-c-title pf-m-md\\">EmptyState large</h3></div></div>"`;
 
-exports[`EmptyState Main variant small 1`] = `
-<div>
-  <div
-    class="pf-c-empty-state pf-m-sm"
-  >
-    <div
-      class="pf-c-empty-state__content"
-    >
-      <h3
-        class="pf-c-title pf-m-md"
-        data-ouia-component-id="OUIA-Generated-Title-3"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-      >
-        EmptyState small
-      </h3>
-    </div>
-  </div>
-</div>
-`;
+exports[`EmptyState Main variant small 1`] = `"<div class=\\"pf-c-empty-state pf-m-sm\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h3 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-3\\" class=\\"pf-c-title pf-m-md\\">EmptyState small</h3></div></div>"`;
 
-exports[`EmptyState Main variant xs 1`] = `
-<div>
-  <div
-    class="pf-c-empty-state pf-m-xs"
-  >
-    <div
-      class="pf-c-empty-state__content"
-    >
-      <h3
-        class="pf-c-title pf-m-md"
-        data-ouia-component-id="OUIA-Generated-Title-4"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-      >
-        EmptyState small
-      </h3>
-    </div>
-  </div>
-</div>
-`;
+exports[`EmptyState Main variant xs 1`] = `"<div class=\\"pf-c-empty-state pf-m-xs\\" data-testid=\\"empty-state-test-id\\"><div class=\\"pf-c-empty-state__content\\"><h3 data-ouia-component-type=\\"PF4/Title\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Title-4\\" class=\\"pf-c-title pf-m-md\\">EmptyState small</h3></div></div>"`;

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

@@ -1,192 +1,217 @@
 import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { ValidatedOptions } from '../../../helpers/constants';
 import { FormGroup } from '../FormGroup';
 import { Form } from '../Form';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
-import { ValidatedOptions } from '../../../helpers/constants';
 
-describe('FormGroup component', () => {
+describe('FormGroup', () => {
   const returnFunction = () => <div>label</div>;
 
   test('should render default form group variant', () => {
-    const view = render(
+    const { asFragment } = render(
       <FormGroup label="label" fieldId="label-id" helperText="this is helper text">
         <input id="label-id" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render inline form group variant', () => {
-    const view = mount(
+    render(
       <FormGroup isInline label="label" fieldId="label-id" helperText="this is helper text">
         <input id="label-id" />
       </FormGroup>
     );
-    expect(view).toMatchSnapshot();
-    expect(view.find('.pf-c-form__group-control').prop('className')).toMatch(/pf-m-inline/);
+    expect(screen.getByLabelText('label').parentElement).toHaveClass('pf-m-inline');
   });
 
   test('should render no padding-top form group variant', () => {
-    const view = mount(
-      <FormGroup hasNoPaddingTop label="label" fieldId="label-id" helperText="this is helper text">
+    render(
+      <FormGroup
+        hasNoPaddingTop
+        label="label"
+        fieldId="label-id"
+        helperText="this is helper text"
+        data-testid="form-group-test-id"
+      >
         <input id="label-id" />
       </FormGroup>
     );
-    expect(view.find('.pf-c-form__group-label').prop('className')).toMatch(/no-padding-top/);
+    expect(screen.getByTestId('form-group-test-id').firstElementChild).toHaveClass('pf-m-no-padding-top');
   });
 
   test('should render form group variant with required label', () => {
-    const view = render(
+    const { asFragment } = render(
       <FormGroup label="label" isRequired fieldId="label-id">
         <input id="label-id" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form group variant with node label', () => {
-    const view = render(
+    const { asFragment } = render(
       <FormGroup fieldId="id" label={<h1>Header</h1>}>
         <input aria-label="input" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form group with additonal label info', () => {
-    const view = render(
+    const { asFragment } = render(
       <FormGroup fieldId="id" label={<h1>Header</h1>} labelInfo="more info">
         <input aria-label="input" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form group variant with function label', () => {
-    const view = render(
+    render(
       <FormGroup fieldId="id" label={returnFunction()}>
         <input aria-label="input" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+
+    expect(screen.getByText('label')).toBeInTheDocument();
   });
 
   test('should render form group variant with node helperText', () => {
-    const view = render(
+    render(
       <FormGroup label="Label" fieldId="label-id" helperText={<h1>Header</h1>}>
         <input id="label-id" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+
+    expect(screen.getByRole('heading', { name: 'Header' })).toBeInTheDocument();
   });
 
   test('should render form group variant with function helperText', () => {
-    const view = render(
+    render(
       <FormGroup label="Label" fieldId="label-id" helperText={returnFunction()}>
         <input id="label-id" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+
+    expect(screen.getByText('label')).toBeInTheDocument();
   });
 
   test('should render horizontal form group variant', () => {
-    const view = render(
+    const { asFragment } = render(
       <Form isHorizontal>
         <FormGroup label="label" fieldId="label-id" helperText="this is helperText">
           <input id="label-id" />
         </FormGroup>
       </Form>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render stacked horizontal form group variant', () => {
-    const view = render(
+    const { asFragment } = render(
       <Form isHorizontal>
         <FormGroup label="label" fieldId="label-id" isStack helperText="this is helperText">
           <input id="label-id" />
         </FormGroup>
       </Form>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render helper text above input', () => {
-    const view = render(
+    const { asFragment } = render(
       <Form isHorizontal>
         <FormGroup label="label" fieldId="label-id" helperText="this is helperText" isHelperTextBeforeField>
           <input id="label-id" />
         </FormGroup>
       </Form>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form group variant without label', () => {
-    const view = render(
+    const { asFragment } = render(
       <FormGroup fieldId="id">
         <input aria-label="input" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
-  });
-
-  test('should render form group required variant', () => {
-    const view = render(
-      <FormGroup isRequired label="label" fieldId="id">
-        <input id="id" />
-      </FormGroup>
-    );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form group invalid variant', () => {
-    const view = render(
-      <FormGroup label="label" fieldId="label-id" validated={'error'} helperTextInvalid="Invalid FormGroup">
+    const { asFragment } = render(
+      <FormGroup
+        label="label"
+        fieldId="label-id"
+        validated={'error'}
+        helperTextInvalid="Invalid FormGroup"
+      >
         <input id="id" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form group validated success variant', () => {
-    const view = mount(
-      <FormGroup label="label" fieldId="label-id" validated={ValidatedOptions.success} helperText="Validated FormGroup">
+    const { asFragment } = render(
+      <FormGroup
+        label="label"
+        fieldId="label-id"
+        validated={ValidatedOptions.success}
+        helperText="Validated FormGroup"
+        data-testid="form-group-test-id"
+      >
         <input id="id" />
       </FormGroup>
     );
-    expect(view.find('.pf-c-form__helper-text.pf-m-success').length).toBe(1);
-    expect(view).toMatchSnapshot();
+
+    expect(screen.getByTestId('form-group-test-id').querySelector('input + div')).toHaveClass('pf-m-success');
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form group validated error variant', () => {
-    const view = render(
-      <FormGroup label="label" fieldId="label-id" validated={ValidatedOptions.error} helperText="Validated FormGroup">
+    const { asFragment } = render(
+      <FormGroup
+        label="label"
+        fieldId="label-id"
+        validated={ValidatedOptions.error}
+        helperText="Validated FormGroup"
+      >
         <input id="id" />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form group validated warning variant', () => {
-    const view = mount(
-      <FormGroup label="label" fieldId="label-id" validated={ValidatedOptions.warning} helperText="Validated FormGroup">
+    const { asFragment } = render(
+      <FormGroup
+        label="label"
+        fieldId="label-id"
+        validated={ValidatedOptions.warning}
+        helperText="Validated FormGroup"
+        data-testid="form-group-test-id"
+      >
         <input id="id" />
       </FormGroup>
     );
-    expect(view.find('.pf-c-form__helper-text.pf-m-warning').length).toBe(1);
-    expect(view).toMatchSnapshot();
+
+    expect(screen.getByTestId('form-group-test-id').querySelector('input + div')).toHaveClass('pf-m-warning');
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render correctly when label is not a string with Children = Array', () => {
-    const view = render(
+    const { asFragment } = render(
       <FormGroup fieldId="id" label={returnFunction()}>
         <input aria-label="label" />
         <input id="id" />
         <input />
       </FormGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });