@patternfly/react-core 4.202.30 → 4.202.31

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.202.31 (2022-04-13)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.202.30 (2022-04-13)
 
 **Note:** Version bump only for package @patternfly/react-core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.30",
+  "version": "4.202.31",
   "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.53.30",
-    "@patternfly/react-styles": "^4.52.30",
-    "@patternfly/react-tokens": "^4.54.30",
+    "@patternfly/react-icons": "^4.53.31",
+    "@patternfly/react-styles": "^4.52.31",
+    "@patternfly/react-tokens": "^4.54.31",
     "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": "7154950167e076ddf7e1a596583caa434e7c30a9"
+  "gitHead": "b4d39ebb37217775bd0e652d2c7e1428a3d0370a"
 }

package/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx

@@ -54,6 +54,6 @@ describe('DropdownToggleCheckbox', () => {
     render(<DropdownToggleCheckbox id="check" {...props} aria-label="check" />);
 
     userEvent.click(screen.getByRole('checkbox'));
-    expect(props.onChange.mock.calls[0][0]).toBe(true);
+    expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 });

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { Page } from '../Page';
 import { PageHeader } from '../PageHeader';
 import { PageSidebar } from '../PageSidebar';
@@ -18,135 +20,88 @@ const props = {
   className: 'my-page-class'
 };
 
