@patternfly/react-core 5.0.0-alpha.4 → 5.0.0-alpha.41

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

@@ -8,13 +8,21 @@ import {
   DualListSelectorListItem,
   DualListSelectorControlsWrapper,
   DualListSelectorControl,
-  SearchInput
+  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';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Option {
   text: string;
@@ -61,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)]);
     }
   };
 
@@ -86,25 +94,23 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     }
   };
 
-  // builds a search input - used in each dual list selector pane
-  const buildSearchInput = (isAvailable: boolean) => {
-    const onChange = (value: string) => {
-      isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
-      const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
-      toFilter.forEach(option => {
-        option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
-      });
-    };
-
-    return (
-      <SearchInput
-        value={isAvailable ? availableFilter : chosenFilter}
-        onChange={onChange}
-        onClear={() => onChange('')}
-      />
-    );
+  const onFilterChange = (value: string, isAvailable: boolean) => {
+    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+    toFilter.forEach((option) => {
+      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+    });
   };
 
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => (
+    <SearchInput
+      value={isAvailable ? availableFilter : chosenFilter}
+      onChange={(_event, value) => onFilterChange(value, isAvailable)}
+      onClear={() => onFilterChange('', isAvailable)}
+    />
+  );
+
   // builds a sort control - passed to both dual list selector panes
   const buildSort = (isAvailable: boolean) => {
     const onSort = () => {
@@ -132,34 +138,54 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     );
   };
 
+  const buildEmptyState = (isAvailable: boolean) => (
+    <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>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+
   return (
     <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"
       >
-        <DualListSelectorList>
-          {availableOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-available-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {availableFilter !== '' &&
+          availableOptions.filter((option) => option.isVisible).length === 0 &&
+          buildEmptyState(true)}
+        {availableOptions.filter((option) => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {availableOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-available-option-${index}`}
+                  onOptionSelect={(e) => onOptionSelect(e, index, false)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </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"
@@ -184,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"
         >
@@ -193,27 +219,33 @@ 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"
       >
-        <DualListSelectorList>
-          {chosenOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-chosen-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, true)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {chosenFilter !== '' &&
+          chosenOptions.filter((option) => option.isVisible).length === 0 &&
+          buildEmptyState(false)}
+        {chosenOptions.filter((option) => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {chosenOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-chosen-option-${index}`}
+                  onOptionSelect={(e) => onOptionSelect(e, index, true)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     </DualListSelector>
   );

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

@@ -7,12 +7,21 @@ import {
   DualListSelectorControl,
   DualListSelectorTree,
   DualListSelectorTreeItemData,
-  SearchInput
+  SearchInput,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateBody,
+  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';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface FoodNode {
   id: string;
@@ -40,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) };
       });
     }
@@ -53,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;
@@ -66,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) };
       });
@@ -79,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)];
@@ -93,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))]
     );
   };
 
@@ -117,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) => {
@@ -140,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)
@@ -150,18 +159,22 @@ 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 value={isChosen ? chosenFilter : availableFilter} onChange={onChange} onClear={() => onChange('')} />
+      <SearchInput
+        value={isChosen ? chosenFilter : availableFilter}
+        onChange={(_event, value) => onChange(value)}
+        onClear={() => onChange('')}
+      />
     );
   };
 
@@ -180,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:
@@ -231,23 +244,44 @@ 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`;
+    const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';
     return (
       <DualListSelectorPane
         title={isChosen ? 'Chosen' : 'Available'}
         status={status}
         searchInput={buildSearchInput(isChosen)}
         isChosen={isChosen}
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          <DualListSelectorTree
-            data={options}
-            onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
-          />
-        </DualListSelectorList>
+        {filterApplied && options.length === 0 && (
+          <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>
+            <EmptyStateFooter>
+              <EmptyStateActions>
+                <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
+                  Clear all filters
+                </Button>
+              </EmptyStateActions>
+            </EmptyStateFooter>
+          </EmptyState>
+        )}
+        {options.length > 0 && (
+          <DualListSelectorList>
+            <DualListSelectorTree
+              data={options}
+              onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
+            />
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     );
   };
@@ -257,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"
         >
@@ -279,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>
   );
 };