@patternfly/react-core 4.268.2 → 5.0.0-alpha.2

package/src/components/Pagination/examples/Pagination.md

@@ -2,7 +2,7 @@
 id: Pagination
 section: components
 cssPrefix: null
-propComponents: ['Pagination', PaginationTitles, PerPageOptions, ToggleTemplateProps]
+propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggleTemplateProps]
 ouia: true
 ---
 

package/src/components/Pagination/examples/PaginationBottom.tsx

@@ -20,7 +20,6 @@ export const PaginationBottom: React.FunctionComponent = () => {
 
   return (
     <Pagination
-      perPageComponent="button"
       itemCount={333}
       widgetId="bottom-example"
       perPage={perPage}

package/src/components/Pagination/examples/PaginationCompact.tsx

@@ -20,7 +20,6 @@ export const PaginationCompact: React.FunctionComponent = () => {
 
   return (
     <Pagination
-      perPageComponent="button"
       itemCount={523}
       perPage={perPage}
       page={page}

package/src/components/Pagination/examples/PaginationDisabled.tsx

@@ -20,7 +20,6 @@ export const PaginationDisabled: React.FunctionComponent = () => {
 
   return (
     <Pagination
-      perPageComponent="button"
       itemCount={523}
       perPage={perPage}
       page={page}

package/src/components/Pagination/examples/PaginationIndeterminate.tsx

@@ -20,7 +20,6 @@ export const PaginationIndeterminate: React.FunctionComponent = () => {
 
   return (
     <Pagination
-      perPageComponent="button"
       toggleTemplate={({ firstIndex, lastIndex }) => (
         <React.Fragment>
           <b>

package/src/components/Pagination/examples/PaginationInset.tsx

@@ -20,7 +20,6 @@ export const PaginationInset: React.FunctionComponent = () => {
 
   return (
     <Pagination
-      perPageComponent="button"
       itemCount={523}
       perPage={perPage}
       page={page}

package/src/components/Pagination/examples/PaginationNoItems.tsx

@@ -20,7 +20,6 @@ export const PaginationNoItems: React.FunctionComponent = () => {
 
   return (
     <Pagination
-      perPageComponent="button"
       itemCount={0}
       perPage={perPage}
       page={page}

package/src/components/Pagination/examples/PaginationOnePage.tsx

@@ -20,7 +20,6 @@ export const PaginationOnePage: React.FunctionComponent = () => {
 
   return (
     <Pagination
-      perPageComponent="button"
       itemCount={15}
       perPage={perPage}
       page={page}

package/src/components/Pagination/examples/PaginationSticky.tsx

@@ -39,7 +39,6 @@ export const PaginationSticky: React.FunctionComponent = () => {
   return isTopSticky ? (
     <React.Fragment>
       <Pagination
-        perPageComponent="button"
         itemCount={itemCount}
         perPage={perPage}
         page={page}
@@ -56,7 +55,6 @@ export const PaginationSticky: React.FunctionComponent = () => {
     <React.Fragment>
       <Gallery hasGutter>{buildCards()}</Gallery>
       <Pagination
-        perPageComponent="button"
         itemCount={itemCount}
         perPage={perPage}
         page={page}

package/src/components/Pagination/examples/PaginationTop.tsx

@@ -20,7 +20,6 @@ export const PaginationTop: React.FunctionComponent = () => {
 
   return (
     <Pagination
-      perPageComponent="button"
       itemCount={523}
       perPage={perPage}
       page={page}

package/src/components/Popover/Popover.tsx

@@ -16,7 +16,6 @@ import { ReactElement } from 'react';
 import { FocusTrap } from '../../helpers';
 import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
 import { getUniqueId } from '../../helpers/util';
-import { Instance as TippyInstance, Props as TippyProps } from '../../helpers/Popper/DeprecatedTippyTypes';
 
 export enum PopoverPosition {
   auto = 'auto',
@@ -60,10 +59,6 @@ export interface PopoverProps {
    * bodyContent={hide => <Button onClick={() => hide()}>Close</Button>}
    */
   bodyContent: React.ReactNode | ((hide: () => void) => React.ReactNode);
-  /** @deprecated - no longer used. if you want to constrain the popper to a specific element
-   * use the appendTo prop instead.
-   */
-  boundary?: 'scrollParent' | 'window' | 'viewport' | HTMLElement;
   /**
    * The reference element to which the popover is relatively placed to. If you cannot wrap
    * the reference with the Popover, you can use the reference prop instead.
@@ -151,29 +146,24 @@ export interface PopoverProps {
   minWidth?: string;
   /**
    * Lifecycle function invoked when the popover has fully transitioned out.
-   * Note: The tip argument is no longer passed and has been deprecated.
    */
-  onHidden?: (tip?: TippyInstance) => void;
+  onHidden?: () => void;
   /**
    * Lifecycle function invoked when the popover begins to transition out.
-   * Note: The tip argument is no longer passed and has been deprecated.
    */
-  onHide?: (tip?: TippyInstance) => void;
+  onHide?: () => void;
   /**
    * Lifecycle function invoked when the popover has been mounted to the DOM.
-   * Note: The tip argument is no longer passed and has been deprecated.
    */
-  onMount?: (tip?: TippyInstance) => void;
+  onMount?: () => void;
   /**
    * Lifecycle function invoked when the popover begins to transition in.
-   * Note: The tip argument is no longer passed and has been deprecated.
    */
-  onShow?: (tip?: TippyInstance) => void;
+  onShow?: () => void;
   /**
    * Lifecycle function invoked when the popover has fully transitioned in.
-   * Note: The tip argument is no longer passed and has been deprecated.
    */
-  onShown?: (tip?: TippyInstance) => void;
+  onShown?: () => void;
   /**
    * Popover position. Note: With the enableFlip property set to true, it will change the
    * position if there is not enough space for the starting position. The behavior of where it
@@ -200,14 +190,11 @@ export interface PopoverProps {
    * Usage: <Popover reference={() => document.getElementById('reference-element')} />
    */
   reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /**
    * Callback function that is only invoked when isVisible is also controlled. Called when the
    * popover close button is clicked, the enter key was used on it, or the escape key is used.
-   * Note: The tip argument is no longer passed and has been deprecated.
    */
-  shouldClose?: (tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void;
+  shouldClose?: (hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void;
   /**
    * Callback function that is only invoked when isVisible is also controlled. Called when the
    * enter key is used on the focused trigger.
@@ -215,8 +202,6 @@ export interface PopoverProps {
   shouldOpen?: (showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void;
   /** Flag indicating whether the close button should be shown. */
   showClose?: boolean;
-  /** @deprecated - no longer used. */
-  tippyProps?: Partial<TippyProps>;
   /** Whether to trap focus in the popover. */
   withFocusTrap?: boolean;
   /** The z-index of the popover. */
@@ -277,21 +262,11 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   animationDuration = 300,
   id,
   withFocusTrap: propWithFocusTrap,
-  boundary,
-  tippyProps,
   reference,
   hasNoPadding = false,
   hasAutoWidth = false,
-  removeFindDomNode = false,
   ...rest
 }: PopoverProps) => {
-  if (process.env.NODE_ENV !== 'production') {
-    boundary !== undefined &&
-      console.warn(
-        'The Popover boundary prop has been deprecated. If you want to constrain the popper to a specific element use the appendTo prop instead.'
-      );
-    tippyProps !== undefined && console.warn('The Popover tippyProps prop has been deprecated and is no longer used.');
-  }
   // could make this a prop in the future (true | false | 'toggle')
   // const hideOnClick = true;
   const uniqueId = id || getUniqueId();
@@ -363,7 +338,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (event.key === KeyTypes.Escape && visible) {
       if (triggerManually) {
-        shouldClose(null, hide, event);
+        shouldClose(hide, event);
       } else {
         hide();
       }
@@ -378,7 +353,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         return;
       }
       if (triggerManually) {
-        shouldClose(null, hide, event);
+        shouldClose(hide, event);
       } else {
         hide();
       }
@@ -387,7 +362,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const onTriggerClick = (event: MouseEvent) => {
     if (triggerManually) {
       if (visible) {
-        shouldClose(null, hide, event);
+        shouldClose(hide, event);
       } else {
         shouldOpen(show, event);
       }
@@ -407,7 +382,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const closePopover = (event: any) => {
     event.stopPropagation();
     if (triggerManually) {
-      shouldClose(null, hide, event);
+      shouldClose(hide, event);
     } else {
       hide();
     }
@@ -497,7 +472,6 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         enableFlip={enableFlip}
         zIndex={zIndex}
         flipBehavior={flipBehavior}
-        removeFindDomNode={removeFindDomNode}
       />
     </PopoverContext.Provider>
   );

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

@@ -2,34 +2,50 @@
 
 exports[`popover can close from content (uncontrolled) 1`] = `
 <DocumentFragment>
-  <button
-    id="uncontrolled-toggle"
+  <div
+    style="display: contents;"
   >
-    Toggle Popover
-  </button>
+    <button
+      id="uncontrolled-toggle"
+    >
+      Toggle Popover
+    </button>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`popover can have a custom minimum width 1`] = `
 <DocumentFragment>
-  <div>
-    Toggle Popover
+  <div
+    style="display: contents;"
+  >
+    <div>
+      Toggle Popover
+    </div>
   </div>
 </DocumentFragment>
 `;
 
 exports[`popover can specify position as object value 1`] = `
 <DocumentFragment>
-  <div>
-    Toggle Popover
+  <div
+    style="display: contents;"
+  >
+    <div>
+      Toggle Popover
+    </div>
   </div>
 </DocumentFragment>
 `;
 
 exports[`popover renders close-button, header and body 1`] = `
 <DocumentFragment>
-  <div>
-    Toggle Popover
+  <div
+    style="display: contents;"
+  >
+    <div>
+      Toggle Popover
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -6,15 +6,6 @@ import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
-export enum ProgressStepVariant {
-  default = 'default',
-  pending = 'pending',
-  success = 'success',
-  info = 'info',
-  danger = 'danger',
-  warning = 'warning'
-}
-
 export interface ProgressStepProps
   extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
   /** Content rendered inside the progress step. */

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

@@ -1,57 +1,143 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressStepper } from '../ProgressStepper';
+import { ProgressStep } from '../ProgressStep';
+import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 
-test('Renders without children', () => {
-  render(
-    <div data-testid="progress-stepper">
-      <ProgressStepper />
-    </div>
-  );
-  expect(screen.getByTestId('progress-stepper').firstChild).toBeVisible();
-});
+describe('ProgressStepper', () => {
+  test('renders content', () => {
+    const { asFragment } = render(
+      <ProgressStepper>
+        <ProgressStep>First</ProgressStep>
+        <ProgressStep>Second</ProgressStep>
+        <ProgressStep>Third</ProgressStep>
+      </ProgressStepper>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Renders children', () => {
-  render(<ProgressStepper>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toBeVisible();
-});
+  test('gets custom class and id', () => {
+    const { asFragment } = render(
+      <ProgressStepper className="custom-class" id="test-id">
+        <ProgressStep>First</ProgressStep>
+        <ProgressStep>Second</ProgressStep>
+        <ProgressStep>Third</ProgressStep>
+      </ProgressStepper>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Renders with only class name pf-c-progress-stepper by default', () => {
-  render(<ProgressStepper>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-c-progress-stepper', { exact: true });
-});
+  test('renders vertically', () => {
+    const { asFragment } = render(
+      <ProgressStepper isVertical>
+        <ProgressStep>First</ProgressStep>
+        <ProgressStep>Second</ProgressStep>
+        <ProgressStep>Third</ProgressStep>
+      </ProgressStepper>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Renders with class name pf-c-progress-stepper', () => {
-  render(<ProgressStepper>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-c-progress-stepper');
-});
+  test('renders compact', () => {
+    const { asFragment } = render(
+      <ProgressStepper isCompact>
+        <ProgressStep>First</ProgressStep>
+        <ProgressStep>Second</ProgressStep>
+        <ProgressStep>Third</ProgressStep>
+      </ProgressStepper>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Renders with custom class name when className prop is provided', () => {
-  render(<ProgressStepper className="custom-class">Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('custom-class');
+  test('renders center aligned', () => {
+    const { asFragment } = render(
+      <ProgressStepper isCenterAligned>
+        <ProgressStep>First</ProgressStep>
+        <ProgressStep>Second</ProgressStep>
+        <ProgressStep>Third</ProgressStep>
+      </ProgressStepper>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
 
-test('Renders with class name pf-m-center when isCenterAligned prop is passed', () => {
-  render(<ProgressStepper isCenterAligned>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-m-center');
-});
+describe('ProgressStep', () => {
+  test('renders content', () => {
+    const { asFragment } = render(<ProgressStep>Title</ProgressStep>);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Renders with class name pf-m-vertical when isVertical prop is passed', () => {
-  render(<ProgressStepper isVertical>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-m-vertical');
-});
+  Object.values(['default', 'success', 'info', 'pending', 'warning', 'danger']).forEach(variant => {
+    test(`renders ${variant} variant`, () => {
+      const { asFragment } = render(
+        <ProgressStep
+          variant={variant as 'default' | 'success' | 'info' | 'pending' | 'warning' | 'danger'}
+          aria-label={variant}
+        >
+          {variant} step
+        </ProgressStep>
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  test('renders current', () => {
+    const { asFragment } = render(<ProgressStep isCurrent>Title</ProgressStep>);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('Renders with class name pf-m-compact when isCompact prop is passed', () => {
-  render(<ProgressStepper isCompact>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-m-compact');
+  test('renders help text styling', () => {
+    const { asFragment } = render(<ProgressStep popoverRender={() => <div></div>}>Title</ProgressStep>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('renders custom icon', () => {
+    const { asFragment } = render(<ProgressStep icon={<InProgressIcon />}>Title</ProgressStep>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('renders custom null icon - removing default from variant', () => {
+    const { asFragment } = render(
+      <ProgressStep icon={null} variant="success">
+        Title
+      </ProgressStep>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('renders description', () => {
+    const { asFragment } = render(<ProgressStep description="This is a description">Title</ProgressStep>);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
 
-test('Renders with inherited element props spread to the component', () => {
-  render(<ProgressStepper aria-label="Test label">Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveAccessibleName('Test label');
+test('renders description class and text', () => {
+  render(
+    <ProgressStep
+      description="Test description"
+    >
+      Title
+    </ProgressStep>
+  );
+
+  expect(screen.getByText('Test description')).toBeVisible();
+  expect(screen.getByText('Test description')).toHaveClass('pf-c-progress-stepper__step-description');
 });
 
-test('Matches the snapshot', () => {
-  const { asFragment } = render(<ProgressStepper>Test</ProgressStepper>);
-  expect(asFragment()).toMatchSnapshot();
+test('renders description line break', () => {
+  render(
+    <ProgressStep
+      description={
+        <>
+          Testing description
+          <br />
+          Line break
+        </>
+      }
+      >
+        Title
+      </ProgressStep>
+  );
+
+  expect(screen.getByText("Testing descriptionLine break")).toBeVisible();
 });