@patternfly/react-core 6.0.0-alpha.13 → 6.0.0-alpha.15

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.12","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.14","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.12","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.14","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.12","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.14","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.13",
+  "version": "6.0.0-alpha.15",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e6f09685eb6c15fefc55ed24c64cafc4213d7902"
+  "gitHead": "74a4f022d0cfc230145b0d6d7a3a11c65488353c"
 }

package/src/components/Avatar/Avatar.tsx

@@ -4,23 +4,31 @@ import { css } from '@patternfly/react-styles';
 
 export interface AvatarProps
   extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
-  /** Additional classes added to the Avatar. */
+  /** Additional classes added to the avatar. */
   className?: string;
-  /** Attribute that specifies the URL of the image for the Avatar. */
+  /** Attribute that specifies the URL of the image for the avatar. */
   src?: string;
-  /** Attribute that specifies the alternate text of the image for the Avatar. */
+  /** Attribute that specifies the alternate text of the image for the avatar. */
   alt: string;
+  /** Flag to indicate the avatar should have a border. */
+  isBordered?: boolean;
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export const Avatar: React.FunctionComponent<AvatarProps> = ({
-  className = '',
+  className,
   src = '',
   alt,
+  isBordered,
   size,
   ...props
 }: AvatarProps) => (
-  <img src={src} alt={alt} className={css(styles.avatar, styles.modifiers[size], className)} {...props} />
+  <img
+    src={src}
+    alt={alt}
+    className={css(styles.avatar, styles.modifiers[size], isBordered && styles.modifiers.bordered, className)}
+    {...props}
+  />
 );
 Avatar.displayName = 'Avatar';

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

@@ -12,22 +12,14 @@ test('Renders simple avatar', () => {
   expect(screen.getByTestId('avatar').firstChild).toBeVisible();
 });
 
-// TODO: Need to be updated as part of issue #9880
-test('Renders without any modifier class when border and size props are not passed', () => {
+test('Renders without any modifier class when isBordered and size props are not passed', () => {
   render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass(styles.avatar, { exact: true });
 });
 
-// TODO: Need to be updated/removed as part of issue #9880
-xtest('Renders with class name pf-m-light when "light" is passed as border prop', () => {
-  render(<Avatar alt="avatar" />);
-  expect(screen.getByRole('img')).toHaveClass('pf-m-light');
-});
-
-// TODO: Need to be updated/removed as part of issue #9880
-xtest('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
-  render(<Avatar alt="avatar" />);
-  expect(screen.getByRole('img')).toHaveClass('pf-m-dark');
+test('Renders with class name pf-m-bordered when isBordered is passed', () => {
+  render(<Avatar alt="avatar" isBordered />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-bordered');
 });
 
 test('Renders with class name pf-m-xl when "xl" is passed as size prop', () => {

package/src/components/Avatar/examples/Avatar.md

@@ -6,65 +6,20 @@ propComponents: ['Avatar']
 ---
 
 import avatarImg from '../../assets/avatarImg.svg';
-import avatarImgDark from '../../assets/avatarImgDark.svg';
-import './example.css';
 
 ## Examples
 
 ### Basic
 
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
-
-<Avatar src={avatarImg} alt="avatar" />;
-```
-
-### Size variations
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
-
-<React.Fragment>
-  Small
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="sm" />
-  <br />
-  Medium
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="md" />
-  <br />
-  Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="lg" />
-  <br />
-  Extra Large
-  <br />
-  <Avatar src={avatarImg} alt="avatar" size="xl" />
-</React.Fragment>;
+```ts file="./AvatarBasic.tsx"
 ```
 
-### Bordered - light
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../assets/avatarImg.svg';
+### Bordered 
 
-// TODO: Need to be updated/removed as part of issue #9880
-<Avatar src={avatarImg} alt="avatar" />;
+```ts file="./AvatarBordered.tsx"
 ```
 
-### Bordered - dark
-
-```ts
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import avatarImgDark from '../../assets/avatarImgDark.svg';
+### Size variations
 
-// TODO: Need to be updated/removed as part of issue #9880
-<Avatar src={avatarImgDark} alt="avatar" />;
+```ts file="./AvatarSizeVariations.tsx"
 ```

package/src/components/Avatar/examples/AvatarBasic.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<Avatar src={avatarImg} alt="avatar" />;

package/src/components/Avatar/examples/AvatarBordered.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<Avatar src={avatarImg} alt="avatar" isBordered />;

package/src/components/Avatar/examples/AvatarSizeVariations.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from '../../assets/avatarImg.svg';
+
+<React.Fragment>
+  Small
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="sm" />
+  <br />
+  Medium
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="md" />
+  <br />
+  Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="lg" />
+  <br />
+  Extra Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="xl" />
+</React.Fragment>;

package/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>

package/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>

package/src/components/EmptyState/EmptyState.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
+import { EmptyStateHeader } from './EmptyStateHeader';
+import { statusIcons } from '../../helpers';
 
 export enum EmptyStateVariant {
   'xs' = 'xs',
@@ -10,15 +12,35 @@ export enum EmptyStateVariant {
   full = 'full'
 }
 
+export enum EmptyStateStatus {
+  danger = 'danger',
+  warning = 'warning',
+  success = 'success',
+  info = 'info',
+  custom = 'custom'
+}
+
 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';
   /** 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?: 'danger' | 'warning' | 'success' | 'info' | 'custom';
+  /** Additional class names to apply to the empty state header */
+  headerClassName?: 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. Can also be a spinner component */
+  icon?: React.ComponentType<any>;
+  /** The heading level to use, default is h1 */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export const EmptyState: React.FunctionComponent<EmptyStateProps> = ({
@@ -26,21 +48,39 @@ export const EmptyState: React.FunctionComponent<EmptyStateProps> = ({
   className,
   variant = EmptyStateVariant.full,
   isFullHeight,
+  status,
+  icon: customIcon,
+  titleText,
+  titleClassName,
+  headerClassName,
+  headingLevel,
   ...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 !== 'full' && styles.modifiers[variant],
+        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}
+        />
+        {children}
+      </div>
+    </div>
+  );
+};
 EmptyState.displayName = 'EmptyState';

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -1,42 +1,44 @@
 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 } from './EmptyStateIcon';
+
+export enum EmptyStateHeadingLevel {
+  h1 = 'h1',
+  h2 = 'h2',
+  h3 = 'h3',
+  h4 = 'h4',
+  h5 = 'h5',
+  h6 = '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>;
   /** 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,
+  headingLevel: HeadingLevel = EmptyStateHeadingLevel.h1,
+  icon: Icon,
   ...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} />}
+    <div className={css(`${styles.emptyState}__title`)}>
+      <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
+    </div>
   </div>
 );
+
 EmptyStateHeader.displayName = 'EmptyStateHeader';

package/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>
   );

package/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');

package/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}
     />

package/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

package/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>
 `;

package/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"
-```

package/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.