From 70a3cd500411bb50590c8f8a15b8ad39e9116b81 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Wed, 3 Jan 2024 17:03:19 -0500
Subject: [PATCH] feat(EmptyState): update EmptyState with updates for penta

---
 .../src/components/CodeEditor/CodeEditor.tsx  | 18 +---
 .../examples/DualListSelectorComposable.tsx   |  5 +-
 .../DualListSelectorComposableTree.tsx        | 11 +--
 .../src/components/EmptyState/EmptyState.tsx  | 83 ++++++++++++++-----
 .../EmptyState/EmptyStateHeader.tsx           | 34 ++++----
 .../components/EmptyState/EmptyStateIcon.tsx  | 16 +---
 .../EmptyState/__tests__/EmptyState.test.tsx  | 27 ++----
 .../Generated/EmptyStateIcon.test.tsx         |  4 -
 .../EmptyStateIcon.test.tsx.snap              |  8 --
 .../__snapshots__/EmptyState.test.tsx.snap    |  9 ++
 .../EmptyState/examples/EmptyState.md         | 14 ++--
 .../EmptyState/examples/EmptyStateBasic.tsx   | 13 +--
 .../examples/EmptyStateCustomIconColor.tsx    | 19 -----
 .../examples/EmptyStateExtraLarge.tsx         |  7 +-
 .../examples/EmptyStateExtraSmall.tsx         | 10 +--
 .../EmptyState/examples/EmptyStateLarge.tsx   |  7 +-
 .../examples/EmptyStateNoMatchFound.tsx       | 13 +--
 .../EmptyState/examples/EmptyStateSmall.tsx   |  7 +-
 .../EmptyState/examples/EmptyStateSpinner.tsx |  6 +-
 .../examples/EmptyStateWithStatus.tsx         | 61 ++++++++++++++
 .../examples/NotificationDrawerGroups.tsx     | 14 ++--
 .../NotificationDrawerLightweight.tsx         | 16 ++--
 .../examples/WizardValidateOnButtonPress.tsx  | 14 ++--
 .../examples/WizardWithSubmitProgress.tsx     | 14 ++--
 .../src/demos/CardView/examples/CardView.tsx  | 14 ++--
 .../examples/FilterAttributeSearch.tsx        |  7 +-
 .../demos/Filters/examples/FilterFaceted.tsx  |  5 +-
 .../examples/FilterMixedSelectGroup.tsx       |  5 +-
 .../examples/FilterSameSelectGroup.tsx        |  5 +-
 .../Filters/examples/FilterSearchInput.tsx    |  5 +-
 .../examples/NotificationDrawerBasic.tsx      |  9 +-
 .../examples/NotificationDrawerGrouped.tsx    | 21 ++---
 .../AlertGroupToastWithNotificationDrawer.tsx | 14 ++--
 .../Wizard/examples/WizardFinished.tsx        | 14 ++--
 .../examples/WizardValidateOnButtonPress.tsx  | 16 ++--
 packages/react-core/src/helpers/constants.ts  | 14 ++++
 .../NotificationDrawerGroupsDemo.tsx          | 23 +++--
 .../NotificationDrawerLightweightDemo.tsx     | 21 ++---
 .../demos/TableDemo/TableEmptyStateDemo.tsx   | 11 +--
 .../Table/examples/TableEmptyState.tsx        |  9 +-
 .../demos/examples/TableEmptyStateDefault.tsx | 14 ++--
 .../demos/examples/TableEmptyStateError.tsx   | 25 ++----
 .../demos/examples/TableEmptyStateLoading.tsx | 14 +---
 .../src/demos/examples/TableFilterable.tsx    |  9 +-
 .../Table/examples/LegacyTableEmptyState.tsx  | 14 ++--
 yarn.lock                                     | 27 ++----
 46 files changed, 321 insertions(+), 405 deletions(-)
 delete mode 100644 packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx
 create mode 100644 packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx

diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
index 2dcbacc83b2..d7b84a73836 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -7,15 +7,13 @@ import {
   ButtonVariant,
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
   EmptyStateActions,
   EmptyStateVariant,
   EmptyStateFooter,
   getResizeObserver,
   Popover,
   PopoverProps,
-  TooltipPosition,
-  EmptyStateHeader
+  TooltipPosition
 } from '@patternfly/react-core';
 import MonacoEditor, { ChangeHandler, EditorDidMount } from 'react-monaco-editor';
 import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
