@patternfly/react-core 4.202.30 → 4.202.33

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`basic not selected 1`] = `
-<div>
+exports[`ToggleGroup basic not selected 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-toggle-group__item"
   >
@@ -19,18 +19,18 @@ exports[`basic not selected 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`basic selected 1`] = `
-<div>
+exports[`ToggleGroup basic selected 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-toggle-group__item"
   >
     <button
       aria-label="basic selected"
-      aria-pressed="false"
-      class="pf-c-toggle-group__button"
+      aria-pressed="true"
+      class="pf-c-toggle-group__button pf-m-selected"
       id="toggleGroupItem"
       type="button"
     >
@@ -41,18 +41,18 @@ exports[`basic selected 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`icon variant 1`] = `
-<div>
+exports[`ToggleGroup icon variant 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-toggle-group__item"
   >
     <button
       aria-label="icon variant"
-      aria-pressed="false"
-      class="pf-c-toggle-group__button"
+      aria-pressed="true"
+      class="pf-c-toggle-group__button pf-m-selected"
       id="toggleGroupItem"
       type="button"
     >
@@ -63,12 +63,13 @@ exports[`icon variant 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`isCompact 1`] = `
-<div>
+exports[`ToggleGroup isCompact 1`] = `
+<DocumentFragment>
   <div
+    aria-label="Label"
     class="pf-c-toggle-group pf-m-compact"
     role="group"
   >
@@ -103,11 +104,11 @@ exports[`isCompact 1`] = `
       </button>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`isDisabled 1`] = `
-<div>
+exports[`ToggleGroup isDisabled 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-toggle-group__item"
   >
@@ -126,5 +127,5 @@ exports[`isDisabled 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Wizard/Wizard.tsx

@@ -54,6 +54,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   descriptionId?: string;
   /** The wizard description */
   description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
   hideClose?: boolean;
   /** Callback function to close the wizard */
@@ -111,6 +113,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
   static defaultProps: PickOptional<WizardProps> = {
     title: null,
     description: '',
+    descriptionComponent: 'p',
     className: '',
     startAtStep: 1,
     nextButtonText: 'Next',
@@ -312,6 +315,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       height,
       title,
       description,
+      descriptionComponent,
       onClose,
       onSave,
       onBack,
@@ -453,6 +457,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
               onClose={onClose}
               title={title}
               description={description}
+              descriptionComponent={descriptionComponent}
               closeButtonAriaLabel={closeButtonAriaLabel}
               hideClose={hideClose}
             />

package/src/components/Wizard/WizardHeader.tsx

@@ -12,6 +12,8 @@ export interface WizardHeaderProps {
   title: string;
   /** Description of the wizard */
   description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
   hideClose?: boolean;
   /** Aria-label applied to the X (Close) button */
@@ -29,6 +31,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   hideClose,
   closeButtonAriaLabel,
   titleId,
+  descriptionComponent: Component = 'p',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
@@ -41,9 +44,9 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
       {title || <>&nbsp;</>}
     </Title>
     {description && (
-      <p className={css(styles.wizardDescription)} id={descriptionId}>
+      <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}
-      </p>
+      </Component>
     )}
   </div>
 );

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

@@ -1,201 +1,207 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow, mount } from 'enzyme';
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
 
-test('Wizard should match snapshot', () => {
-  const steps: WizardStep[] = [
-    { name: 'A', component: <p>Step 1</p> },
-    {
-      name: 'B',
-      steps: [
-        {
-          name: 'B-1',
-          component: <p>Step 2</p>,
-          enableNext: true
-        },
-        {
-          name: 'B-2',
-          component: <p>Step 3</p>,
-          enableNext: false
-        }
-      ]
-    },
-    { name: 'C', component: <p>Step 4</p> },
-    { name: 'D', component: <p>Step 5</p> }
-  ];
-  const onBack: WizardStepFunctionType = step => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const name = { step };
-  };
-
-  const view = render(
-    <Wizard title="Wizard title" description="Description here" steps={steps} startAtStep={1} onBack={onBack} />
-  );
-
-  expect(view.container).toMatchSnapshot();
-});
+describe('Wizard', () => {
+  test('Wizard should match snapshot', () => {
+    const steps: WizardStep[] = [
+      { name: 'A', component: <p>Step 1</p> },
+      {
+        name: 'B',
+        steps: [
+          {
+            name: 'B-1',
+            component: <p>Step 2</p>,
+            enableNext: true
+          },
+          {
+            name: 'B-2',
+            component: <p>Step 3</p>,
+            enableNext: false
+          }
+        ]
+      },
+      { name: 'C', component: <p>Step 4</p> },
+      { name: 'D', component: <p>Step 5</p> }
+    ];
+    const onBack: WizardStepFunctionType = step => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const name = { step };
+    };
 
-test('Expandable Nav Wizard should match snapshot', () => {
-  const steps: WizardStep[] = [
-    { name: 'A', component: <p>Step 1</p> },
-    {
-      name: 'B',
-      steps: [
-        {
-          name: 'B-1',
-          component: <p>Step 2</p>,
-          enableNext: true
-        },
-        {
-          name: 'B-2',
-          component: <p>Step 3</p>,
-          enableNext: false
-        }
-      ]
-    },
-    { name: 'C', component: <p>Step 4</p> },
-    { name: 'D', component: <p>Step 5</p> }
-  ];
-  const onBack: WizardStepFunctionType = step => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const name = { step };
-  };
-
-  const view = render(
-    <Wizard title="Wizard title" description="Description here" steps={steps} startAtStep={1} onBack={onBack} isNavExpandable />
-  );
-
-  expect(view.container).toMatchSnapshot();
-});
+    const { asFragment } = render(
+      <Wizard title="Wizard title" description="Description here" steps={steps} startAtStep={1} onBack={onBack} />
+    );
 
-test('bare wiz ', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      description="This wizard uses anchor tags for the nav item elements"
-      id="inPageWizWithAnchorsId"
-      steps={steps}
-    />
-  );
-  const view = mount(wiz);
-  const hasHeader = view.at(0).find('.pf-c-wizard__header').length;
-  const hasTitle = view.at(0).find('.pf-c-wizard__title').length;
-  expect(hasHeader).toBeFalsy();
-  expect(hasTitle).toBeFalsy();
-});
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('wiz with title ', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = <Wizard title="Wizard" description="This wizard has a title" steps={steps} />;
-  const view = mount(wiz).at(0);
-  const hasHeader = view.find('.pf-c-wizard__header').length;
-  const hasTitle = view.find('h2.pf-c-wizard__title').length;
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(hasHeader).toBe(1);
-  expect(hasTitle).toBe(1);
-  expect(nav.find('[aria-labelledby="pf-wizard-title-3"]').length).toBe(1);
-  expect(main.find('[aria-labelledby="pf-wizard-title-3"]').length).toBe(1);
-});
+  test('Expandable Nav Wizard should match snapshot', () => {
+    const steps: WizardStep[] = [
+      { name: 'A', component: <p>Step 1</p> },
+      {
+        name: 'B',
+        steps: [
+          {
+            name: 'B-1',
+            component: <p>Step 2</p>,
+            enableNext: true
+          },
+          {
+            name: 'B-2',
+            component: <p>Step 3</p>,
+            enableNext: false
+          }
+        ]
+      },
+      { name: 'C', component: <p>Step 4</p> },
+      { name: 'D', component: <p>Step 5</p> }
+    ];
+    const onBack: WizardStepFunctionType = step => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const name = { step };
+    };
 
-test('wiz with title and navAriaLabel combination', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = <Wizard title="Wizard" navAriaLabel="Some label" description="This wizard has a title" steps={steps} />;
-  const view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(nav.find('[aria-labelledby="pf-wizard-title-4"]').length).toBe(1);
-  expect(nav.find('[aria-label="Some label"]').length).toBe(1);
-  expect(main.props()['aria-label']).toBe(null);
-});
+    const { asFragment } = render(
+      <Wizard
+        title="Wizard title"
+        description="Description here"
+        steps={steps}
+        startAtStep={1}
+        onBack={onBack}
+        isNavExpandable
+      />
+    );
 
-test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      title="Wizard"
-      navAriaLabel="nav aria-label"
-      mainAriaLabel="main aria-label"
-      description="This wizard has a title"
-      steps={steps} />
-  );
-  const view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(nav.find('[aria-labelledby="pf-wizard-title-5"]').length).toBe(1);
-  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
-  expect(main.props()['aria-label']).toBe('main aria-label');
-});
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('wiz with navAriaLabel and mainAriaLabel but without title', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      navAriaLabel="nav aria-label"
-      mainAriaLabel="main aria-label"
-      description="This wizard has a title"
-      steps={steps} />
-  );
-  const view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(main.props()['aria-label']).toBe('main aria-label');
-  expect(main.props()['aria-labelledby']).toBe(null);
-  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
-  expect(nav.props()['aria-labelledby']).toBe(null);
-});
+  test('bare wiz', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
 
-test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      navAriaLabelledBy="nav-aria-labelledby"
-      navAriaLabel="nav aria-label"
-      mainAriaLabel="main aria-label"
-      description="This wizard has a title"
-      steps={steps} />
-  );
-  const view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
-  expect(nav.props()['aria-labelledby']).toBe('nav-aria-labelledby');
-});
+    const { asFragment } = render(
+      <Wizard
+        description="This wizard uses anchor tags for the nav item elements"
+        id="inPageWizWithAnchorsId"
+        steps={steps}
+      />
+    );
 
-test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      navAriaLabel="nav aria-label"
-      mainAriaLabel="main aria-label"
-      mainAriaLabelledBy="main-aria-labelledby"
-      description="This wizard has a title"
-      steps={steps} />
-  );
-  const view = mount(wiz).at(0);
-  const main = view.find('div.pf-c-wizard__main');
-  expect(main.props()['aria-label']).toBe('main aria-label');
-  expect(main.props()['aria-labelledby']).toBe('main-aria-labelledby');
-});
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('wiz with title', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+
+    render(<Wizard title="Wizard" description="This wizard has a title" steps={steps} data-testid="wizard-test-id" />);
+    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
+  });
+
+  test('wiz with title and navAriaLabel combination', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+
+    render(<Wizard title="Wizard" navAriaLabel="Some label" description="This wizard has a title" steps={steps} />);
+
+    const nav = screen.getByLabelText('Some label');
+
+    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-4');
+  });
+
+  test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+    render(
+      <Wizard
+        title="Wizard"
+        navAriaLabel="nav aria-label"
+        mainAriaLabel="main aria-label"
+        description="This wizard has a title"
+        steps={steps}
+      />
+    );
+
+    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
+    expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
+    expect(screen.getByLabelText('main aria-label')).toBeInTheDocument();
+  });
+
+  test('wiz with navAriaLabel and mainAriaLabel but without title', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+
+    render(
+      <Wizard
+        navAriaLabel="nav aria-label"
+        mainAriaLabel="main aria-label"
+        description="This wizard has a title"
+        steps={steps}
+      />
+    );
+
+    expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
+    expect(screen.getByLabelText('main aria-label')).toBeInTheDocument();
+  });
+
+  test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+
+    render(
+      <Wizard
+        navAriaLabelledBy="nav-aria-labelledby"
+        navAriaLabel="nav aria-label"
+        mainAriaLabel="main aria-label"
+        description="This wizard has a title"
+        steps={steps}
+      />
+    );
+
+    const nav = screen.getByLabelText('nav aria-label');
+
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
+  });
+
+  test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+    render(
+      <Wizard
+        navAriaLabel="nav aria-label"
+        mainAriaLabel="main aria-label"
+        mainAriaLabelledBy="main-aria-labelledby"
+        description="This wizard has a title"
+        steps={steps}
+      />
+    );
+
+    const main = screen.getByLabelText('main aria-label');
+
+    expect(main).toBeInTheDocument();
+    expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
+  });
+
+  test('wiz with title, navAriaLabelledBy, navAriaLabel, mainAriaLabel, and mainAriaLabelledby', () => {
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+    render(
+      <Wizard
+        title="Wiz title"
+        navAriaLabel="nav aria-label"
+        navAriaLabelledBy="nav-aria-labelledby"
+        mainAriaLabel="main aria-label"
+        mainAriaLabelledBy="main-aria-labelledby"
+        description="This wizard has a title"
+        steps={steps}
+      />
+    );
+
+    const nav = screen.getByLabelText('nav aria-label');
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
 
-test('wiz with title, navAriaLabelledBy, navAriaLabel, mainAriaLabel, and mainAriaLabelledby', () => {
-  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-  const wiz = (
-    <Wizard
-      title="Wiz title"
-      navAriaLabel="nav aria-label"
-      navAriaLabelledBy="nav-aria-labelledby"
-      mainAriaLabel="main aria-label"
-      mainAriaLabelledBy="main-aria-labelledby"
-      description="This wizard has a title"
-      steps={steps} />
-  );
-  const view = mount(wiz).at(0);
-  const nav = view.find('nav.pf-c-wizard__nav');
-  const main = view.find('div.pf-c-wizard__main');
-  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
-  expect(nav.find('[aria-labelledby="nav-aria-labelledby"]').length).toBe(1);
-  expect(main.props()['aria-label']).toBe('main aria-label');
-  expect(main.props()['aria-labelledby']).toBe('main-aria-labelledby');
+    const main = screen.getByLabelText('main aria-label');
+    expect(main).toBeInTheDocument();
+    expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
+  });
 });