@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`skeleton circle skeleton 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-circle"
   >
@@ -9,11 +9,11 @@ exports[`skeleton circle skeleton 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton default 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
   >
@@ -21,11 +21,11 @@ exports[`skeleton default 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 2xl font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-2xl"
   >
@@ -33,11 +33,11 @@ exports[`skeleton skeleton with 2xl font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 3xl font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-3xl"
   >
@@ -45,11 +45,11 @@ exports[`skeleton skeleton with 3xl font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 4xl font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-4xl"
   >
@@ -57,11 +57,11 @@ exports[`skeleton skeleton with 4xl font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 25% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 25%;"
@@ -70,11 +70,11 @@ exports[`skeleton skeleton with 25% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 25% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 25%;"
@@ -83,11 +83,11 @@ exports[`skeleton skeleton with 25% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 33% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 33%;"
@@ -96,11 +96,11 @@ exports[`skeleton skeleton with 33% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 33% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 33%;"
@@ -109,11 +109,11 @@ exports[`skeleton skeleton with 33% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 50% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 50%;"
@@ -122,11 +122,11 @@ exports[`skeleton skeleton with 50% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 50% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 50%;"
@@ -135,11 +135,11 @@ exports[`skeleton skeleton with 50% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 66% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 66%;"
@@ -148,11 +148,11 @@ exports[`skeleton skeleton with 66% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 66% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 66%;"
@@ -161,11 +161,11 @@ exports[`skeleton skeleton with 66% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 75% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 75%;"
@@ -174,11 +174,11 @@ exports[`skeleton skeleton with 75% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 75% width 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Width: 75%;"
@@ -187,11 +187,11 @@ exports[`skeleton skeleton with 75% width 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with 100% height 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton"
     style="--pf-c-skeleton--Height: 100%;"
@@ -200,11 +200,11 @@ exports[`skeleton skeleton with 100% height 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with lg font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-lg"
   >
@@ -212,11 +212,11 @@ exports[`skeleton skeleton with lg font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with md font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-md"
   >
@@ -224,11 +224,11 @@ exports[`skeleton skeleton with md font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with sm font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-sm"
   >
@@ -236,11 +236,11 @@ exports[`skeleton skeleton with sm font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton skeleton with xl font size 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-text-xl"
   >
@@ -248,11 +248,11 @@ exports[`skeleton skeleton with xl font size 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`skeleton square skeleton 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-skeleton pf-m-square"
   >
@@ -260,5 +260,5 @@ exports[`skeleton square skeleton 1`] = `
       class="pf-u-screen-reader"
     />
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -5,13 +5,13 @@ import { SkipToContent } from '../SkipToContent';
 const props = {};
 
 test('Verify Skip To Content', () => {
-  const view = render(<SkipToContent href="#main-content" {...props} />);
+  const { asFragment } = render(<SkipToContent href="#main-content" {...props} />);
   // Add a useful assertion here.
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Verify Skip To Content if forced to display', () => {
-  const view = render(<SkipToContent href="#main-content" {...props} show />);
+  const { asFragment } = render(<SkipToContent href="#main-content" {...props} show />);
   // Add a useful assertion here.
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Verify Skip To Content 1`] = `
-<div>
+<DocumentFragment>
   <a
     class="pf-c-button pf-m-primary pf-c-skip-to-content"
     href="#main-content"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Verify Skip To Content if forced to display 1`] = `
-<div>
+<DocumentFragment>
   <a
     class="pf-c-button pf-m-primary pf-c-skip-to-content"
     href="#main-content"
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/Slider/_tests_/Slider.test.tsx

@@ -5,17 +5,17 @@ import { Button } from '../../Button';
 
 describe('slider', () => {
   test('renders continuous slider', () => {
-    const view = render(<Slider value={50} isInputVisible inputValue={50} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Slider value={50} isInputVisible inputValue={50} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders discrete slider', () => {
-    const view = render(<Slider value={50} min={10} max={110} step={2} isInputVisible inputValue={50} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Slider value={50} min={10} max={110} step={2} isInputVisible inputValue={50} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders discrete slider with custom steps', () => {
-    const view = render(
+    const { asFragment } = render(
       <Slider
         value={50}
         customSteps={[
@@ -27,11 +27,11 @@ describe('slider', () => {
         ]}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders continuous slider with custom steps', () => {
-    const view = render(
+    const { asFragment } = render(
       <Slider
         value={50}
         areCustomStepsContinuous
@@ -41,37 +41,41 @@ describe('slider', () => {
         ]}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders slider with input', () => {
-    const view = render(<Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="right" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="right" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders slider with input above thumb', () => {
-    const view = render(<Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="aboveThumb" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="aboveThumb" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders slider with input actions', () => {
-    const view = render(
+    const { asFragment } = render(
       <Slider
         value={50}
         leftActions={<Button variant="plain" aria-label="Minus" />}
         rightActions={<Button variant="plain" aria-label="Plus" />}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders disabled slider', () => {
-    const view = render(<Slider value={50} isDisabled />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Slider value={50} isDisabled />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders slider with tooltip on thumb', () => {
-    const view = render(<Slider value={50} hasTooltipOverThumb />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Slider value={50} hasTooltipOverThumb />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`slider renders continuous slider 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
@@ -68,11 +68,11 @@ exports[`slider renders continuous slider 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders continuous slider with custom steps 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -131,11 +131,11 @@ exports[`slider renders continuous slider with custom steps 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders disabled slider 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider pf-m-disabled"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -188,11 +188,11 @@ exports[`slider renders disabled slider 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders discrete slider 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 40%; --pf-c-slider__value--c-form-control--width-chars: 2;"
@@ -259,11 +259,11 @@ exports[`slider renders discrete slider 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders discrete slider with custom steps 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -351,11 +351,11 @@ exports[`slider renders discrete slider with custom steps 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders slider with input 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
@@ -426,17 +426,16 @@ exports[`slider renders slider with input 1`] = `
         <span
           class="pf-c-input-group__text pf-m-plain"
         >
-           
-          %
+           %
         </span>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders slider with input above thumb 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
@@ -506,18 +505,17 @@ exports[`slider renders slider with input above thumb 1`] = `
           <span
             class="pf-c-input-group__text pf-m-plain"
           >
-             
-            %
+             %
           </span>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders slider with input actions 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -596,11 +594,11 @@ exports[`slider renders slider with input actions 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`slider renders slider with tooltip on thumb 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-slider"
     style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
@@ -653,5 +651,5 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -3,26 +3,26 @@ import { render } from '@testing-library/react';
 import { Spinner } from '../Spinner';
 
 test('simple spinner', () => {
-  const view = render(<Spinner />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('small spinner', () => {
-  const view = render(<Spinner size="sm" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner size="sm" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('medium spinner', () => {
-  const view = render(<Spinner size="md" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner size="md" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('large spinner', () => {
-  const view = render(<Spinner size="lg" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner size="lg" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('extra large spinner', () => {
-  const view = render(<Spinner size="xl" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Spinner size="xl" />);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`extra large spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -18,11 +18,11 @@ exports[`extra large spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;
 
 exports[`large spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -39,11 +39,11 @@ exports[`large spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;
 
 exports[`medium spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -60,11 +60,11 @@ exports[`medium spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;
 
 exports[`simple spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -81,11 +81,11 @@ exports[`simple spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;
 
 exports[`small spinner 1`] = `
-<div>
+<DocumentFragment>
   <span
     aria-label="Contents"
     aria-valuetext="Loading..."
@@ -102,5 +102,5 @@ exports[`small spinner 1`] = `
       class="pf-c-spinner__tail-ball"
     />
   </span>
-</div>
+</DocumentFragment>
 `;