@patternfly/react-core 5.0.0-alpha.31 → 5.0.0-alpha.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.31",
+  "version": "5.0.0-alpha.33",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "b9c5ca0b920459127f1e719050e25c957ab3a21b"
+  "gitHead": "5d285a4ff66639a3bd8fcc4ecb1677c3847985a6"
 }

package/src/components/Alert/Alert.tsx

@@ -55,8 +55,6 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   timeoutAnimation?: number;
   /** Title of the alert.  */
   title: React.ReactNode;
-  /** @deprecated Sets the heading level to use for the alert title. Default is h4. */
-  titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /** Sets the element to use as the alert title. Default is h4. */
   component?: keyof JSX.IntrinsicElements;
   /** Adds accessible text to the alert toggle. */
@@ -98,7 +96,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   actionClose,
   actionLinks,
   title,
-  titleHeadingLevel,
   component = 'h4',
   children = '',
   className = '',
@@ -126,13 +123,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   );
 
   const titleRef = React.useRef(null);
-  const TitleComponent = (titleHeadingLevel || component) as any;
-  if (titleHeadingLevel !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Alert: titleHeadingLevel is deprecated, please use the newer component prop instead to set the alert title element.'
-    );
-  }
+  const TitleComponent = component as any;
 
   const divRef = React.useRef<HTMLDivElement>();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);

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

@@ -179,9 +179,9 @@ test('Renders the title as an h4 by default', () => {
   expect(screen.getByRole('heading', { level: 4, name: 'Default alert: Some title' })).toBeVisible();
 });
 
-test('Renders the title as other heading levels when one is passed using titleHeadingLevel', () => {
+test('Renders the title as other heading levels when one is passed using component', () => {
   render(
-    <Alert title="Some title" titleHeadingLevel="h1">
+    <Alert title="Some title" component="h1">
       Some alert
     </Alert>
   );

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

@@ -9,12 +9,13 @@ import {
   DualListSelectorControlsWrapper,
   DualListSelectorControl,
   SearchInput,
-  Title,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStatePrimary
+  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';
@@ -68,11 +69,11 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
   // callback for moving all options between lists
   const moveAll = (fromAvailable: boolean) => {
     if (fromAvailable) {
-      setChosenOptions([...availableOptions.filter(option => option.isVisible), ...chosenOptions]);
-      setAvailableOptions([...availableOptions.filter(option => !option.isVisible)]);
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
     } else {
-      setAvailableOptions([...chosenOptions.filter(option => option.isVisible), ...availableOptions]);
-      setChosenOptions([...chosenOptions.filter(option => !option.isVisible)]);
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
     }
   };
 
@@ -96,7 +97,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
   const onFilterChange = (value: string, isAvailable: boolean) => {
     isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
     const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
-    toFilter.forEach(option => {
+    toFilter.forEach((option) => {
       option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
     });
   };
@@ -138,17 +139,16 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
   };
 
   const buildEmptyState = (isAvailable: boolean) => (
-    <EmptyState variant={EmptyStateVariant.small}>
-      <EmptyStateIcon icon={SearchIcon} />
-      <Title headingLevel="h4" size="md">
-        No results found
-      </Title>
+    <EmptyState variant={EmptyStateVariant.sm}>
+      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-      <EmptyStatePrimary>
-        <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
-          Clear all filters
-        </Button>
-      </EmptyStatePrimary>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 
@@ -156,17 +156,17 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     <DualListSelector>
       <DualListSelectorPane
         title="Available"
-        status={`${availableOptions.filter(option => option.selected && option.isVisible).length} of ${
-          availableOptions.filter(option => option.isVisible).length
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
         } options selected`}
         searchInput={buildSearchInput(true)}
         actions={[buildSort(true)]}
         listMinHeight="300px"
       >
         {availableFilter !== '' &&
-          availableOptions.filter(option => option.isVisible).length === 0 &&
+          availableOptions.filter((option) => option.isVisible).length === 0 &&
           buildEmptyState(true)}
-        {availableOptions.filter(option => option.isVisible).length > 0 && (
+        {availableOptions.filter((option) => option.isVisible).length > 0 && (
           <DualListSelectorList>
             {availableOptions.map((option, index) =>
               option.isVisible ? (
@@ -174,7 +174,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
                   key={index}
                   isSelected={option.selected}
                   id={`composable-available-option-${index}`}
-                  onOptionSelect={e => onOptionSelect(e, index, false)}
+                  onOptionSelect={(e) => onOptionSelect(e, index, false)}
                 >
                   {option.text}
                 </DualListSelectorListItem>
@@ -185,7 +185,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
       </DualListSelectorPane>
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl
-          isDisabled={!availableOptions.some(option => option.selected)}
+          isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
           tooltipContent="Add selected"
@@ -210,7 +210,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         </DualListSelectorControl>
         <DualListSelectorControl
           onClick={() => moveSelected(false)}
-          isDisabled={!chosenOptions.some(option => option.selected)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
           tooltipContent="Remove selected"
         >
@@ -219,16 +219,18 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
       </DualListSelectorControlsWrapper>
       <DualListSelectorPane
         title="Chosen"
-        status={`${chosenOptions.filter(option => option.selected && option.isVisible).length} of ${
-          chosenOptions.filter(option => option.isVisible).length
+        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          chosenOptions.filter((option) => option.isVisible).length
         } options selected`}
         searchInput={buildSearchInput(false)}
         actions={[buildSort(false)]}
         isChosen
         listMinHeight="300px"
       >
-        {chosenFilter !== '' && chosenOptions.filter(option => option.isVisible).length === 0 && buildEmptyState(false)}
-        {chosenOptions.filter(option => option.isVisible).length > 0 && (
+        {chosenFilter !== '' &&
+          chosenOptions.filter((option) => option.isVisible).length === 0 &&
+          buildEmptyState(false)}
+        {chosenOptions.filter((option) => option.isVisible).length > 0 && (
           <DualListSelectorList>
             {chosenOptions.map((option, index) =>
               option.isVisible ? (
@@ -236,7 +238,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
                   key={index}
                   isSelected={option.selected}
                   id={`composable-chosen-option-${index}`}
-                  onOptionSelect={e => onOptionSelect(e, index, true)}
+                  onOptionSelect={(e) => onOptionSelect(e, index, true)}
                 >
                   {option.text}
                 </DualListSelectorListItem>

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

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

package/src/components/EmptyState/EmptyState.tsx

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

package/src/components/EmptyState/EmptyStateActions.tsx

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

package/src/components/EmptyState/EmptyStateBody.tsx

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

package/src/components/EmptyState/EmptyStateFooter.tsx

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

package/src/components/EmptyState/EmptyStateHeader.tsx

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

package/src/components/EmptyState/EmptyStateIcon.tsx

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