@patternfly/react-core 4.206.5 → 4.206.6

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

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataList Cell default 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-data-list__cell"
   >
     Secondary
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList Cells 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-data-list__item-content"
   >
@@ -28,74 +28,74 @@ exports[`DataList Cells 1`] = `
       Primary Id 2
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataList variants Breakpoint - 2xl 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-2xl"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataList variants Breakpoint - always 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataList variants Breakpoint - lg 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-lg"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataList variants Breakpoint - md 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-md"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataList variants Breakpoint - none 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-none"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataList variants Breakpoint - sm 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-sm"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataList variants Breakpoint - xl 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-xl"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataListAction button 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-data-list__item-action"
   >
@@ -111,11 +111,11 @@ exports[`DataList DataListAction button 1`] = `
       Delete
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataListAction dropdown 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-data-list__item-action"
   >
@@ -153,11 +153,11 @@ exports[`DataList DataListAction dropdown 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataListContent 1`] = `
-<div>
+<DocumentFragment>
   <section
     aria-label="Primary Content Details"
     class="pf-c-data-list__expandable-content"
@@ -169,11 +169,11 @@ exports[`DataList DataListContent 1`] = `
        test
     </div>
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList DataListContent hasNoPadding 1`] = `
-<div>
+<DocumentFragment>
   <section
     aria-label="Primary Content Details"
     class="pf-c-data-list__expandable-content"
@@ -186,61 +186,69 @@ exports[`DataList DataListContent hasNoPadding 1`] = `
       test
     </div>
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList Item 1`] = `
-<div>
+<DocumentFragment>
   <li
     aria-labelledby="item-1"
     class="pf-c-data-list__item data-list-item-custom"
     id=""
   />
-</div>
+</DocumentFragment>
 `;
 
-exports[`DataList Item default 1`] = `"<li id=\\"\\" class=\\"pf-c-data-list__item\\" aria-labelledby=\\"item-1\\"></li>"`;
+exports[`DataList Item default 1`] = `
+<DocumentFragment>
+  <li
+    aria-labelledby="item-1"
+    class="pf-c-data-list__item"
+    id=""
+  />
+</DocumentFragment>
+`;
 
 exports[`DataList List 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-md data-list-custom"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList List compact 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-compact pf-m-grid-md"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList List default 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-md"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList List draggable 1`] = `
-<div>
+<DocumentFragment>
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-compact pf-m-grid-md"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`DataList item row default 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-data-list__item-row"
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Button,
   DataList,
   DataListItem,
   DataListItemRow,
@@ -15,28 +14,13 @@ import {
   KebabToggle
 } from '@patternfly/react-core';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
 export const DataListExpandable: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [isOpen3, setIsOpen3] = React.useState(false);
-  const [allExpanded, setAllExpanded] = React.useState(false);
   const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
 
-  const onToggleAll = () => {
-    setAllExpanded(!allExpanded);
-  };
-
-  React.useEffect(() => {
-    if (allExpanded) {
-      setExpanded(['ex-toggle1', 'ex-toggle2', 'ex-toggle3']);
-    } else {
-      setExpanded([]);
-    }
-  }, [allExpanded]);
-
   const onToggle1 = isOpen1 => {
     setIsOpen1(isOpen1);
   };
