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

package/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

@@ -8,13 +8,14 @@ import {
   DualListSelectorTree,
   DualListSelectorTreeItemData,
   SearchInput,
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStatePrimary
+  EmptyStateActions,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
@@ -48,7 +49,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     }
     textById[node.id] = node.text;
     if (node.children) {
-      node.children.forEach(child => {
+      node.children.forEach((child) => {
         textById = { ...textById, ...buildTextById(child) };
       });
     }
@@ -61,7 +62,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       return [node.id];
     } else {
       let childrenIds: string[] = [];
-      node.children.forEach(child => {
+      node.children.forEach((child) => {
         childrenIds = [...childrenIds, ...getDescendantLeafIds(child)];
       });
       return childrenIds;
@@ -74,7 +75,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     if (!node.children || !node.children.length) {
       leavesById[node.id] = [node.id];
     } else {
-      node.children.forEach(child => {
+      node.children.forEach((child) => {
         leavesById[node.id] = getDescendantLeafIds(node);
         leavesById = { ...leavesById, ...getLeavesById(child) };
       });
@@ -87,7 +88,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     let leavesById = {};
     let allLeaves: string[] = [];
     let nodeTexts = {};
-    data.forEach(foodNode => {
+    data.forEach((foodNode) => {
       nodeTexts = { ...nodeTexts, ...buildTextById(foodNode) };
       leavesById = { ...leavesById, ...getLeavesById(foodNode) };
       allLeaves = [...allLeaves, ...getDescendantLeafIds(foodNode)];
@@ -101,17 +102,17 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
 
   const moveChecked = (toChosen: boolean) => {
     setChosenLeafIds(
-      prevChosenIds =>
+      (prevChosenIds) =>
         toChosen
           ? [...prevChosenIds, ...checkedLeafIds] // add checked ids to chosen list
-          : [...prevChosenIds.filter(x => !checkedLeafIds.includes(x))] // remove checked ids from chosen list
+          : [...prevChosenIds.filter((x) => !checkedLeafIds.includes(x))] // remove checked ids from chosen list
     );
 
     // uncheck checked ids that just moved
-    setCheckedLeafIds(prevChecked =>
+    setCheckedLeafIds((prevChecked) =>
       toChosen
-        ? [...prevChecked.filter(x => chosenLeafIds.includes(x))]
-        : [...prevChecked.filter(x => !chosenLeafIds.includes(x))]
+        ? [...prevChecked.filter((x) => chosenLeafIds.includes(x))]
+        : [...prevChecked.filter((x) => !chosenLeafIds.includes(x))]
     );
   };
 
@@ -125,11 +126,11 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
 
   const areAllDescendantsSelected = (node: FoodNode, isChosen: boolean) =>
     memoizedLeavesById[node.id].every(
-      id => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))
+      (id) => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))
     );
   const areSomeDescendantsSelected = (node: FoodNode, isChosen: boolean) =>
     memoizedLeavesById[node.id].some(
-      id => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))
+      (id) => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))
     );
 
   const isNodeChecked = (node: FoodNode, isChosen: boolean) => {
@@ -148,7 +149,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     node: DualListSelectorTreeItemData,
     isChosen: boolean
   ) => {
-    const nodeIdsToCheck = memoizedLeavesById[node.id].filter(id =>
+    const nodeIdsToCheck = memoizedLeavesById[node.id].filter((id) =>
       isChosen
         ? chosenLeafIds.includes(id) && !hiddenChosen.includes(id)
         : !chosenLeafIds.includes(id) && !hiddenAvailable.includes(id)
@@ -158,15 +159,15 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     } else {
       hiddenAvailable = [];
     }
-    setCheckedLeafIds(prevChecked => {
-      const otherCheckedNodeNames = prevChecked.filter(id => !nodeIdsToCheck.includes(id));
+    setCheckedLeafIds((prevChecked) => {
+      const otherCheckedNodeNames = prevChecked.filter((id) => !nodeIdsToCheck.includes(id));
       return !isChecked ? otherCheckedNodeNames : [...otherCheckedNodeNames, ...nodeIdsToCheck];
     });
   };
 
   // builds a search input - used in each dual list selector pane
   const buildSearchInput = (isChosen: boolean) => {
-    const onChange = value => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));
+    const onChange = (value) => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));
 
     return (
       <SearchInput
@@ -192,11 +193,11 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     const filterValue = isChosen ? chosenFilter : availableFilter;
     const descendentLeafIds = memoizedLeavesById[node.id];
     const descendentsOnThisPane = isChosen
-      ? descendentLeafIds.filter(id => chosenLeafIds.includes(id))
-      : descendentLeafIds.filter(id => !chosenLeafIds.includes(id));
+      ? descendentLeafIds.filter((id) => chosenLeafIds.includes(id))
+      : descendentLeafIds.filter((id) => !chosenLeafIds.includes(id));
 
     const hasMatchingChildren =
-      filterValue && descendentsOnThisPane.some(id => memoizedNodeText[id].includes(filterValue));
+      filterValue && descendentsOnThisPane.some((id) => memoizedNodeText[id].includes(filterValue));
     const isFilterMatch = filterValue && node.text.includes(filterValue) && descendentsOnThisPane.length > 0;
 
     // A node is displayed if either of the following is true:
@@ -243,7 +244,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   const buildPane = (isChosen: boolean): React.ReactNode => {
     const options: DualListSelectorTreeItemData[] = buildOptions(isChosen, data, false);
     const numOptions = isChosen ? chosenLeafIds.length : memoizedAllLeaves.length - chosenLeafIds.length;
-    const numSelected = checkedLeafIds.filter(id =>
+    const numSelected = checkedLeafIds.filter((id) =>
       isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)
     ).length;
     const status = `${numSelected} of ${numOptions} options selected`;
@@ -257,17 +258,20 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         listMinHeight="300px"
       >
         {filterApplied && options.length === 0 && (
-          <EmptyState variant={EmptyStateVariant.small}>
-            <EmptyStateIcon icon={SearchIcon} />
-            <Title headingLevel="h4" size="md">
-              No results found
-            </Title>
+          <EmptyState variant={EmptyStateVariant.sm}>
+            <EmptyStateHeader
+              headingLevel="h4"
+              titleText="No results found"
+              icon={<EmptyStateIcon icon={SearchIcon} />}
+            />
             <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-            <EmptyStatePrimary>
-              <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
-                Clear all filters
-              </Button>
-            </EmptyStatePrimary>
+            <EmptyStateFooter>
+              <EmptyStateActions>
+                <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
+                  Clear all filters
+                </Button>
+              </EmptyStateActions>
+            </EmptyStateFooter>
           </EmptyState>
         )}
         {options.length > 0 && (
@@ -287,7 +291,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       {buildPane(false)}
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl
-          isDisabled={!checkedLeafIds.filter(x => !chosenLeafIds.includes(x)).length}
+          isDisabled={!checkedLeafIds.filter((x) => !chosenLeafIds.includes(x)).length}
           onClick={() => moveChecked(true)}
           aria-label="Add selected"
         >
@@ -309,7 +313,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         </DualListSelectorControl>
         <DualListSelectorControl
           onClick={() => moveChecked(false)}
-          isDisabled={!checkedLeafIds.filter(x => !!chosenLeafIds.includes(x)).length}
+          isDisabled={!checkedLeafIds.filter((x) => !!chosenLeafIds.includes(x)).length}
           aria-label="Remove selected"
         >
           <AngleLeftIcon />

package/src/components/EmptyState/EmptyState.tsx

@@ -4,26 +4,26 @@ import styles from '@patternfly/react-styles/css/components/EmptyState/empty-sta
 
 export enum EmptyStateVariant {
   'xs' = 'xs',
-  small = 'small',
-  large = 'large',
+  sm = 'sm',
+  lg = 'lg',
   'xl' = 'xl',
   full = 'full'
 }
 
 export interface EmptyStateProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes added to the EmptyState */
+  /** Additional classes added to the empty state */
   className?: string;
-  /** Content rendered inside the EmptyState */
+  /** Content rendered inside the empty state */
   children: React.ReactNode;
-  /** Modifies EmptyState max-width */
-  variant?: 'xs' | 'small' | 'large' | 'xl' | 'full';
+  /** Modifies empty state max-width and sizes of icon, title and body */
+  variant?: 'xs' | 'sm' | 'lg' | 'xl' | 'full';
   /** Cause component to consume the available height of its container */
   isFullHeight?: boolean;
 }
 
 export const EmptyState: React.FunctionComponent<EmptyStateProps> = ({
   children,
-  className = '',
+  className,
   variant = EmptyStateVariant.full,
   isFullHeight,
   ...props
@@ -32,8 +32,8 @@ export const EmptyState: React.FunctionComponent<EmptyStateProps> = ({
     className={css(
       styles.emptyState,
       variant === 'xs' && styles.modifiers.xs,
-      variant === 'small' && styles.modifiers.sm,
-      variant === 'large' && styles.modifiers.lg,
+      variant === 'sm' && styles.modifiers.sm,
+      variant === 'lg' && styles.modifiers.lg,
       variant === 'xl' && styles.modifiers.xl,
       isFullHeight && styles.modifiers.fullHeight,
       className

package/src/components/EmptyState/EmptyStateActions.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from "@patternfly/react-styles/css/components/EmptyState/empty-state";
+
+export interface EmptyStateActionsProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the empty state actions */
+  children?: React.ReactNode;
+  /** Additional classes added to the empty state actions */
+  className?: string;
+}
+
+export const EmptyStateActions: React.FunctionComponent<EmptyStateActionsProps> = ({
+  children,
+  className,
+  ...props
+}: EmptyStateActionsProps) => (
+  <div className={css(styles.emptyStateActions, className)} {...props}>
+    {children}
+  </div>
+);
+EmptyStateActions.displayName = 'EmptyStateActions';

package/src/components/EmptyState/EmptyStateBody.tsx

@@ -3,15 +3,15 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 export interface EmptyStateBodyProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the EmptyState */
+  /** Content rendered inside the empty state body */
   children?: React.ReactNode;
-  /** Additional classes added to the EmptyState */
+  /** Additional classes added to the empty state body */
   className?: string;
 }
 
 export const EmptyStateBody: React.FunctionComponent<EmptyStateBodyProps> = ({
   children,
-  className = '',
+  className,
   ...props
 }: EmptyStateBodyProps) => (
   <div className={css(styles.emptyStateBody, className)} {...props}>

package/src/components/EmptyState/EmptyStateFooter.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
+
+export interface EmptyStateFooterProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the empty state footer */
+  children?: React.ReactNode;
+  /** Additional classes added to the empty state footer */
+  className?: string;
+}
+
+export const EmptyStateFooter: React.FunctionComponent<EmptyStateFooterProps> = ({
+  children,
+  className,
+  ...props
+}: EmptyStateFooterProps) => (
+  <div className={css(styles.emptyStateFooter, className)} {...props}>
+    {children}
+  </div>
+);
+EmptyStateFooter.displayName = 'EmptyStateFooter';

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
+import { EmptyStateIconProps } from './EmptyStateIcon';
+
+export interface EmptyStateHeaderProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the empty state header, either in addition to or instead of the titleText prop */
+  children?: React.ReactNode;
+  /** Additional classes added to the empty state header */
+  className?: string;
+  /** Additional classes added to the title inside empty state header */
+  titleClassName?: string;
+  /** Text of the title inside empty state header, will be wrapped in headingLevel */
+  titleText?: React.ReactNode;
+  /** Empty state icon element to be rendered */
+  icon?: React.ReactElement<EmptyStateIconProps>;
+  /** The heading level to use, default is h1 */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> = ({
+  children,
+  className,
+  titleClassName,
+  titleText,
+  headingLevel: HeadingLevel = 'h1',
+  icon,
+  ...props
+}: EmptyStateHeaderProps) => (
+  <div className={css('pf-c-empty-state__header', className)} {...props}>
+    {icon}
+    {(titleText || children) && (
+      <div className={css('pf-c-empty-state__title')}>
+        {titleText && (
+          <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
+        )}
+        {children}
+      </div>
+    )}
+  </div>
+);
+EmptyStateHeader.displayName = 'EmptyStateHeader';

package/src/components/EmptyState/EmptyStateIcon.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
+import { Spinner } from '../Spinner';
 
 export interface IconProps extends Omit<React.HTMLProps<SVGElement>, 'size'> {
   /** Changes the color of the icon.  */
@@ -8,31 +9,27 @@ export interface IconProps extends Omit<React.HTMLProps<SVGElement>, 'size'> {
 }
 
 export interface EmptyStateIconProps extends IconProps {
-  /** Additional classes added to the EmptyState */
+  /** Additional classes added to the empty state icon */
   className?: string;
-  /** Icon component to be rendered inside the EmptyState on icon variant
-   * Usually a CheckCircleIcon, ExclamationCircleIcon, LockIcon, PlusCircleIcon, RocketIcon
-   * SearchIcon, or WrenchIcon */
-  icon?: React.ComponentType<any>;
-  /** Component to be rendered inside the EmptyState on container variant */
-  component?: React.ComponentType<any>;
-  /** Adds empty state icon variant styles  */
-  variant?: 'icon' | 'container';
+  /** Icon component to be rendered. Can also be a spinner component */
+  icon: React.ComponentType<any>;
 }
 
+const isSpinner = (icon: React.ReactElement<any>) => icon.type === Spinner;
+
 export const EmptyStateIcon: React.FunctionComponent<EmptyStateIconProps> = ({
-  className = '',
+  className,
   icon: IconComponent,
-  component: AnyComponent,
-  variant = 'icon',
+  color,
   ...props
 }: EmptyStateIconProps) => {
-  const classNames = css(styles.emptyStateIcon, className);
-  return variant === 'icon' ? (
-    <IconComponent className={classNames} {...props} aria-hidden="true" />
-  ) : (
-    <div className={classNames}>
-      <AnyComponent />
+  const iconIsSpinner = isSpinner(<IconComponent />);
+  return (
+    <div
+      className={css(styles.emptyStateIcon)}
+      {...(color && !iconIsSpinner && { style: { ['--pf-c-empty-state__icon--Color']: color } as React.CSSProperties })}
+    >
+      <IconComponent className={className} aria-hidden={!iconIsSpinner} {...props} />
     </div>
   );
 };

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

@@ -3,30 +3,33 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import AddressBookIcon from '@patternfly/react-icons/dist/esm/icons/address-book-icon';
+
 import { EmptyState, EmptyStateVariant } from '../EmptyState';
 import { EmptyStateBody } from '../EmptyStateBody';
-import { EmptyStateSecondaryActions } from '../EmptyStateSecondaryActions';
-import { EmptyStateIcon } from '../EmptyStateIcon';
-import { EmptyStatePrimary } from '../EmptyStatePrimary';
+import { EmptyStateActions } from '../EmptyStateActions';
 import { Button } from '../../Button';
-import { Title, TitleSizes } from '../../Title';
+import { EmptyStateHeader } from '../EmptyStateHeader';
+import { EmptyStateFooter } from '../EmptyStateFooter';
+import { EmptyStateIcon } from '../../../../dist/esm';
 
 describe('EmptyState', () => {
   test('Main', () => {
     const { asFragment } = render(
       <EmptyState>
-        <Title headingLevel="h5" size="lg">
-          HTTP Proxies
-        </Title>
+        <EmptyStateHeader titleText="HTTP Proxies" />
         <EmptyStateBody>
           Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.
         </EmptyStateBody>
-        <Button variant="primary">New HTTP Proxy</Button>
-        <EmptyStateSecondaryActions>
-          <Button variant="link" aria-label="learn more action">
-            Learn more about this in the documentation.
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button variant="primary">New HTTP Proxy</Button>
+          </EmptyStateActions>
+          <EmptyStateActions>
+            <Button variant="link" aria-label="learn more action">
+              Learn more about this in the documentation.
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -34,10 +37,8 @@ describe('EmptyState', () => {
 
   test('Main variant large', () => {
     const { asFragment } = render(
-      <EmptyState variant={EmptyStateVariant.large}>
-        <Title headingLevel="h3" size={TitleSizes.md}>
-          EmptyState large
-        </Title>
+      <EmptyState variant={EmptyStateVariant.lg}>
+        <EmptyStateHeader titleText="EmptyState large" />
       </EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -45,10 +46,8 @@ describe('EmptyState', () => {
 
   test('Main variant small', () => {
     const { asFragment } = render(
-      <EmptyState variant={EmptyStateVariant.small}>
-        <Title headingLevel="h3" size={TitleSizes.md}>
-          EmptyState small
-        </Title>
+      <EmptyState variant={EmptyStateVariant.sm}>
+        <EmptyStateHeader titleText="EmptyState small" />
       </EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -57,9 +56,7 @@ describe('EmptyState', () => {
   test('Main variant xs', () => {
     const { asFragment } = render(
       <EmptyState variant={EmptyStateVariant.xs}>
-        <Title headingLevel="h3" size={TitleSizes.md}>
-          EmptyState small
-        </Title>
+        <EmptyStateHeader titleText="EmptyState extra small" />
       </EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -70,51 +67,47 @@ describe('EmptyState', () => {
     expect(screen.getByTestId('body-test-id')).toHaveClass('custom-empty-state-body pf-c-empty-state__body');
   });
 
-  // TODO: update this with issue #8555
-  xtest('Secondary Action', () => {
-    render(<EmptyStateSecondaryActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
-    expect(screen.getByTestId('actions-test-id')).toHaveClass(
-      'pf-c-empty-state__secondary'
+  test('Actions', () => {
+    render(<EmptyStateActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
+    expect(screen.getByTestId('actions-test-id')).toHaveClass('pf-c-empty-state__actions');
+  });
+
+  test('Full height', () => {
+    const { asFragment } = render(
+      <EmptyState isFullHeight variant={EmptyStateVariant.lg}>
+        <EmptyStateHeader titleText="EmptyState large" />
+      </EmptyState>
     );
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Icon', () => {
-    render(<EmptyStateIcon icon={AddressBookIcon} data-testid="icon-test-id" />);
-    expect(screen.getByTestId('icon-test-id')).toHaveClass('pf-c-empty-state__icon');
+  test('Header with icon', () => {
+    const { asFragment } = render(<EmptyStateHeader icon={<EmptyStateIcon icon={AddressBookIcon} />} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Wrap icon in a div', () => {
-    const { container } = render(
-      <EmptyStateIcon
-        variant="container"
-        component={AddressBookIcon}
-        className="custom-empty-state-icon"
-        id="empty-state-icon-id"
-      />
-    );
+  test('Header with title text renders heading level 1 by default', () => {
+    render(<EmptyStateHeader titleText="Empty state" />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass('pf-c-empty-state__title-text');
+  });
 
-    expect(container.querySelector('div')).toHaveClass('pf-c-empty-state__icon custom-empty-state-icon');
-    expect(container.querySelector('svg')).toBeInTheDocument();
+  test('Header renders custom class passed via titleClassName', () => {
+    render(<EmptyStateHeader titleText="Empty state" titleClassName={'testTitleClassName'} />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass('testTitleClassName');
   });
 
-  // TODO: update this with issue #8555
-  xtest('Primary div', () => {
-    render(
-      <EmptyStatePrimary data-testid="primary-test-id">
-        <Button variant="link">Link</Button>
-      </EmptyStatePrimary>
-    );
-    expect(screen.getByTestId('primary-test-id')).toHaveClass('pf-c-empty-state__primary');
+  test('Header renders the title as other heading levels when one is passed using headingLevel', () => {
+    render(<EmptyStateHeader titleText="Empty state" headingLevel="h3" />);
+    expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass('pf-c-empty-state__title-text');
   });
 
-  test('Full height', () => {
-    const { asFragment } = render(
-      <EmptyState isFullHeight variant={EmptyStateVariant.large}>
-        <Title headingLevel="h3" size={TitleSizes.md}>
-          EmptyState large
-        </Title>
-      </EmptyState>
-    );
-    expect(asFragment()).toMatchSnapshot();
+  test('Headers render children', () => {
+    render(<EmptyStateHeader>Title text</EmptyStateHeader>);
+    expect(screen.getByText('Title text')).toBeVisible();
+  });
+
+  test('Footer', () => {
+    render(<EmptyStateFooter className="custom-empty-state-footer" data-testid="actions-test-id" />);
+    expect(screen.getByTestId('actions-test-id')).toHaveClass('custom-empty-state-footer');
   });
 });

package/src/components/EmptyState/__tests__/Generated/{EmptyStatePrimary.test.tsx → EmptyStateActions.test.tsx}

@@ -3,11 +3,11 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { EmptyStatePrimary } from '../../EmptyStatePrimary';
+import { EmptyStateActions } from '../../EmptyStateActions';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
 
-it('EmptyStatePrimary should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<EmptyStatePrimary className={"''"} children={<div>ReactNode</div>} />);
+it('EmptyStateActions should match snapshot (auto-generated)', () => {
+  const { asFragment } = render(<EmptyStateActions children={<>ReactNode</>} className={"''"} />);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx

@@ -6,7 +6,8 @@ import { render } from '@testing-library/react';
 import { UserIcon } from '@patternfly/react-icons';
 import { EmptyStateIcon } from '../../EmptyStateIcon';
 // any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { Spinner } from '../../../Spinner/Spinner';
+
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
     <EmptyStateIcon
@@ -14,8 +15,6 @@ it('EmptyStateIcon should match snapshot (auto-generated)', () => {
       title={'string'}
       className={"''"}
       icon={UserIcon}
-      component={null}
-      variant={'icon'}
     />
   );
   expect(asFragment()).toMatchSnapshot();
@@ -27,9 +26,7 @@ it('EmptyStateIcon should match snapshot for variant container', () => {
       color={'string'}
       title={'string'}
       className={"''"}
-      icon={null}
-      component={() => <div>Component</div>}
-      variant={'container'}
+      icon={Spinner}
     />
   );
   expect(asFragment()).toMatchSnapshot();

package/src/components/EmptyState/__tests__/Generated/__snapshots__/{EmptyStateSecondaryActions.test.tsx.snap → EmptyStateActions.test.tsx.snap}

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EmptyStateSecondaryActions should match snapshot (auto-generated) 1`] = `
+exports[`EmptyStateActions should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="''"
+    class="pf-c-empty-state__actions ''"
   >
     ReactNode
   </div>