@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

package/src/components/Drawer/examples/DrawerSecondaryBackground.tsx

@@ -46,10 +46,10 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
   };
 
   const panelContent = (
-    <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+    <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
@@ -92,11 +92,11 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
         Toggle drawer
       </Button>
       <Drawer isExpanded={isExpanded} onExpand={onExpand}>
-        <DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+        <DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}>
           drawer-section
         </DrawerSection>
         <DrawerContent
-          colorVariant={contentSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}
+          colorVariant={contentSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>

package/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx

@@ -32,15 +32,14 @@ export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <Title headingLevel="h3" size="2xl" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer title{' '}
+          Drawer panel header in a Title
         </Title>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>
-        drawer-panel
       </DrawerHead>
-      <DrawerPanelBody hasNoPadding>drawer-panel with no padding</DrawerPanelBody>
-      <DrawerPanelBody>drawer-panel</DrawerPanelBody>
+      <DrawerPanelBody hasNoPadding>Drawer panel body with no padding</DrawerPanelBody>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
     </DrawerPanelContent>
   );
 

package/src/components/Drawer/examples/DrawerStatic.tsx

@@ -31,7 +31,7 @@ export const DrawerStatic: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

package/src/components/Drawer/index.ts

@@ -3,6 +3,7 @@ export * from './DrawerActions';
 export * from './DrawerCloseButton';
 export * from './DrawerContent';
 export * from './DrawerContentBody';
+export * from './DrawerPanelDescription';
 export * from './DrawerHead';
 export * from './DrawerPanelBody';
 export * from './DrawerPanelContent';

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -87,6 +87,8 @@ The dual list selector can also be built in a composable manner to make customiz
 
 ### Composable with drag and drop
 
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-next-demos).
+
 This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
 
 - wrap the `DualListSelectorPane` in a `DragDrop` component
@@ -99,7 +101,7 @@ This example only allows reordering the contents of the "chosen" pane with drag
   - define an `onDrag` callback which ensures that the drag event will not cross hairs with the `onOptionSelect` click
     event set on the option. Note: the `ignoreNextOptionSelect` state value is used to prevent selection while dragging.
 
-Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
+Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
 
 ```ts file="DualListSelectorComposableDragDrop.tsx"
 

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/DualListSelector/index.ts

@@ -1,7 +1,9 @@
 export * from './DualListSelector';
+export * from './DualListSelectorContext';
 export * from './DualListSelectorControl';
 export * from './DualListSelectorControlsWrapper';
 export * from './DualListSelectorPane';
 export * from './DualListSelectorList';
 export * from './DualListSelectorListItem';
 export * from './DualListSelectorTree';
+export * from './DualListSelectorContext';

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.

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

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

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

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

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