-test('Check page vertical layout example against snapshot', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
-  const Sidebar = <PageSidebar nav="Navigation" isNavOpen />;
-  const view = render(
-    <Page {...props} header={Header} sidebar={Sidebar}>
-      <PageSection variant="default">Section with default background</PageSection>
-      <PageSection variant="light">Section with light background</PageSection>
-      <PageSection variant="dark">Section with dark background</PageSection>
-      <PageSection variant="darker">Section with darker background</PageSection>
-    </Page>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+describe('Page', () => {
+  test('Check page vertical layout example against snapshot', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen />;
 
-test('Check dark page against snapshot', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
-  const Sidebar = <PageSidebar nav="Navigation" isNavOpen theme="dark" />;
-  const view = render(
-    <Page {...props} header={Header} sidebar={Sidebar}>
-      <PageSection variant="default">Section with default background</PageSection>
-      <PageSection variant="light">Section with light background</PageSection>
-      <PageSection variant="dark">Section with dark background</PageSection>
-      <PageSection variant="darker">Section with darker background</PageSection>
-    </Page>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+    const { asFragment } = render(
+      <Page {...props} header={Header} sidebar={Sidebar}>
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
 
-test('Check page horizontal layout example against snapshot', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-  const Sidebar = <PageSidebar isNavOpen />;
-  const view = render(
-    <Page {...props} header={Header} sidebar={Sidebar}>
-      <PageSection variant="default">Section with default background</PageSection>
-      <PageSection variant="light">Section with light background</PageSection>
-      <PageSection variant="dark">Section with dark background</PageSection>
-      <PageSection variant="darker">Section with darker background</PageSection>
-    </Page>
-  );
-  expect(view.container).toMatchSnapshot();
-});
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Check page to verify breadcrumb is created', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-  const Sidebar = <PageSidebar isNavOpen />;
-  const PageBreadcrumb = () => (
-    <Breadcrumb>
-      <BreadcrumbItem>Section Home</BreadcrumbItem>
-      <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
-      <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
-      <BreadcrumbItem to="#" isActive>
-        Section Landing
-      </BreadcrumbItem>
-    </Breadcrumb>
-  );
-  const view = mount(
-    <Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
-      <PageSection variant="default">Section with default background</PageSection>
-      <PageSection variant="light">Section with light background</PageSection>
-      <PageSection variant="dark">Section with dark background</PageSection>
-      <PageSection variant="darker">Section with darker background</PageSection>
-    </Page>
-  );
-  expect(view).toMatchSnapshot();
-  expect(view.find('.pf-c-page__main').getDOMNode().id).toBe('');
-});
+  test('Check dark page against snapshot', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen theme="dark" />;
 
-test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-  const Sidebar = <PageSidebar isNavOpen />;
+    const { asFragment } = render(
+      <Page {...props} header={Header} sidebar={Sidebar}>
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
 
-  const view = mount(
-    <Page {...props} header={Header} sidebar={Sidebar}>
-      <PageBreadcrumb>
-        <Breadcrumb>
-          <BreadcrumbItem>Section Home</BreadcrumbItem>
-          <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
-          <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
-          <BreadcrumbItem to="#" isActive>
-            Section Landing
-          </BreadcrumbItem>
-        </Breadcrumb>
-      </PageBreadcrumb>
-      <PageSection variant="default">Section with default background</PageSection>
-      <PageSection variant="light">Section with light background</PageSection>
-      <PageSection variant="dark">Section with dark background</PageSection>
-      <PageSection variant="darker">Section with darker background</PageSection>
-    </Page>
-  );
-  expect(view).toMatchSnapshot();
-  expect(view.find('.pf-c-page__main').getDOMNode().id).toBe('');
-});
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Check page to verify nav is created - PageNavigation syntax', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-  const Sidebar = <PageSidebar isNavOpen />;
+  test('Check page horizontal layout example against snapshot', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
 
-  const view = mount(
-    <Page {...props} header={Header} sidebar={Sidebar}>
-      <PageNavigation>
-        <Nav aria-label="Nav" variant="tertiary">
-          <NavList>
-            <NavItem itemId={0} isActive>
-              System Panel
-            </NavItem>
-            <NavItem itemId={1}>Policy</NavItem>
-            <NavItem itemId={2}>Authentication</NavItem>
-            <NavItem itemId={3}>Network Services</NavItem>
-            <NavItem itemId={4}>Server</NavItem>
-          </NavList>
-        </Nav>
-      </PageNavigation>
-      <PageSection variant="default">Section with default background</PageSection>
-      <PageSection variant="light">Section with light background</PageSection>
-      <PageSection variant="dark">Section with dark background</PageSection>
-      <PageSection variant="darker">Section with darker background</PageSection>
-    </Page>
-  );
-  expect(view).toMatchSnapshot();
-  expect(view.find('.pf-c-page__main').getDOMNode().id).toBe('');
-});
+    const { asFragment } = render(
+      <Page {...props} header={Header} sidebar={Sidebar}>
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
 
-test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-  const Sidebar = <PageSidebar isNavOpen />;
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Check page to verify breadcrumb is created', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+    const PageBreadcrumb = () => (
+      <Breadcrumb>
+        <BreadcrumbItem>Section Home</BreadcrumbItem>
+        <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+        <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Section Landing
+        </BreadcrumbItem>
+      </Breadcrumb>
+    );
 
-  const view = mount(
-    <Page {...props} header={Header} sidebar={Sidebar}>
-      <PageGroup sticky="bottom">
+    const { asFragment } = render(
+      <Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
+
+    expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+
+    const { asFragment } = render(
+      <Page {...props} header={Header} sidebar={Sidebar}>
         <PageBreadcrumb>
           <Breadcrumb>
             <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -157,6 +112,23 @@ test('Check page to verify grouped nav and breadcrumb - new components syntax',
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
+
+    expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Check page to verify nav is created - PageNavigation syntax', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+
+    const { asFragment } = render(
+      <Page {...props} header={Header} sidebar={Sidebar}>
         <PageNavigation>
           <Nav aria-label="Nav" variant="tertiary">
             <NavList>
@@ -170,22 +142,114 @@ test('Check page to verify grouped nav and breadcrumb - new components syntax',
             </NavList>
           </Nav>
         </PageNavigation>
-      </PageGroup>
-      <PageSection variant="default">Section with default background</PageSection>
-      <PageSection variant="light">Section with light background</PageSection>
-      <PageSection variant="dark">Section with dark background</PageSection>
-      <PageSection variant="darker">Section with darker background</PageSection>
-    </Page>
-  );
-  expect(view).toMatchSnapshot();
-  expect(view.find('.pf-c-page__main').getDOMNode().id).toBe('');
-});
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
+
+    expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+
+    const { asFragment } = render(
+      <Page {...props} header={Header} sidebar={Sidebar}>
+        <PageGroup sticky="bottom">
+          <PageBreadcrumb>
+            <Breadcrumb>
+              <BreadcrumbItem>Section Home</BreadcrumbItem>
+              <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+              <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+              <BreadcrumbItem to="#" isActive>
+                Section Landing
+              </BreadcrumbItem>
+            </Breadcrumb>
+          </PageBreadcrumb>
+          <PageNavigation>
+            <Nav aria-label="Nav" variant="tertiary">
+              <NavList>
+                <NavItem itemId={0} isActive>
+                  System Panel
+                </NavItem>
+                <NavItem itemId={1}>Policy</NavItem>
+                <NavItem itemId={2}>Authentication</NavItem>
+                <NavItem itemId={3}>Network Services</NavItem>
+                <NavItem itemId={4}>Server</NavItem>
+              </NavList>
+            </Nav>
+          </PageNavigation>
+        </PageGroup>
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
+
+    expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+    const crumb = (
+      <PageBreadcrumb>
+        <Breadcrumb>
+          <BreadcrumbItem>Section Home</BreadcrumbItem>
+          <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+          <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+          <BreadcrumbItem to="#" isActive>
+            Section Landing
+          </BreadcrumbItem>
+        </Breadcrumb>
+      </PageBreadcrumb>
+    );
+    const nav = (
+      <Nav aria-label="Nav" variant="tertiary">
+        <NavList>
+          <NavItem itemId={0} isActive>
+            System Panel
+          </NavItem>
+          <NavItem itemId={1}>Policy</NavItem>
+          <NavItem itemId={2}>Authentication</NavItem>
+          <NavItem itemId={3}>Network Services</NavItem>
+          <NavItem itemId={4}>Server</NavItem>
+        </NavList>
+      </Nav>
+    );
+
+    const { asFragment } = render(
+      <Page
+        {...props}
+        header={Header}
+        sidebar={Sidebar}
+        breadcrumb={crumb}
+        tertiaryNav={nav}
+        isBreadcrumbGrouped
+        isTertiaryNavGrouped
+        groupProps={{ sticky: 'bottom', hasShadowTop: true }}
+      >
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
 
-test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-  const Sidebar = <PageSidebar isNavOpen />;
-  const crumb = (
-    <PageBreadcrumb>
+    expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Check page to verify skip to content points to main content region', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+    const PageBreadcrumb = (
       <Breadcrumb>
         <BreadcrumbItem>Section Home</BreadcrumbItem>
         <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
@@ -194,73 +258,29 @@ test('Check page to verify grouped nav and breadcrumb - old / props syntax', ()
           Section Landing
         </BreadcrumbItem>
       </Breadcrumb>
-    </PageBreadcrumb>
-  );
-  const nav = (
-    <Nav aria-label="Nav" variant="tertiary">
-      <NavList>
-        <NavItem itemId={0} isActive>
-          System Panel
-        </NavItem>
-        <NavItem itemId={1}>Policy</NavItem>
-        <NavItem itemId={2}>Authentication</NavItem>
-        <NavItem itemId={3}>Network Services</NavItem>
-        <NavItem itemId={4}>Server</NavItem>
-      </NavList>
-    </Nav>
-  );
-  const view = mount(
-    <Page
-      {...props}
-      header={Header}
-      sidebar={Sidebar}
-      breadcrumb={crumb}
-      tertiaryNav={nav}
-      isBreadcrumbGrouped
-      isTertiaryNavGrouped
-      groupProps={{ sticky: 'bottom', hasShadowTop: true }}
-    >
-      <PageSection variant="default">Section with default background</PageSection>
-      <PageSection variant="light">Section with light background</PageSection>
-      <PageSection variant="dark">Section with dark background</PageSection>
-      <PageSection variant="darker">Section with darker background</PageSection>
-    </Page>
-  );
-  expect(view).toMatchSnapshot();
-  expect(view.find('.pf-c-page__main').getDOMNode().id).toBe('');
-});
+    );
+    const mainId = 'main-content-page-layout-test-nav';
+    const PageSkipToContent = <SkipToContent href={`#${mainId}`}>Skip to Content</SkipToContent>;
+
+    const { asFragment } = render(
+      <Page
+        {...props}
+        header={Header}
+        sidebar={Sidebar}
+        breadcrumb={PageBreadcrumb}
+        skipToContent={PageSkipToContent}
+        mainContainerId={mainId}
+        data-testid="page-test-id"
+      >
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
 
-test('Check page to verify skip to content points to main content region', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-  const Sidebar = <PageSidebar isNavOpen />;
-  const PageBreadcrumb = (
-    <Breadcrumb>
-      <BreadcrumbItem>Section Home</BreadcrumbItem>
-      <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
-      <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
-      <BreadcrumbItem to="#" isActive>
-        Section Landing
-      </BreadcrumbItem>
-    </Breadcrumb>
-  );
-  const mainId = 'main-content-page-layout-test-nav';
-  const PageSkipToContent = <SkipToContent href={`#${mainId}`}>Skip to Content</SkipToContent>;
-  const view = mount(
-    <Page
-      {...props}
-      header={Header}
-      sidebar={Sidebar}
-      breadcrumb={PageBreadcrumb}
-      skipToContent={PageSkipToContent}
-      mainContainerId={mainId}
-    >
-      <PageSection variant="default">Section with default background</PageSection>
-      <PageSection variant="light">Section with light background</PageSection>
-      <PageSection variant="dark">Section with dark background</PageSection>
-      <PageSection variant="darker">Section with darker background</PageSection>
-    </Page>
-  );
-  expect(view).toMatchSnapshot();
-  expect(view.find('.pf-c-page').getDOMNode().id).toBe(props.id);
-  expect(view.find('.pf-c-page__main').getDOMNode().id).toBe(mainId);
+    expect(screen.getByRole('main')).toHaveAttribute('id', mainId);
+    expect(screen.getByTestId('page-test-id')).toHaveAttribute('id', props.id);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });