@patternfly/react-core 4.202.15 → 4.202.18

package/src/components/Divider/examples/Divider.md

@@ -6,96 +6,43 @@ propComponents: ['Divider']
 ---
 
 ## Examples
+
 ### Using hr
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider />
+```ts file='./DividerUsingHr.tsx'
 ```
 
 ### Using li
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core/dist';
-
-<ul>
-  <li>List item one</li>
-  <Divider component="li"/>
-  <li>List item two</li>
-</ul>
+
+```ts file='./DividerUsingLi.tsx'
 ```
 
 ### Using div
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider component="div"/>
+```ts file='./DividerUsingDiv.tsx'
 ```
 
 ### Inset medium
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider inset={{default: 'insetMd'}}/>
+```ts file='./DividerInsetMedium.tsx'
 ```
 
 ### Inset at various breakpoints
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
-
-<Divider
-  inset={{
-    default: 'insetMd',
-    md: 'insetNone',
-    lg: 'inset3xl',
-    xl: 'insetLg'
-  }}
-/>
+
+```ts file='./DividerInsetVariousBreakpoints.tsx'
 ```
 
 ### Vertical in flex layout
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical/>
-  <FlexItem>second item</FlexItem>
-</Flex>
+
+```ts file='./DividerVerticalFlex.tsx'
 ```
 
-### Vertical, inset medium in flex layout
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+### Vertical in flex layout, inset medium
 
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical inset={{default: 'insetMd'}}/>
-  <FlexItem>second item</FlexItem>
-</Flex>
+```ts file='./DividerVerticalFlexInsetMedium.tsx'
 ```
 
-### Vertical, inset at various breakpoints
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical
-    inset={{
-      default: 'insetMd',
-      md: 'insetNone',
-      lg: 'insetSm',
-      xl: 'insetXs'
-    }}
-  />
-  <FlexItem>first item</FlexItem>
-</Flex>
+### Vertical in flex layout, inset at various breakpoints
+
+```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
 ```

package/src/components/Divider/examples/DividerInsetMedium.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerInsetMedium: React.FunctionComponent = () => <Divider inset={{ default: 'insetMd' }} />;

package/src/components/Divider/examples/DividerInsetVariousBreakpoints.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerInsetVariousBreakpoints: React.FunctionComponent = () => (
+  <Divider
+    inset={{
+      default: 'insetMd',
+      md: 'insetNone',
+      lg: 'inset3xl',
+      xl: 'insetLg'
+    }}
+  />
+);

package/src/components/Divider/examples/DividerUsingDiv.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerUsingDiv: React.FunctionComponent = () => <Divider component="div" />;

package/src/components/Divider/examples/DividerUsingHr.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerUsingHr: React.FunctionComponent = () => <Divider />;

package/src/components/Divider/examples/DividerUsingLi.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Divider } from '@patternfly/react-core';
+
+export const DividerUsingLi: React.FunctionComponent = () => (
+  <ul>
+    <li>List item one</li>
+    <Divider component="li" />
+    <li>List item two</li>
+  </ul>
+);

package/src/components/Divider/examples/DividerVerticalFlex.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerVerticalFlex: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider isVertical />
+    <FlexItem>second item</FlexItem>
+  </Flex>
+);

package/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider isVertical inset={{ default: 'insetMd' }} />
+    <FlexItem>second item</FlexItem>
+  </Flex>
+);

package/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider
+      isVertical
+      inset={{
+        default: 'insetMd',
+        md: 'insetNone',
+        lg: 'insetSm',
+        xl: 'insetXs'
+      }}
+    />
+    <FlexItem>first item</FlexItem>
+  </Flex>
+);

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

@@ -4,7 +4,6 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
-import { Form } from '../../Form';
 import { FormSelect } from '../FormSelect';
 import { FormSelectOption } from '../FormSelectOption';
 import { FormSelectOptionGroup } from '../FormSelectOptionGroup';

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

@@ -1,120 +1,120 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
-import { List, ListVariant, ListComponent, OrderType } from '../List';
-import { ListItem } from '../ListItem';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
 import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+import { List, ListVariant, ListComponent, OrderType } from '../List';
+import { ListItem } from '../ListItem';
 
 const ListItems = () => (
-  <React.Fragment>
-    <List>
-      <ListItem>First</ListItem>
-      <ListItem>Second</ListItem>
-      <ListItem>Third</ListItem>
-    </List>
-  </React.Fragment>
+  <List>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
 );
 
