@patternfly/react-core 5.0.0-alpha.32 → 5.0.0-alpha.34

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -5,6 +5,7 @@ import {
   DropdownItem,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   KebabToggle,
   NotificationBadge,
@@ -20,7 +21,6 @@ import {
   PageSectionVariants,
   TextContent,
   Text,
-  Title,
   DropdownPosition,
   EmptyStateVariant,
   NumberInput,
@@ -69,13 +69,13 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
     const key = getUniqueId();
     const timestamp = getTimeCreated();
 
-    setNotifications(prevNotifications => [
+    setNotifications((prevNotifications) => [
       { title, srTitle, variant, key, timestamp, description, isNotificationRead: false },
       ...prevNotifications
     ]);
 
     if (!isDrawerExpanded) {
-      setAlerts(prevAlerts => [
+      setAlerts((prevAlerts) => [
         <Alert
           variant={variant}
           title={title}
@@ -96,7 +96,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   };
 
   const removeNotification = (key: React.Key) => {
-    setNotifications(prevNotifications => prevNotifications.filter(notification => notification.key !== key));
+    setNotifications((prevNotifications) => prevNotifications.filter((notification) => notification.key !== key));
   };
 
   const removeAllNotifications = () => {
@@ -104,28 +104,29 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   };
 
   const isNotificationRead = (key: React.Key) =>
-    notifications.find(notification => notification.key === key)?.isNotificationRead;
+    notifications.find((notification) => notification.key === key)?.isNotificationRead;
 
   const markNotificationRead = (key: React.Key) => {
-    setNotifications(prevNotifications =>
-      prevNotifications.map(notification =>
+    setNotifications((prevNotifications) =>
+      prevNotifications.map((notification) =>
         notification.key === key ? { ...notification, isNotificationRead: true } : notification
       )
     );
   };
 
   const markAllNotificationsRead = () => {
-    setNotifications(prevNotifications =>
-      prevNotifications.map(notification => ({ ...notification, isNotificationRead: true }))
+    setNotifications((prevNotifications) =>
+      prevNotifications.map((notification) => ({ ...notification, isNotificationRead: true }))
     );
   };
 
   const getUnreadNotificationsNumber = () =>
-    notifications.filter(notification => notification.isNotificationRead === false).length;
+    notifications.filter((notification) => notification.isNotificationRead === false).length;
 
   const containsUnreadAlertNotification = () =>
-    notifications.filter(notification => notification.isNotificationRead === false && notification.variant === 'danger')
-      .length > 0;
+    notifications.filter(
+      (notification) => notification.isNotificationRead === false && notification.variant === 'danger'
+    ).length > 0;
 
   const getNotificationBadgeVariant = () => {
     if (getUnreadNotificationsNumber() === 0) {
@@ -176,7 +177,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   };
 
   const removeAlert = (key: React.Key) => {
-    setAlerts(prevAlerts => prevAlerts.filter(alert => alert.props.id !== key.toString()));
+    setAlerts((prevAlerts) => prevAlerts.filter((alert) => alert.props.id !== key.toString()));
   };
 
   const removeAllAlerts = () => {
@@ -281,10 +282,11 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         )}
         {notifications.length === 0 && (
           <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateIcon icon={SearchIcon} />
-            <Title headingLevel="h2" size="lg">
-              No notifications found
-            </Title>
+            <EmptyStateHeader
+              headingLevel="h2"
+              titleText="No notifications found"
+              icon={<EmptyStateIcon icon={SearchIcon} />}
+            />
             <EmptyStateBody>There are currently no notifications.</EmptyStateBody>
           </EmptyState>
         )}

package/src/helpers/Popper/Popper.tsx

@@ -62,14 +62,18 @@ export interface PopperProps {
    * Passing this prop will remove the wrapper div element from the popper.
    */
   popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
-  /** True to set the width of the popper element to the trigger element's width */
-  popperMatchesTriggerWidth?: boolean;
   /** popper direction */
   direction?: 'up' | 'down';
   /** popper position */
   position?: 'right' | 'left' | 'center';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
+  /** Custsom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
+  width?: string | 'trigger';
+  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the trigger element's width */
+  minWidth?: string | 'trigger';
+  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the trigger element's width */
+  maxWidth?: string | 'trigger';
   /** The container to append the popper to. Defaults to 'inline'. */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
   /** z-index of the popper element */
@@ -147,10 +151,12 @@ export interface PopperProps {
 export const Popper: React.FunctionComponent<PopperProps> = ({
   trigger,
   popper,
-  popperMatchesTriggerWidth = true,
   direction = 'down',
   position = 'left',
   placement,
+  width,
+  minWidth = 'trigger',
+  maxWidth,
   appendTo = 'inline',
   zIndex = 9999,
   isVisible = true,
@@ -279,21 +285,44 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     () => getOppositePlacement(getPlacement()),
     [direction, position, placement]
   );
-  const sameWidthMod: Modifier<'sameWidth', {}> = React.useMemo(
+
+  const widthMods: Modifier<'widthMods', {}> = React.useMemo(
     () => ({
-      name: 'sameWidth',
-      enabled: popperMatchesTriggerWidth,
+      name: 'widthMods',
+      enabled: width !== undefined || minWidth !== undefined || maxWidth !== undefined,
       phase: 'beforeWrite',
       requires: ['computeStyles'],
       fn: ({ state }) => {
-        state.styles.popper.width = `${state.rects.reference.width}px`;
+        const triggerWidth = state.rects.reference.width;
+        if (width) {
+          state.styles.popper.width = width === 'trigger' ? `${triggerWidth}px` : width;
+        }
+
+        if (minWidth) {
+          state.styles.popper.minWidth = minWidth === 'trigger' ? `${triggerWidth}px` : minWidth;
+        }
+
+        if (maxWidth) {
+          state.styles.popper.maxWidth = maxWidth === 'trigger' ? `${triggerWidth}px` : maxWidth;
+        }
       },
       effect: ({ state }) => {
-        state.elements.popper.style.width = `${(state.elements.reference as HTMLElement).offsetWidth}px`;
+        const triggerWidth = (state.elements.reference as HTMLElement).offsetWidth;
+        if (width) {
+          state.elements.popper.style.width = width === 'trigger' ? `${triggerWidth}px` : width;
+        }
+
+        if (minWidth) {
+          state.elements.popper.style.minWidth = minWidth === 'trigger' ? `${triggerWidth}px` : minWidth;
+        }
+
+        if (maxWidth) {
+          state.elements.popper.style.maxWidth = maxWidth === 'trigger' ? `${triggerWidth}px` : maxWidth;
+        }
         return () => {};
       }
     }),
-    [popperMatchesTriggerWidth]
+    [width, minWidth, maxWidth]
   );
 
   const {
@@ -326,7 +355,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
           fallbackPlacements: flipBehavior === 'flip' ? [getOppositePlacementMemo] : flipBehavior
         }
       },
-      sameWidthMod
+      widthMods
     ]
   });
 

package/src/next/components/Dropdown/Dropdown.tsx

@@ -22,8 +22,6 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   isPlain?: boolean;
   /** Indicates if the menu should be scrollable. */
   isScrollable?: boolean;
-  /** Min width of the menu. */
-  minWidth?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -33,7 +31,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: PopperProps;
+  popperProps?: Partial<PopperProps>;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -45,7 +43,6 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onOpenChange,
   isPlain,
   isScrollable,
-  minWidth,
   innerRef,
   ouiaId,
   ouiaSafe = true,
@@ -106,11 +103,6 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
       isPlain={isPlain}
       isScrollable={isScrollable}
-      {...(minWidth && {
-        style: {
-          '--pf-c-menu--MinWidth': minWidth
-        } as React.CSSProperties
-      })}
       {...props}
     >
       <MenuContent>{children}</MenuContent>

package/src/next/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -14,7 +14,7 @@ const dropdownChildren = <div>Dropdown children</div>;
 test('renders dropdown', () => {
   render(
     <div data-testid="dropdown">
-      <Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>
+      <Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>
     </div>
   );
 
@@ -22,20 +22,20 @@ test('renders dropdown', () => {
 });
 
 test('passes children', () => {
-  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
   expect(screen.getByText('Dropdown children')).toBeVisible();
 });
 
 test('renders passed toggle element', () => {
-  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
   expect(screen.getByRole('button', { name: 'Dropdown' })).toBeVisible();
 });
 
 test('passes no class name by default', () => {
   render(
-    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -45,7 +45,7 @@ test('passes no class name by default', () => {
 
 test('passes custom class name', () => {
   render(
-    <Dropdown className="custom-class" isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown className="custom-class" isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -55,7 +55,7 @@ test('passes custom class name', () => {
 
 test('does not pass isPlain to Menu by default', () => {
   render(
-    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -65,7 +65,7 @@ test('does not pass isPlain to Menu by default', () => {
 
 test('passes isPlain to Menu', () => {
   render(
-    <Dropdown isPlain isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isPlain isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -75,7 +75,7 @@ test('passes isPlain to Menu', () => {
 
 test('does not pass isScrollable to Menu by default', () => {
   render(
-    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -85,7 +85,7 @@ test('does not pass isScrollable to Menu by default', () => {
 
 test('passes isScrollable to Menu', () => {
   render(
-    <Dropdown isScrollable isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isScrollable isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -93,35 +93,15 @@ test('passes isScrollable to Menu', () => {
   expect(screen.getByText('isScrollable: true')).toBeVisible();
 });
 
-test('does not pass minWidth to Menu by default', () => {
-  render(
-    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('minWidth: undefined')).toBeVisible();
-});
-
-test('passes minWidth to Menu', () => {
-  render(
-    <Dropdown minWidth="100px" isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('minWidth: 100px')).toBeVisible();
-});
-
 test('passes default zIndex to popper', () => {
-  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
   expect(screen.getByText('zIndex: 9999')).toBeVisible();
 });
 
 test('passes zIndex to popper', () => {
   render(
-    <Dropdown zIndex={100} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown zIndex={100} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -130,14 +110,14 @@ test('passes zIndex to popper', () => {
 });
 
 test('does not pass isOpen to popper by default', () => {
-  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
   expect(screen.getByText('isOpen: undefined')).toBeVisible();
 });
 
 test('passes isOpen to popper', () => {
   render(
-    <Dropdown isOpen toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -154,7 +134,7 @@ test('passes onSelect callback', async () => {
 
   const onSelect = jest.fn();
   render(
-    <Dropdown onSelect={onSelect} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -170,7 +150,7 @@ test('onOpenChange is called when passed and user clicks outside of dropdown', a
   const onOpenChange = jest.fn();
 
   render(
-    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -187,7 +167,7 @@ test('onOpenChange is called when passed and user presses tab key', async () =>
   const onOpenChange = jest.fn();
 
   render(
-    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -205,7 +185,7 @@ test('onOpenChange is called when passed and user presses esc key', async () =>
   const onOpenChange = jest.fn();
 
   render(
-    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -226,7 +206,7 @@ test('match snapshot', () => {
       isScrollable
       isPlain
       className={'customClass'}
-      toggle={toggleRef => toggle(toggleRef)}
+      toggle={(toggleRef) => toggle(toggleRef)}
     >
       {dropdownChildren}
     </Dropdown>

package/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -19,9 +19,8 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      minWidth="150px"
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      toggle={toggleRef => (
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
         <MenuToggle ref={toggleRef} isFullWidth onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
         </MenuToggle>
@@ -36,7 +35,7 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
           key="action"
           description="This is a very long description that describes the menu item"
           to="#default-link2"
-          onClick={ev => ev.preventDefault()}
+          onClick={(ev) => ev.preventDefault()}
         >
           Action
         </DropdownItem>

package/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -20,9 +20,8 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      minWidth="150px"
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      toggle={toggleRef => (
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
         <MenuToggle
           ref={toggleRef}
           aria-label="kebab dropdown toggle"
@@ -38,7 +37,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
         <DropdownItem itemId={0} key="link">
           Link
         </DropdownItem>
-        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={ev => ev.preventDefault()}>
+        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
           Action
         </DropdownItem>
         <DropdownItem itemId={2} isDisabled key="disabled link">

package/src/next/components/Select/Select.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../../../components/Menu';
-import { Popper } from '../../../helpers/Popper/Popper';
+import { Popper, PopperProps } from '../../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers';
 
 export interface SelectProps extends MenuProps, OUIAProps {
@@ -22,14 +22,14 @@ export interface SelectProps extends MenuProps, OUIAProps {
   onOpenChange?: (isOpen: boolean) => void;
   /** Indicates if the select should be without the outer box-shadow */
   isPlain?: boolean;
-  /** Minimum width of the select menu */
-  minWidth?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<HTMLDivElement>;
   /** z-index of the select menu */
   zIndex?: number;
   /** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
   role?: string;
+  /** Additional properties to pass to the popper */
+  popperProps?: Partial<PopperProps>;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -41,10 +41,10 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   toggle,
   onOpenChange,
   isPlain,
-  minWidth,
   innerRef,
   zIndex = 9999,
   role = 'listbox',
+  popperProps,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -100,11 +100,6 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
       isPlain={isPlain}
       selected={selected}
-      {...(minWidth && {
-        style: {
-          '--pf-c-menu--MinWidth': minWidth
-        } as React.CSSProperties
-      })}
       {...getOUIAProps(
         Select.displayName,
         props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName),
@@ -125,6 +120,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
         appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         zIndex={zIndex}
+        {...popperProps}
       />
     </div>
   );

package/src/next/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -4,11 +4,12 @@ import {
   Button,
   Alert,
   EmptyState,
-  EmptyStateIcon,
-  Title,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
+  EmptyStateActions,
+  EmptyStateIcon,
   Progress,
-  EmptyStateSecondaryActions,
   Form,
   FormGroup,
   TextInput
@@ -25,7 +26,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   const tick = React.useCallback(() => {
     if (percentValidated < 100) {
-      setPercentValidated(prevValue => prevValue + 20);
+      setPercentValidated((prevValue) => prevValue + 20);
     }
   }, [percentValidated]);
 
@@ -39,11 +40,12 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   return (
     <div className="pf-l-bullseye">
-      <EmptyState variant="large">
-        <EmptyStateIcon icon={CogsIcon} />
-        <Title headingLevel="h4" size="lg">
-          {percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-        </Title>
+      <EmptyState variant="lg">
+        <EmptyStateHeader
+          headingLevel="h4"
+          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+          icon={<EmptyStateIcon icon={CogsIcon} />}
+        />
         <EmptyStateBody>
           <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>
@@ -51,11 +53,13 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
           Description can be used to further elaborate on the validation step, or give the user a better idea of how
           long the process will take.
         </EmptyStateBody>
-        <EmptyStateSecondaryActions>
-          <Button isDisabled={percentValidated !== 100} onClick={onClose}>
-            Log to console
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button isDisabled={percentValidated !== 100} onClick={onClose}>
+              Log to console
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     </div>
   );
@@ -173,7 +177,7 @@ export const WizardValidateOnButtonPress: React.FunctionComponent = () => {
         )}
         <SampleForm
           value={ageValue}
-          setValue={value => setAgeValue(value)}
+          setValue={(value) => setAgeValue(value)}
           isValid={!hasErrorOnSubmit || isFirstStepValid}
           setIsValid={setIsFirstStepValid}
         />

package/src/next/components/Wizard/examples/WizardWithSubmitProgress.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStateSecondaryActions,
-  Title,
+  EmptyStateActions,
+  EmptyStateIcon,
   Progress,
   Button
 } from '@patternfly/react-core';
@@ -20,7 +21,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   const tick = React.useCallback(() => {
     if (percentValidated < 100) {
-      setPercentValidated(prevValue => prevValue + 20);
+      setPercentValidated((prevValue) => prevValue + 20);
     }
   }, [percentValidated]);
 
@@ -34,11 +35,12 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   return (
     <div className="pf-l-bullseye">
-      <EmptyState variant="large">
-        <EmptyStateIcon icon={CogsIcon} />
-        <Title headingLevel="h4" size="lg">
-          {percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-        </Title>
+      <EmptyState variant="lg">
+        <EmptyStateHeader
+          headingLevel="h4"
+          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+          icon={<EmptyStateIcon icon={CogsIcon} />}
+        />
         <EmptyStateBody>
           <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>
@@ -46,11 +48,13 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
           Description can be used to further elaborate on the validation step, or give the user a better idea of how
           long the process will take.
         </EmptyStateBody>
-        <EmptyStateSecondaryActions>
-          <Button isDisabled={percentValidated !== 100} onClick={onClose}>
-            Log to console
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button isDisabled={percentValidated !== 100} onClick={onClose}>
+              Log to console
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     </div>
   );

package/components/EmptyState/EmptyStatePrimary.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export interface EmptyStatePrimaryProps extends React.HTMLProps<HTMLDivElement> {
-    /** Additional classes added to the EmptyStatePrimary */
-    className?: string;
-    /** Content rendered inside the EmptyStatePrimary */
-    children: React.ReactNode;
-}
-export declare const EmptyStatePrimary: React.FunctionComponent<EmptyStatePrimaryProps>;
-//# sourceMappingURL=EmptyStatePrimary.d.ts.map

package/components/EmptyState/EmptyStatePrimary.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmptyStatePrimary.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyStatePrimary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7E,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAQ7E,CAAC"}

package/components/EmptyState/EmptyStatePrimary.js

@@ -1,9 +0,0 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-export const EmptyStatePrimary = (_a) => {
-    var { children, className = '' } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(className) }, props), children));
-};
-EmptyStatePrimary.displayName = 'EmptyStatePrimary';
-//# sourceMappingURL=EmptyStatePrimary.js.map

package/components/EmptyState/EmptyStatePrimary.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmptyStatePrimary.js","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyStatePrimary.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAS/C,MAAM,CAAC,MAAM,iBAAiB,GAAoD,CAAC,EAI1D,EAAE,EAAE;QAJsD,EACjF,QAAQ,EACR,SAAS,GAAG,EAAE,OAES,EADpB,KAAK,cAHyE,yBAIlF,CADS;IACoB,OAAA,CAC5B,2CAAK,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,IAAM,KAAK,GACtC,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AACF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC"}