@@ -520,12 +518,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
           const emptyState =
             providedEmptyState ||
             (isUploadEnabled ? (
-              <EmptyState variant={EmptyStateVariant.sm}>
-                <EmptyStateHeader
-                  titleText={emptyStateTitle}
-                  icon={<EmptyStateIcon icon={CodeIcon} />}
-                  headingLevel="h4"
-                />
+              <EmptyState variant={EmptyStateVariant.sm} titleText={emptyStateTitle} icon={CodeIcon} headingLevel="h4">
                 <EmptyStateBody>{emptyStateBody}</EmptyStateBody>
                 {!isReadOnly && (
                   <EmptyStateFooter>
@@ -543,12 +536,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                 )}
               </EmptyState>
             ) : (
-              <EmptyState variant={EmptyStateVariant.sm}>
-                <EmptyStateHeader
-                  titleText={emptyStateTitle}
-                  icon={<EmptyStateIcon icon={CodeIcon} />}
-                  headingLevel="h4"
-                />
+              <EmptyState variant={EmptyStateVariant.sm} titleText={emptyStateTitle} icon={CodeIcon} headingLevel="h4">
                 {!isReadOnly && (
                   <EmptyStateFooter>
                     <EmptyStateActions>
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
index 6cf2f3ffc1a..53870b2bbef 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -11,10 +11,8 @@ import {
   SearchInput,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
@@ -139,8 +137,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
   };
 
   const buildEmptyState = (isAvailable: boolean) => (
-    <EmptyState variant={EmptyStateVariant.sm}>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
index d92711defbe..1adeda4b975 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
@@ -11,11 +11,9 @@ import {
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
-  EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateActions
 } 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';
@@ -258,12 +256,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         listMinHeight="300px"
       >
         {filterApplied && options.length === 0 && (
-          <EmptyState variant={EmptyStateVariant.sm}>
-            <EmptyStateHeader
-              headingLevel="h4"
-              titleText="No results found"
-              icon={<EmptyStateIcon icon={SearchIcon} />}
-            />
+          <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
             <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
             <EmptyStateFooter>
               <EmptyStateActions>
diff --git a/packages/react-core/src/components/EmptyState/EmptyState.tsx b/packages/react-core/src/components/EmptyState/EmptyState.tsx
index 3c3b74322ba..07e6c1b01d0 100644
--- a/packages/react-core/src/components/EmptyState/EmptyState.tsx
+++ b/packages/react-core/src/components/EmptyState/EmptyState.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
+import { EmptyStateHeader, EmptyStateHeadingLevel } from './EmptyStateHeader';
+import { EmptyStateIconProps } from './EmptyStateIcon';
+import { statusIcons } from '../../helpers';
 
 export enum EmptyStateVariant {
   'xs' = 'xs',
@@ -10,37 +13,79 @@ export enum EmptyStateVariant {
   full = 'full'
 }
 
+export type EmptyStateStatus = 'danger' | 'warning' | 'success' | 'info' | 'custom';
+export type EmptyStateVariantType = 'xs' | 'sm' | 'lg' | 'xl' | 'full';
+
 export interface EmptyStateProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the empty state */
   className?: string;
   /** Content rendered inside the empty state */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /** Modifies empty state max-width and sizes of icon, title and body */
-  variant?: 'xs' | 'sm' | 'lg' | 'xl' | 'full';
+  variant?: EmptyStateVariantType;
   /** Cause component to consume the available height of its container */
   isFullHeight?: boolean;
+  /** Status of the empty state, will set a default status icon and color. Icon can be overwritten using the icon prop */
+  status?: EmptyStateStatus;
+  /** Additional class names to apply to the empty state header */
+  headerClassName?: string;
+  /** Additional props passed to the empty state header container */
+  headerProps?: React.HTMLProps<HTMLDivElement>;
+  /** 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. Can also be a spinner component */
+  icon?: React.ComponentType<any>;
+  /** Additional props passed to the icon element */
+  iconProps?: EmptyStateIconProps;
+  /** The heading level to use, default is h1 */
+  headingLevel?: EmptyStateHeadingLevel;
 }
 
 export const EmptyState: React.FunctionComponent<EmptyStateProps> = ({
   children,
   className,
-  variant = EmptyStateVariant.full,
+  variant = 'full',
   isFullHeight,
+  status,
+  icon: customIcon,
+  titleText,
+  titleClassName,
+  headerClassName,
+  headingLevel,
+  headerProps,
   ...props
-}: EmptyStateProps) => (
-  <div
-    className={css(
-      styles.emptyState,
-      variant === 'xs' && styles.modifiers.xs,
-      variant === 'sm' && styles.modifiers.sm,
-      variant === 'lg' && styles.modifiers.lg,
-      variant === 'xl' && styles.modifiers.xl,
-      isFullHeight && styles.modifiers.fullHeight,
-      className
-    )}
-    {...props}
-  >
-    <div className={css(styles.emptyStateContent)}>{children}</div>
-  </div>
-);
+}: EmptyStateProps) => {
+  const statusIcon = status && statusIcons[status];
+  const icon = customIcon || statusIcon;
+
+  return (
+    <div
+      className={css(
+        styles.emptyState,
+        variant === 'xs' && styles.modifiers.xs,
+        variant === 'sm' && styles.modifiers.sm,
+        variant === 'lg' && styles.modifiers.lg,
+        variant === 'xl' && styles.modifiers.xl,
+        isFullHeight && styles.modifiers.fullHeight,
+        status && styles.modifiers[status],
+        className
+      )}
+      {...props}
+    >
+      <div className={css(styles.emptyStateContent)}>
+        <EmptyStateHeader
+          icon={icon}
+          titleText={titleText}
+          titleClassName={titleClassName}
+          className={headerClassName}
+          headingLevel={headingLevel}
+          {...headerProps}
+        />
+        {children}
+      </div>
+    </div>
+  );
+};
 EmptyState.displayName = 'EmptyState';
diff --git a/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx b/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx
index 2a108ca41ee..38749281a60 100644
--- a/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx
+++ b/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx
@@ -1,42 +1,40 @@
 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';
+import { EmptyStateIcon, EmptyStateIconProps } from './EmptyStateIcon';
+
+export type EmptyStateHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 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>;
+  titleText: React.ReactNode;
+  /** Empty state icon element to be rendered. Can also be a spinner component */
+  icon?: React.ComponentType<any>;
+  /** Additional props passed to the icon element */
+  iconProps?: EmptyStateIconProps;
   /** The heading level to use, default is h1 */
-  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  headingLevel?: EmptyStateHeadingLevel;
 }
 
 export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> = ({
-  children,
   className,
   titleClassName,
   titleText,
   headingLevel: HeadingLevel = 'h1',
-  icon,
+  icon: Icon,
+  iconProps,
   ...props
 }: EmptyStateHeaderProps) => (
   <div className={css(`${styles.emptyState}__header`, className)} {...props}>
-    {icon}
-    {(titleText || children) && (
-      <div className={css(`${styles.emptyState}__title`)}>
-        {titleText && (
-          <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
-        )}
-        {children}
-      </div>
-    )}
+    {Icon && <EmptyStateIcon icon={Icon} {...iconProps} />}
+    <div className={css(`${styles.emptyState}__title`)}>
+      <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
+    </div>
   </div>
 );
+
 EmptyStateHeader.displayName = 'EmptyStateHeader';
diff --git a/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx b/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx
index fb892e01e0b..dd9234e168d 100644
--- a/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx
+++ b/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx
@@ -2,14 +2,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';
-import cssIconColor from '@patternfly/react-tokens/dist/esm/c_empty_state__icon_Color';
-
-export interface IconProps extends Omit<React.HTMLProps<SVGElement>, 'size'> {
-  /** Changes the color of the icon.  */
-  color?: string;
-}
-
-export interface EmptyStateIconProps extends IconProps {
+export interface EmptyStateIconProps {
   /** Additional classes added to the empty state icon */
   className?: string;
   /** Icon component to be rendered. Can also be a spinner component */
@@ -21,15 +14,12 @@ const isSpinner = (icon: React.ReactElement<any>) => icon.type === Spinner;
 export const EmptyStateIcon: React.FunctionComponent<EmptyStateIconProps> = ({
   className,
   icon: IconComponent,
-  color,
   ...props
 }: EmptyStateIconProps) => {
   const iconIsSpinner = isSpinner(<IconComponent />);
+
   return (
-    <div
-      className={css(styles.emptyStateIcon)}
-      {...(color && !iconIsSpinner && { style: { [cssIconColor.name]: color } as React.CSSProperties })}
-    >
+    <div className={css(styles.emptyStateIcon)}>
       <IconComponent className={className} aria-hidden={!iconIsSpinner} {...props} />
     </div>
   );
diff --git a/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx
index bff4c5fd909..c080df284e8 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx
+++ b/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx
@@ -10,14 +10,12 @@ import { EmptyStateActions } from '../EmptyStateActions';
 import { Button } from '../../Button';
 import { EmptyStateHeader } from '../EmptyStateHeader';
 import { EmptyStateFooter } from '../EmptyStateFooter';
-import { EmptyStateIcon } from '../../../../dist/esm';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 describe('EmptyState', () => {
   test('Main', () => {
     const { asFragment } = render(
-      <EmptyState>
-        <EmptyStateHeader titleText="HTTP Proxies" />
+      <EmptyState titleText="HTTP Proxies">
         <EmptyStateBody>
           Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.
         </EmptyStateBody>
@@ -38,27 +36,21 @@ describe('EmptyState', () => {
 
   test('Main variant large', () => {
     const { asFragment } = render(
-      <EmptyState variant={EmptyStateVariant.lg}>
-        <EmptyStateHeader titleText="EmptyState large" />
-      </EmptyState>
+      <EmptyState titleText="EmptyState large" variant={EmptyStateVariant.lg}></EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('Main variant small', () => {
     const { asFragment } = render(
-      <EmptyState variant={EmptyStateVariant.sm}>
-        <EmptyStateHeader titleText="EmptyState small" />
-      </EmptyState>
+      <EmptyState titleText="EmptyState small" variant={EmptyStateVariant.sm}></EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('Main variant xs', () => {
     const { asFragment } = render(
-      <EmptyState variant={EmptyStateVariant.xs}>
-        <EmptyStateHeader titleText="EmptyState extra small" />
-      </EmptyState>
+      <EmptyState titleText="EmptyState extra small" variant={EmptyStateVariant.xs}></EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -75,15 +67,13 @@ describe('EmptyState', () => {
 
   test('Full height', () => {
     const { asFragment } = render(
-      <EmptyState isFullHeight variant={EmptyStateVariant.lg}>
-        <EmptyStateHeader titleText="EmptyState large" />
-      </EmptyState>
+      <EmptyState titleText="EmptyState large" isFullHeight variant={EmptyStateVariant.lg}></EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('Header with icon', () => {
-    const { asFragment } = render(<EmptyStateHeader icon={<EmptyStateIcon icon={AddressBookIcon} />} />);
+    const { asFragment } = render(<EmptyStateHeader titleText="Empty state" icon={AddressBookIcon} />);
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -102,11 +92,6 @@ describe('EmptyState', () => {
     expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass(styles.emptyStateTitleText);
   });
 
-  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');
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx
index 906756a3400..0e64025db6a 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx
@@ -11,8 +11,6 @@ import { Spinner } from '../../../Spinner/Spinner';
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
     <EmptyStateIcon
-      color={'string'}
-      title={'string'}
       className={"''"}
       icon={UserIcon}
     />
@@ -23,8 +21,6 @@ it('EmptyStateIcon should match snapshot (auto-generated)', () => {
 it('EmptyStateIcon should match snapshot for variant container', () => {
   const { asFragment } = render(
     <EmptyStateIcon
-      color={'string'}
-      title={'string'}
       className={"''"}
       icon={Spinner}
     />
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap
index 1c98d3d5c64..9ca83f362d6 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap
@@ -4,11 +4,9 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-empty-state__icon"
-    style="--pf-v5-c-empty-state__icon--Color: string;"
   >
     <svg
       aria-hidden="true"
-      aria-labelledby="icon-title-0"
       class="pf-v5-svg ''"
       fill="currentColor"
       height="1em"
@@ -16,11 +14,6 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
       viewBox="0 0 448 512"
       width="1em"
     >
-      <title
-        id="icon-title-0"
-      >
-        string
-      </title>
       <path
         d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
       />
@@ -40,7 +33,6 @@ exports[`EmptyStateIcon should match snapshot for variant container 1`] = `
       aria-valuetext="Loading..."
       class="pf-v5-c-spinner pf-m-xl ''"
       role="progressbar"
-      title="string"
       viewBox="0 0 100 100"
     >
       <circle
diff --git a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
index f9d7476090a..5a1d1fa4f51 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
+++ b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
@@ -48,6 +48,15 @@ exports[`EmptyState Header with icon 1`] = `
         />
       </svg>
     </div>
+    <div
+      class="pf-v5-c-empty-state__title"
+    >
+      <h1
+        class="pf-v5-c-empty-state__title-text"
+      >
+        Empty state
+      </h1>
+    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md
index 738ae02c5d2..9ee96c64cdb 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md
@@ -2,12 +2,11 @@
 id: Empty state
 section: components
 cssPrefix: pf-v5-c-empty-state
-propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
+propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 ## Examples
 ### Basic
@@ -35,6 +34,10 @@ import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_s
 ```ts file="EmptyStateExtraLarge.tsx"
 ```
 
+### With status
+```ts file="EmptyStateWithStatus.tsx"
+```
+
 ### Spinner
 
 ```ts file="EmptyStateSpinner.tsx"
@@ -44,8 +47,3 @@ import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_s
 
 ```ts file="EmptyStateNoMatchFound.tsx"
 ```
-
-### Custom icon color
-
-```ts file="EmptyStateCustomIconColor.tsx"
-```
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx
index 105cb71c426..907b6ff9d22 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx
@@ -1,18 +1,9 @@
 import React from 'react';
-import {
-  Button,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateActions,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateIcon
-} from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateBody, EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateBasic: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+  <EmptyState titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx
deleted file mode 100644
index d5fdb7d2f76..00000000000
--- a/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-/* eslint-disable camelcase */
-import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
-
-export const EmptyStateCustomIconColor: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader
-      titleText="Custom icon color"
-      headingLevel="h4"
-      icon={<EmptyStateIcon icon={CheckIcon} color={global_success_color_100.var} />}
-    />
-    <EmptyStateBody>
-      This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to
-      use but flexible enough to meet a variety of needs.
-    </EmptyStateBody>
-  </EmptyState>
-);
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx
index c5752199268..cb09ceb73a6 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx
@@ -5,15 +5,12 @@ import {
   EmptyStateVariant,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateIcon
+  EmptyStateFooter
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateExtraLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.xl}>
-    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+  <EmptyState variant={EmptyStateVariant.xl} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx
index 1c49330094d..ee483448546 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx
@@ -5,17 +5,13 @@ import {
   EmptyStateVariant,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateHeader,
   EmptyStateFooter
 } from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateExtraSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.xs}>
-    <EmptyStateHeader titleText="Empty state" headingLevel="h4" />
-    <EmptyStateBody>
-      This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
-      meet a variety of needs.
-    </EmptyStateBody>
+  <EmptyState variant={EmptyStateVariant.xs} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
+    <EmptyStateBody>This represents an the empty state pattern in PatternFly. The icon is optional.</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>
         <Button variant="link">Multiple</Button>
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx
index 5f0feacd5fb..062f66a9845 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx
@@ -5,15 +5,12 @@ import {
   EmptyStateVariant,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateIcon
+  EmptyStateFooter
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.lg}>
-    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+  <EmptyState variant={EmptyStateVariant.lg} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx
index 3a928b4c1c7..ebc08c8d641 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx
@@ -1,18 +1,9 @@
 import React from 'react';
-import {
-  Button,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateActions,
-  EmptyStateIcon
-} from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const EmptyStateNoMatchFound: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader titleText="No results found" headingLevel="h4" icon={<EmptyStateIcon icon={SearchIcon} />} />
+  <EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
     <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx
index e0b3b7a8996..eae0cc8e481 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx
@@ -5,15 +5,12 @@ import {
   EmptyStateVariant,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateIcon
+  EmptyStateFooter
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.sm}>
-    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+  <EmptyState variant={EmptyStateVariant.sm} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx
index 652cb34ccb5..6acd843b291 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import { EmptyState, EmptyStateHeader, EmptyStateIcon, Spinner } from '@patternfly/react-core';
+import { EmptyState, Spinner } from '@patternfly/react-core';
 
 export const EmptyStateSpinner: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader titleText="Loading" headingLevel="h4" icon={<EmptyStateIcon icon={Spinner} />} />
-  </EmptyState>
+  <EmptyState titleText="Loading" headingLevel="h4" icon={Spinner} />
 );
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx
new file mode 100644
index 00000000000..cb86ee4cf42
--- /dev/null
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateActions,
+  EmptyStateStatus,
+  Button
+} from '@patternfly/react-core';
+
+export const EmptyStateWithStatus: React.FunctionComponent = () => {
+  const [status, setStatus] = React.useState<EmptyStateStatus>('success');
+
+  const toggleStatus = () => {
+    interface StatusToggleMap {
+      [status: string]: EmptyStateStatus;
+    }
+
+    const statusToggleMap: StatusToggleMap = {
+      success: 'danger',
+      danger: 'warning',
+      warning: 'info',
+      info: 'custom',
+      custom: 'success'
+    };
+
+    setStatus((prevStatus: EmptyStateStatus) => statusToggleMap[prevStatus]);
+  };
+
+  const titleMap = {
+    success: "You're all set",
+    danger: "You're not set",
+    warning: "You're probably not set",
+    info: 'You might be set',
+    custom: "You're custom"
+  };
+
+  return (
+    <EmptyState status={status} titleText={titleMap[status]} headingLevel="h4">
+      <EmptyStateBody>
+        This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible
+        enough to meet a variety of needs.
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="primary" onClick={toggleStatus}>
+            Toggle status
+          </Button>
+        </EmptyStateActions>
+        <EmptyStateActions>
+          <Button variant="link">Multiple</Button>
+          <Button variant="link">Action Buttons</Button>
+          <Button variant="link">Can</Button>
+          <Button variant="link">Go here</Button>
+          <Button variant="link">In the secondary</Button>
+          <Button variant="link">Action area</Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
index 3021a7bfc6c..8b58a2cb155 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
   EmptyStateFooter,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -16,7 +15,6 @@ import {
   NotificationDrawerListItemHeader,
   EmptyStateVariant,
   EmptyStateActions,
-  EmptyStateIcon,
   Dropdown,
   DropdownList,
   DropdownItem,
@@ -377,12 +375,12 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
             truncateTitle={1}
           >
             <NotificationDrawerList isHidden={!thirdGroupExpanded} aria-label="Notifications in the third group">
-              <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateHeader
-                  headingLevel="h2"
-                  titleText="No alerts found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No alerts found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.full}
+              >
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx
index 25263a10f49..9021d0812ea 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx
@@ -4,7 +4,6 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateFooter,
-  EmptyStateHeader,
   EmptyStateVariant,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -15,8 +14,7 @@ import {
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
-  EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
@@ -173,12 +171,12 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => {
               isHidden={!thirdGroupExpanded}
               aria-label="Notifications in the third lightweight group"
             >
-              <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateHeader
-                  headingLevel="h2"
-                  titleText="No alerts found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No alerts found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.full}
+              >
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.
diff --git a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
index af17b4fa5ae..666643ff540 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
@@ -4,11 +4,9 @@ import {
   Button,
   Alert,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Form,
   FormGroup,
@@ -47,12 +45,12 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>
diff --git a/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx b/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx
index 5caa1e275af..a3cf9224a66 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Button,
   Wizard,
@@ -37,12 +35,12 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>
diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx
index 8e6d004f9ef..94618802668 100644
--- a/packages/react-core/src/demos/CardView/examples/CardView.tsx
+++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx
@@ -12,8 +12,6 @@ import {
   DropdownItem,
   DropdownList,
   EmptyState,
-  EmptyStateHeader,
-  EmptyStateIcon,
   EmptyStateFooter,
   EmptyStateVariant,
   EmptyStateActions,
@@ -484,12 +482,12 @@ export const CardViewBasic: React.FunctionComponent = () => {
           <Gallery hasGutter aria-label="Selectable card container">
             <Card isCompact>
               <Bullseye>
-                <EmptyState variant={EmptyStateVariant.xs}>
-                  <EmptyStateHeader
-                    headingLevel="h2"
-                    titleText="Add a new card to your page"
-                    icon={<EmptyStateIcon icon={PlusCircleIcon} />}
-                  />
+                <EmptyState
+                  headingLevel="h2"
+                  titleText="Add a new card to your page"
+                  icon={PlusCircleIcon}
+                  variant={EmptyStateVariant.xs}
+                >
                   <EmptyStateFooter>
                     <EmptyStateActions>
                       <Button variant="link">Add card</Button>
diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
index 71195ad840e..d01f2bec7e3 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
@@ -13,7 +13,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -22,8 +21,7 @@ import {
   ToolbarGroup,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -625,8 +623,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
index d2315858746..89ce32876c7 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
@@ -12,7 +12,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -21,7 +20,6 @@ import {
   ToolbarFilter,
   ToolbarToggleGroup,
   MenuGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -442,8 +440,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
index e5321c3277c..9fd942b67c2 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
@@ -12,7 +12,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -20,7 +19,6 @@ import {
   Badge,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -492,8 +490,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
index e8c74d36c98..491df5f43ab 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
@@ -12,13 +12,11 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -465,8 +463,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
index 46111ca27bb..636688c7ec2 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
@@ -13,12 +13,10 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -274,8 +272,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index d237fe84aee..11d0c15f890 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -13,8 +13,6 @@ import {
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
   MenuToggle,
@@ -505,12 +503,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
           </NotificationDrawerList>
         )}
         {!shouldShowNotifications && (
-          <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateHeader
-              headingLevel="h2"
-              titleText="No alerts found"
-              icon={<EmptyStateIcon icon={SearchIcon} />}
-            />
+          <EmptyState headingLevel="h2" titleText="No alerts found" icon={SearchIcon} variant={EmptyStateVariant.full}>
             <EmptyStateBody>
               There are currently no alerts. There may be silenced critical alerts however.
             </EmptyStateBody>
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index 250782181f1..45a26b7ff8d 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -13,8 +13,6 @@ import {
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
   MenuToggle,
@@ -723,12 +721,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               onExpand={toggleThirdDrawer}
             >
               <NotificationDrawerList isHidden={!thirdDrawerGroupExpanded}>
-                <EmptyState variant={EmptyStateVariant.full}>
-                  <EmptyStateHeader
-                    headingLevel="h2"
-                    titleText="No alerts found"
-                    icon={<EmptyStateIcon icon={SearchIcon} />}
-                  />
+                <EmptyState
+                  headingLevel="h2"
+                  titleText="No alerts found"
+                  icon={SearchIcon}
+                  variant={EmptyStateVariant.full}
+                >
                   <EmptyStateBody>
                     There are currently no critical alerts firing. There may be firing alerts of other severities or
                     silenced critical alerts however.
@@ -744,12 +742,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
           </NotificationDrawerGroupList>
         )}
         {!shouldShowNotifications && (
-          <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateHeader
-              headingLevel="h2"
-              titleText="No alerts found"
-              icon={<EmptyStateIcon icon={SearchIcon} />}
-            />
+          <EmptyState headingLevel="h2" titleText="No alerts found" icon={SearchIcon} variant={EmptyStateVariant.full}>
             <EmptyStateBody>
               There are currently no alerts. There may be silenced critical alerts however.
             </EmptyStateBody>
diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index b2dfd5c4381..ec37270ca55 100644
--- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
+++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -3,8 +3,6 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
   NotificationBadge,
   NotificationBadgeVariant,
   NotificationDrawer,
@@ -297,12 +295,12 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           </NotificationDrawerList>
         )}
         {notifications.length === 0 && (
-          <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateHeader
-              headingLevel="h2"
-              titleText="No notifications found"
-              icon={<EmptyStateIcon icon={SearchIcon} />}
-            />
+          <EmptyState
+            headingLevel="h2"
+            titleText="No notifications found"
+            icon={SearchIcon}
+            variant={EmptyStateVariant.full}
+          >
             <EmptyStateBody>There are currently no notifications.</EmptyStateBody>
           </EmptyState>
         )}
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx
index 7fd53ead52d..b27fe110d36 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Button
 } from '@patternfly/react-core';
@@ -43,12 +41,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx
index 96bb52aebd2..53484e9ba33 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
@@ -10,8 +9,7 @@ import {
   TextInput,
   Progress,
   Button,
-  Alert,
-  EmptyStateIcon
+  Alert
 } from '@patternfly/react-core';
 import {
   Wizard as WizardDeprecated,
@@ -52,12 +50,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>
diff --git a/packages/react-core/src/helpers/constants.ts b/packages/react-core/src/helpers/constants.ts
index 28d65f13de3..b12b6f01e88 100644
--- a/packages/react-core/src/helpers/constants.ts
+++ b/packages/react-core/src/helpers/constants.ts
@@ -10,6 +10,12 @@ import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_h
 import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_xl';
 import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_2xl';
 
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
 export const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' };
 
 export const KEYHANDLER_DIRECTION = { UP: 'up', DOWN: 'down', RIGHT: 'right', LEFT: 'left' };
@@ -47,3 +53,11 @@ export const globalHeightBreakpoints = {
   xl: parseInt(globalHeightBreakpointXl.value),
   '2xl': parseInt(globalHeightBreakpoint2xl.value)
 };
+
+export const statusIcons = {
+  success: CheckCircleIcon,
+  danger: ExclamationCircleIcon,
+  warning: ExclamationTriangleIcon,
+  info: InfoCircleIcon,
+  custom: BellIcon
+};
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
index 935e3318608..df35a328cc1 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
@@ -2,9 +2,7 @@ import React from 'react';
 import {
   Button,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateBody,
-  EmptyStateIcon,
   EmptyStateVariant,
   NotificationDrawer,
   NotificationDrawerProps,
@@ -35,10 +33,7 @@ interface GroupsNotificationDrawerDemoState {
   thirdGroupExpanded: boolean;
 }
 
-export class GroupsNotificationDrawerDemo extends React.Component<
-  NotificationDrawerProps,
-  GroupsNotificationDrawerDemoState
-> {
+class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerProps, GroupsNotificationDrawerDemoState> {
   static displayName = 'GroupsNotificationDrawerDemo';
   constructor(props: NotificationDrawerProps) {
     super(props);
@@ -400,12 +395,12 @@ export class GroupsNotificationDrawerDemo extends React.Component<
               onExpand={this.toggleThirdDrawer}
             >
               <NotificationDrawerList isHidden={!thirdGroupExpanded}>
-                <EmptyState variant={EmptyStateVariant.full}>
-                  <EmptyStateHeader
-                    titleText="No alerts found"
-                    headingLevel="h2"
-                    icon={<EmptyStateIcon icon={SearchIcon} />}
-                  />
+                <EmptyState
+                  headingLevel="h2"
+                  titleText="No alerts found"
+                  icon={SearchIcon}
+                  variant={EmptyStateVariant.full}
+                >
                   <EmptyStateBody>
                     There are currently no critical alerts firing. There may be firing alerts of other severities or
                     silenced critical alerts however.
@@ -424,3 +419,7 @@ export class GroupsNotificationDrawerDemo extends React.Component<
     );
   }
 }
+
+GroupsNotificationDrawerDemo.displayName = 'GroupsNotificationDrawerDemo';
+
+export { GroupsNotificationDrawerDemo };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerLightweightDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerLightweightDemo.tsx
index 332d25a05ea..98ce7b28253 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerLightweightDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerLightweightDemo.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
   EmptyStateVariant,
   NotificationDrawer,
   NotificationDrawerProps,
@@ -15,8 +14,6 @@ import {
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
-  Title,
-  EmptyStateHeader,
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
@@ -28,7 +25,7 @@ interface GroupsNotificationDrawerDemoState {
   thirdGroupIsOpen: boolean;
 }
 
-export class LightweightNotificationDrawerDemo extends React.Component<
+class LightweightNotificationDrawerDemo extends React.Component<
   NotificationDrawerProps,
   GroupsNotificationDrawerDemoState
 > {
@@ -191,12 +188,12 @@ export class LightweightNotificationDrawerDemo extends React.Component<
               onExpand={this.toggleThirdDrawer}
             >
               <NotificationDrawerList isHidden={!thirdGroupExpanded}>
-                <EmptyState variant={EmptyStateVariant.full}>
-                  <EmptyStateHeader
-                    titleText="No alerts found"
-                    headingLevel="h2"
-                    icon={<EmptyStateIcon icon={SearchIcon} />}
-                  />
+                <EmptyState
+                  headingLevel="h2"
+                  titleText="No alerts found"
+                  icon={SearchIcon}
+                  variant={EmptyStateVariant.full}
+                >
                   <EmptyStateBody>
                     There are currently no critical alerts firing. There may be firing alerts of other severities or
                     silenced critical alerts however.
@@ -215,3 +212,7 @@ export class LightweightNotificationDrawerDemo extends React.Component<
     );
   }
 }
+
+LightweightNotificationDrawerDemo.displayName = 'LightweightNotificationDrawerDemo';
+
+export { LightweightNotificationDrawerDemo };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx
index 7fa388c6006..769e0c917ea 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx
@@ -5,16 +5,14 @@ import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-tab
 import {
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
   EmptyStateActions,
   Button,
   EmptyStateVariant,
-  EmptyStateHeader,
   EmptyStateFooter
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-export class EmptyStateTable extends React.Component<TableProps, { columns: (ICell | string)[]; rows: IRow[] }> {
+class EmptyStateTable extends React.Component<TableProps, { columns: (ICell | string)[]; rows: IRow[] }> {
   static displayName = 'EmptyStateTable';
   constructor(props: TableProps) {
     super(props);
@@ -31,8 +29,7 @@ export class EmptyStateTable extends React.Component<TableProps, { columns: (ICe
           heightAuto: true,
           props: { colSpan: '8' },
           title: (
-            <EmptyState variant={EmptyStateVariant.sm}>
-              <EmptyStateHeader titleText="Empty state" icon={<EmptyStateIcon icon={CubesIcon} />} headingLevel="h5" />
+            <EmptyState headingLevel="h5" titleText="Empty state" icon={CubesIcon} variant={EmptyStateVariant.sm}>
               <EmptyStateBody>
                 This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but
                 flexible enough to meet a variety of needs.
@@ -66,3 +63,7 @@ export class EmptyStateTable extends React.Component<TableProps, { columns: (ICe
     );
   }
 }
+
+EmptyStateTable.displayName = 'EmptyStateTable';
+
+export { EmptyStateTable };
diff --git a/packages/react-table/src/components/Table/examples/TableEmptyState.tsx b/packages/react-table/src/components/Table/examples/TableEmptyState.tsx
index 1d89ce97499..2407e297bae 100644
--- a/packages/react-table/src/components/Table/examples/TableEmptyState.tsx
+++ b/packages/react-table/src/components/Table/examples/TableEmptyState.tsx
@@ -4,10 +4,8 @@ import {
   Bullseye,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
   Button,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateActions
 } from '@patternfly/react-core';
@@ -31,12 +29,7 @@ export const TableEmptyState: React.FunctionComponent = () => (
       <Tr>
         <Td colSpan={8}>
           <Bullseye>
-            <EmptyState variant={EmptyStateVariant.sm}>
-              <EmptyStateHeader
-                icon={<EmptyStateIcon icon={SearchIcon} />}
-                titleText="No results found"
-                headingLevel="h2"
-              />
+            <EmptyState headingLevel="h2" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
               <EmptyStateBody>Clear all filters and try again.</EmptyStateBody>
               <EmptyStateFooter>
                 <EmptyStateActions>
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx b/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx
index ab9febef731..98803ffc12e 100644
--- a/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx
+++ b/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx
@@ -6,9 +6,7 @@ import {
   Card,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateActions,
   PageSection
@@ -34,12 +32,12 @@ export const TableEmptyStateDefault: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState variant={EmptyStateVariant.sm}>
-                    <EmptyStateHeader
-                      icon={<EmptyStateIcon icon={SearchIcon} />}
-                      titleText="No results found"
-                      headingLevel="h2"
-                    />
+                  <EmptyState
+                    headingLevel="h2"
+                    titleText="No results found"
+                    icon={SearchIcon}
+                    variant={EmptyStateVariant.sm}
+                  >
                     <EmptyStateBody>
                       No results match this filter criteria. Clear all filters and try again.
                     </EmptyStateBody>
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx
index c291b619f2b..abf68863499 100644
--- a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx
+++ b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx
@@ -1,17 +1,6 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import {
-  Bullseye,
-  Card,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateHeader,
-  PageSection
-} from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
+import { Bullseye, Card, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateError: React.FunctionComponent = () => (
@@ -32,12 +21,12 @@ export const TableEmptyStateError: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState variant={EmptyStateVariant.sm}>
-                    <EmptyStateHeader
-                      titleText="Unable to connect"
-                      icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />}
-                      headingLevel="h2"
-                    />
+                  <EmptyState
+                    headingLevel="h2"
+                    titleText="Unable to connect"
+                    status="danger"
+                    variant={EmptyStateVariant.sm}
+                  >
                     <EmptyStateBody>
                       There was an error retrieving data. Check your connection and reload the page.
                     </EmptyStateBody>
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx b/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx
index 229a6a327fc..4f015025306 100644
--- a/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx
+++ b/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx
@@ -1,14 +1,6 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import {
-  Bullseye,
-  Card,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateHeader,
-  PageSection,
-  Spinner
-} from '@patternfly/react-core';
+import { Bullseye, Card, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateLoading: React.FunctionComponent = () => (
@@ -29,9 +21,7 @@ export const TableEmptyStateLoading: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState>
-                    <EmptyStateHeader titleText="Loading" headingLevel="h2" icon={<EmptyStateIcon icon={Spinner} />} />
-                  </EmptyState>
+                  <EmptyState headingLevel="h2" titleText="Loading" icon={Spinner}></EmptyState>
                 </Bullseye>
               </Td>
             </Tr>
diff --git a/packages/react-table/src/demos/examples/TableFilterable.tsx b/packages/react-table/src/demos/examples/TableFilterable.tsx
index 0d40da804fe..ded33e8c2bc 100644
--- a/packages/react-table/src/demos/examples/TableFilterable.tsx
+++ b/packages/react-table/src/demos/examples/TableFilterable.tsx
@@ -6,8 +6,6 @@ import {
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
   EmptyStateFooter,
   Label,
   MenuToggle,
@@ -308,12 +306,7 @@ export const TableFilterable: React.FunctionComponent = () => {
       : rowData;
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader
-        titleText="Clear all filters and try again."
-        headingLevel="h5"
-        icon={<EmptyStateIcon icon={SearchIcon} />}
-      />
+    <EmptyState headingLevel="h5" titleText="Clear all filters and try again." icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx
index b15b7f8a765..d49cd0cf29e 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx
@@ -4,10 +4,8 @@ import {
   Bullseye,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
   Button,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateActions
 } from '@patternfly/react-core';
@@ -26,12 +24,12 @@ export const LegacyTableEmptyState: React.FunctionComponent = () => {
           props: { colSpan: 8 },
           title: (
             <Bullseye>
-              <EmptyState variant={EmptyStateVariant.sm}>
-                <EmptyStateHeader
-                  titleText="No results found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                  headingLevel="h2"
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No results found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.sm}
+              >
                 <EmptyStateBody>Clear all filters and try again.</EmptyStateBody>
                 <EmptyStateFooter>
                   <EmptyStateActions>
diff --git a/yarn.lock b/yarn.lock
index adcd84d9244..d1983fe9525 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -107,7 +107,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.3.tgz#3febd552541e62b5e883a25eb3effd7c7379db11"
   integrity sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==
 
-"@babel/compat-data@^7.23.5":
+"@babel/compat-data@^7.22.9":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
   integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
@@ -458,21 +458,6 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.23.6":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.6.tgz#b04d915ce92ce363666f816a884cdcfc9be04953"
-  integrity sha512-cBXU1vZni/CpGF29iTu4YRbOZt3Wat6zCoMDxRF1MayiEc4URxOj31tT65HUM0CRpMowA3HCJaAOVOUnMf96cw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-member-expression-to-functions" "^7.23.0"
-    "@babel/helper-optimise-call-expression" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.20"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    semver "^6.3.1"
-
 "@babel/helper-create-regexp-features-plugin@^7.12.13":
   version "7.12.17"
   resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.17.tgz"
@@ -525,7 +510,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz#ac3a56dbada59ed969d712cf527bd8271fe3eba8"
   integrity sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==
 
-"@babel/helper-environment-visitor@^7.22.20":
+"@babel/helper-environment-visitor@^7.22.20", "@babel/helper-environment-visitor@^7.22.5":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
   integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
@@ -663,7 +648,7 @@
   dependencies:
     "@babel/types" "^7.22.3"
 
-"@babel/helper-member-expression-to-functions@^7.22.15", "@babel/helper-member-expression-to-functions@^7.23.0":
+"@babel/helper-member-expression-to-functions@^7.22.15":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
   integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
@@ -872,7 +857,7 @@
     "@babel/traverse" "^7.22.1"
     "@babel/types" "^7.22.0"
 
-"@babel/helper-replace-supers@^7.22.20":
+"@babel/helper-replace-supers@^7.22.20", "@babel/helper-replace-supers@^7.22.9":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
   integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
@@ -1030,7 +1015,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
 
-"@babel/helper-validator-option@^7.22.15", "@babel/helper-validator-option@^7.23.5":
+"@babel/helper-validator-option@^7.22.15":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
   integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
@@ -6480,7 +6465,7 @@ browserslist@^4.21.3:
     node-releases "^2.0.8"
     update-browserslist-db "^1.0.10"
 
-browserslist@^4.22.2:
+browserslist@^4.21.9, browserslist@^4.22.1:
   version "4.22.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.2.tgz#704c4943072bd81ea18997f3bd2180e89c77874b"
   integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==