@@ -68,13 +52,6 @@ export const DataListExpandable: React.FunctionComponent = () => {
   };
   return (
     <React.Fragment>
-      <Button onClick={onToggleAll}>
-        {allExpanded && <AngleDownIcon />}
-        {!allExpanded && <AngleRightIcon />}
-        Expand/Collapse All
-      </Button>
-      <br />
-      <br />
       <DataList aria-label="Expandable data list example">
         <DataListItem aria-labelledby="ex-item1" isExpanded={expanded.includes('ex-toggle1')}>
           <DataListItemRow>

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

@@ -3,6 +3,6 @@ import { DatePicker } from '../DatePicker';
 import React from 'react';
 
 test('disabled date picker', () => {
-  const view = render(<DatePicker value="2020-11-20" isDisabled aria-label="disabled date picker" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<DatePicker value="2020-11-20" isDisabled aria-label="disabled date picker" />);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`disabled date picker 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-date-picker"
     style="--pf-c-date-picker__input--c-form-control--width-chars: 10;"
@@ -46,7 +46,6 @@ exports[`disabled date picker 1`] = `
         </button>
       </div>
     </div>
-    
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -9,53 +9,53 @@ import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTex
 
 describe('Description List', () => {
   test('default', () => {
-    const view = render(<DescriptionList />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DescriptionList />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('1 col on all breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
       <DescriptionList columnModifier={{ default: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }} />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('2 col on all breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
       <DescriptionList columnModifier={{ default: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }} />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('3 col on all breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
       <DescriptionList columnModifier={{ default: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }} />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Horizontal Description List', () => {
-    const view = render(<DescriptionList isHorizontal />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DescriptionList isHorizontal />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Compact Description List', () => {
-    const view = render(<DescriptionList isCompact />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DescriptionList isCompact />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Compact Horizontal Description List', () => {
-    const view = render(<DescriptionList isCompact isHorizontal />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DescriptionList isCompact isHorizontal />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Fluid Horizontal Description List', () => {
-    const view = render(<DescriptionList isFluid isHorizontal />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DescriptionList isFluid isHorizontal />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('alignment breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
       <DescriptionList
         isHorizontal
         orientation={{
@@ -67,64 +67,64 @@ describe('Description List', () => {
         }}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Auto Column Widths Description List', () => {
-    const view = render(<DescriptionList isAutoColumnWidths />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DescriptionList isAutoColumnWidths />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Inline Grid Description List', () => {
-    const view = render(<DescriptionList isInlineGrid />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DescriptionList isInlineGrid />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Auto fit Description List', () => {
-    const view = render(<DescriptionList isAutoFit />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<DescriptionList isAutoFit />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Auto fit with responsive grid Description List', () => {
-    const view = render(
+    const { asFragment } = render(
       <DescriptionList isAutoFit autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }} />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Term default', () => {
-    const view = render(
+    const { asFragment } = render(
       <DescriptionListTerm key="term-id-1" aria-labelledby="term-1">
         test
       </DescriptionListTerm>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Term helper text', () => {
-    const view = render(
+    const { asFragment } = render(
       <DescriptionListTermHelpText key="term-id-1" aria-labelledby="term-1">
         <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
       </DescriptionListTermHelpText>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Group', () => {
-    const view = render(
+    const { asFragment } = render(
       <DescriptionListGroup className="custom-description-list-group" aria-labelledby="group-1">
         test
       </DescriptionListGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Description', () => {
-    const view = render(
+    const { asFragment } = render(
       <DescriptionListDescription className="custom-description-list-description" aria-labelledby="description-1">
         test
       </DescriptionListDescription>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,72 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Description List 1 col on all breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-1-col pf-m-1-col-on-md pf-m-1-col-on-lg pf-m-1-col-on-xl pf-m-1-col-on-2xl"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List 2 col on all breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-2-col pf-m-2-col-on-md pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-2-col-on-2xl"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List 3 col on all breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-3-col pf-m-3-col-on-md pf-m-3-col-on-lg pf-m-3-col-on-xl pf-m-3-col-on-2xl"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Auto Column Widths Description List 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-auto-column-widths"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Auto fit Description List 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-auto-fit"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Auto fit with responsive grid Description List 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-auto-fit"
     style="--pf-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Compact Description List 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-compact"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Compact Horizontal Description List 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-horizontal pf-m-compact"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Description 1`] = `
-<div>
+<DocumentFragment>
   <dd
     aria-labelledby="description-1"
     class="pf-c-description-list__description custom-description-list-description"
@@ -77,46 +77,46 @@ exports[`Description List Description 1`] = `
       test
     </div>
   </dd>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Fluid Horizontal Description List 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-horizontal pf-m-fluid"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Group 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-labelledby="group-1"
     class="pf-c-description-list__group custom-description-list-group"
   >
     test
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Horizontal Description List 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-horizontal"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Inline Grid Description List 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-inline-grid"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Term default 1`] = `
-<div>
+<DocumentFragment>
   <dt
     aria-labelledby="term-1"
     class="pf-c-description-list__term"
@@ -127,11 +127,11 @@ exports[`Description List Term default 1`] = `
       test
     </span>
   </dt>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List Term helper text 1`] = `
-<div>
+<DocumentFragment>
   <dt
     aria-labelledby="term-1"
     class="pf-c-description-list__term"
@@ -145,21 +145,21 @@ exports[`Description List Term helper text 1`] = `
       test
     </span>
   </dt>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List alignment breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list pf-m-horizontal pf-m-horizontal-on-sm pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Description List default 1`] = `
-<div>
+<DocumentFragment>
   <dl
     class="pf-c-description-list"
   />
-</div>
+</DocumentFragment>
 `;