-describe('list', () => {
+describe('List', () => {
   test('simple list', () => {
-    const view = render(
+    const { asFragment } = render(
       <List>
         <ListItems />
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('inline list', () => {
-    const view = render(
+    const { asFragment } = render(
       <List variant={ListVariant.inline}>
         <ListItems />
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('ordered list', () => {
-    const view = mount(
+    const { asFragment } = render(
       <List component={ListComponent.ol}>
         <ListItem>Apple</ListItem>
         <ListItem>Banana</ListItem>
         <ListItem>Orange</ListItem>
       </List>
     );
-    expect(view.find('ol').length).toBe(1);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('ordered list starts with 2nd item', () => {
-    const view = mount(
+    render(
       <List component={ListComponent.ol} start={2}>
         <ListItem>Banana</ListItem>
         <ListItem>Orange</ListItem>
       </List>
     );
-    expect(view.find('ol').prop('start')).toBe(2);
+    expect(screen.getByRole('list')).toHaveAttribute('start', '2');
   });
 
   test('ordered list items will be numbered with uppercase letters', () => {
-    const view = mount(
+    render(
       <List component={ListComponent.ol} type={OrderType.uppercaseLetter}>
         <ListItem>Banana</ListItem>
         <ListItem>Orange</ListItem>
       </List>
     );
-    expect(view.find('ol').prop('type')).toBe('A');
+    expect(screen.getByRole('list')).toHaveAttribute('type', 'A');
   });
 
   test('inlined ordered list', () => {
-    const view = mount(
+    render(
       <List variant={ListVariant.inline} component={ListComponent.ol}>
         <ListItem>Apple</ListItem>
         <ListItem>Banana</ListItem>
         <ListItem>Orange</ListItem>
       </List>
     );
-    expect(view.find('ol.pf-m-inline').length).toBe(1);
+    expect(screen.getByRole('list')).toHaveClass('pf-m-inline');
   });
 
   test('bordered list', () => {
-    const view = render(
+    render(
       <List isBordered>
         <ListItems />
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-bordered');
   });
 
   test('plain list', () => {
-    const view = render(
+    render(
       <List isPlain>
         <ListItems />
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-plain');
   });
 
   test('icon list', () => {
-    const view = render(
+    const { asFragment } = render(
       <List isPlain>
         <ListItem icon={<BookOpen />}>Apple</ListItem>
         <ListItem icon={<Key />}>Banana</ListItem>
         <ListItem icon={<Desktop />}>Orange</ListItem>
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('icon large list', () => {
-    const view = render(
-      <List iconSize='large'>
+    const { asFragment } = render(
+      <List iconSize="large">
         <ListItem icon={<BookOpen />}>Apple</ListItem>
         <ListItem icon={<Key />}>Banana</ListItem>
         <ListItem icon={<Desktop />}>Orange</ListItem>
       </List>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,35 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`list bordered list 1`] = `
-<div>
-  <ul
-    class="pf-c-list pf-m-bordered"
-  >
-    <ul
-      class="pf-c-list"
-    >
-      <li
-        class=""
-      >
-        First
-      </li>
-      <li
-        class=""
-      >
-        Second
-      </li>
-      <li
-        class=""
-      >
-        Third
-      </li>
-    </ul>
-  </ul>
-</div>
-`;
-
-exports[`list icon large list 1`] = `
-<div>
+exports[`List icon large list 1`] = `
+<DocumentFragment>
   <ul
     class="pf-c-list pf-m-icon-lg"
   >
@@ -100,11 +72,11 @@ exports[`list icon large list 1`] = `
       Orange
     </li>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
-exports[`list icon list 1`] = `
-<div>
+exports[`List icon list 1`] = `
+<DocumentFragment>
   <ul
     class="pf-c-list pf-m-plain"
   >
@@ -175,11 +147,11 @@ exports[`list icon list 1`] = `
       Orange
     </li>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
-exports[`list inline list 1`] = `
-<div>
+exports[`List inline list 1`] = `
+<DocumentFragment>
   <ul
     class="pf-c-list pf-m-inline"
   >
@@ -203,39 +175,36 @@ exports[`list inline list 1`] = `
       </li>
     </ul>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
-exports[`list plain list 1`] = `
-<div>
-  <ul
-    class="pf-c-list pf-m-plain"
+exports[`List ordered list 1`] = `
+<DocumentFragment>
+  <ol
+    class="pf-c-list"
+    type="1"
   >
-    <ul
-      class="pf-c-list"
+    <li
+      class=""
     >
-      <li
-        class=""
-      >
-        First
-      </li>
-      <li
-        class=""
-      >
-        Second
-      </li>
-      <li
-        class=""
-      >
-        Third
-      </li>
-    </ul>
-  </ul>
-</div>
+      Apple
+    </li>
+    <li
+      class=""
+    >
+      Banana
+    </li>
+    <li
+      class=""
+    >
+      Orange
+    </li>
+  </ol>
+</DocumentFragment>
 `;
 
-exports[`list simple list 1`] = `
-<div>
+exports[`List simple list 1`] = `
+<DocumentFragment>
   <ul
     class="pf-c-list"
   >
@@ -259,5 +228,5 @@ exports[`list simple list 1`] = `
       </li>
     </ul>
   </ul>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,46 +1,50 @@
 import 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 { Menu } from '../Menu';
 
-test('should render Menu successfully', () => {
-    const view = render(
-        <Menu activeItemId={0} onSelect={jest.fn()}>
-            content
-        </Menu>
+describe('Menu', () => {
+  test('should render Menu successfully', () => {
+    const { asFragment } = render(
+      <Menu activeItemId={0} onSelect={jest.fn()}>
+        content
+      </Menu>
     );
-    expect(view.container).toMatchSnapshot();
-});
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-describe('with isPlain', () => {
+  describe('with isPlain', () => {
     test('should render Menu with plain styles applied', () => {
-        const view = mount(
-            <Menu activeItemId={0} onSelect={jest.fn()} isPlain>
-                content
-            </Menu>
-        );
-        expect(view.find('div.pf-m-plain')).toMatchSnapshot();
+      render(
+        <Menu activeItemId={0} onSelect={jest.fn()} isPlain>
+          content
+        </Menu>
+      );
+      expect(screen.getByText('content')).toHaveClass('pf-m-plain');
     });
-});
+  });
 
-describe('with isScrollable', () => {
+  describe('with isScrollable', () => {
     test('should render Menu with scrollable styles applied', () => {
-        const view = mount(
-            <Menu activeItemId={0} onSelect={jest.fn()} isScrollable>
-                content
-            </Menu>
-        );
-        expect(view.find('div.pf-m-scrollable')).toMatchSnapshot();
+      render(
+        <Menu activeItemId={0} onSelect={jest.fn()} isScrollable>
+          content
+        </Menu>
+      );
+      expect(screen.getByText('content')).toHaveClass('pf-m-scrollable');
     });
-});
+  });
 
-describe('with isNavFlyout', () => {
+  describe('with isNavFlyout', () => {
     test('should render Menu with nav flyout styles applied', () => {
-        const view = mount(
-            <Menu activeItemId={0} onSelect={jest.fn()} isNavFlyout>
-                content
-            </Menu>
-        );
-        expect(view.find('div.pf-m-nav')).toMatchSnapshot();
+      render(
+        <Menu activeItemId={0} onSelect={jest.fn()} isNavFlyout>
+          content
+        </Menu>
+      );
+      expect(screen.getByText('content')).toHaveClass('pf-m-nav');
     });
-});
+  });
+});

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render Menu successfully 1`] = `
-<div>
+exports[`Menu should render Menu successfully 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-menu"
     data-ouia-component-id="OUIA-Generated-Menu-1"
@@ -10,38 +10,5 @@ exports[`should render Menu successfully 1`] = `
   >
     content
   </div>
-</div>
-`;
-
-exports[`with isNavFlyout should render Menu with nav flyout styles applied 1`] = `
-<div
-  className="pf-c-menu pf-m-nav"
-  data-ouia-component-id="OUIA-Generated-Menu-4"
-  data-ouia-component-type="PF4/Menu"
-  data-ouia-safe={true}
->
-  content
-</div>
-`;
-
-exports[`with isPlain should render Menu with plain styles applied 1`] = `
-<div
-  className="pf-c-menu pf-m-plain"
-  data-ouia-component-id="OUIA-Generated-Menu-2"
-  data-ouia-component-type="PF4/Menu"
-  data-ouia-safe={true}
->
-  content
-</div>
-`;
-
-exports[`with isScrollable should render Menu with scrollable styles applied 1`] = `
-<div
-  className="pf-c-menu pf-m-scrollable"
-  data-ouia-component-id="OUIA-Generated-Menu-3"
-  data-ouia-component-type="PF4/Menu"
-  data-ouia-safe={true}
->
-  content
-</div>
+</DocumentFragment>
 `;