@patternfly/react-core 6.0.0-alpha.12 → 6.0.0-alpha.14

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.

package/src/components/EmptyState/examples/EmptyStateSpinner.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { EmptyState, EmptyStateHeader, EmptyStateIcon, Spinner } from '@patternfly/react-core';
+import { EmptyState, Spinner } from '@patternfly/react-core';
 
 export const EmptyStateSpinner: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader titleText="Loading" headingLevel="h4" icon={<EmptyStateIcon icon={Spinner} />} />
-  </EmptyState>
+  <EmptyState titleText="Loading" headingLevel="h4" icon={Spinner} />
 );

package/src/components/EmptyState/examples/EmptyStateWithStatus.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateActions,
+  EmptyStateStatus,
+  Button
+} from '@patternfly/react-core';
+
+export const EmptyStateWithStatus: React.FunctionComponent = () => {
+  const [status, setStatus] = React.useState<EmptyStateStatus>(EmptyStateStatus.success);
+
+  const toggleStatus = () => {
+    interface StatusToggleMap {
+      [status: string]: EmptyStateStatus;
+    }
+
+    const statusToggleMap: StatusToggleMap = {
+      success: EmptyStateStatus.danger,
+      danger: EmptyStateStatus.warning,
+      warning: EmptyStateStatus.info,
+      info: EmptyStateStatus.custom,
+      custom: EmptyStateStatus.success
+    };
+
+    setStatus((prevStatus: EmptyStateStatus) => statusToggleMap[prevStatus]);
+  };
+
+  const titleMap = {
+    success: "You're all set",
+    danger: "You're not set",
+    warning: "You're probably not set",
+    info: 'You might be set',
+    custom: "You're custom"
+  };
+
+  return (
+    <EmptyState status={status} titleText={titleMap[status]} headingLevel="h4">
+      <EmptyStateBody>
+        This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible
+        enough to meet a variety of needs.
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="primary" onClick={toggleStatus}>
+            Toggle status
+          </Button>
+        </EmptyStateActions>
+        <EmptyStateActions>
+          <Button variant="link">Multiple</Button>
+          <Button variant="link">Action Buttons</Button>
+          <Button variant="link">Can</Button>
+          <Button variant="link">Go here</Button>
+          <Button variant="link">In the secondary</Button>
+          <Button variant="link">Action area</Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
   EmptyStateFooter,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -16,7 +15,6 @@ import {
   NotificationDrawerListItemHeader,
   EmptyStateVariant,
   EmptyStateActions,
-  EmptyStateIcon,
   Dropdown,
   DropdownList,
   DropdownItem,
@@ -377,12 +375,12 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
             truncateTitle={1}
           >
             <NotificationDrawerList isHidden={!thirdGroupExpanded} aria-label="Notifications in the third group">
-              <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateHeader
-                  headingLevel="h2"
-                  titleText="No alerts found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No alerts found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.full}
+              >
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.

package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx

@@ -4,7 +4,6 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateFooter,
-  EmptyStateHeader,
   EmptyStateVariant,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -15,8 +14,7 @@ import {
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
-  EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
@@ -173,12 +171,12 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => {
               isHidden={!thirdGroupExpanded}
               aria-label="Notifications in the third lightweight group"
             >
-              <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateHeader
-                  headingLevel="h2"
-                  titleText="No alerts found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No alerts found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.full}
+              >
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.

package/src/components/Panel/Panel.tsx

@@ -8,7 +8,7 @@ export interface PanelProps extends React.HTMLProps<HTMLDivElement> {
   /** Class to add to outer div */
   className?: string;
   /** Adds panel variant styles */
-  variant?: 'raised' | 'bordered';
+  variant?: 'raised' | 'bordered' | 'secondary';
   /** Flag to add scrollable styling to the panel */
   isScrollable?: boolean;
   /** @hide Forwarded ref */
@@ -26,8 +26,7 @@ const PanelBase: React.FunctionComponent<PanelProps> = ({
   <div
     className={css(
       styles.panel,
-      variant === 'raised' && styles.modifiers.raised,
-      variant === 'bordered' && styles.modifiers.bordered,
+      variant && styles.modifiers[variant],
       isScrollable && styles.modifiers.scrollable,
       className
     )}

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

@@ -46,6 +46,11 @@ test(`Renders with class name ${styles.modifiers.bordered} when variant is borde
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.bordered);
 });
 
+test(`Renders with class name ${styles.modifiers.secondary} when variant is secondary`, () => {
+  render(<Panel variant="secondary">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.secondary);
+});
+
 test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable is true`, () => {
   render(<Panel isScrollable>Test</Panel>);
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);

package/src/components/Panel/examples/Panel.md

@@ -116,6 +116,21 @@ const BorderedPanel = () => (
 );
 ```
 
+### Secondary variant
+
+```js
+import React from 'react';
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const PanelSecondaryVariant = () => (
+  <Panel variant="secondary">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
+```
+
 ### Scrollable
 
 ```js

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -4,11 +4,9 @@ import {
   Button,
   Alert,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Form,
   FormGroup,
@@ -47,12 +45,12 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>

package/src/components/Wizard/examples/WizardWithSubmitProgress.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Button,
   Wizard,
@@ -37,12 +35,12 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>

package/src/demos/CardView/examples/CardView.tsx

@@ -12,8 +12,6 @@ import {
   DropdownItem,
   DropdownList,
   EmptyState,
-  EmptyStateHeader,
-  EmptyStateIcon,
   EmptyStateFooter,
   EmptyStateVariant,
   EmptyStateActions,
@@ -484,12 +482,12 @@ export const CardViewBasic: React.FunctionComponent = () => {
           <Gallery hasGutter aria-label="Selectable card container">
             <Card isCompact>
               <Bullseye>
-                <EmptyState variant={EmptyStateVariant.xs}>
-                  <EmptyStateHeader
-                    headingLevel="h2"
-                    titleText="Add a new card to your page"
-                    icon={<EmptyStateIcon icon={PlusCircleIcon} />}
-                  />
+                <EmptyState
+                  headingLevel="h2"
+                  titleText="Add a new card to your page"
+                  icon={PlusCircleIcon}
+                  variant={EmptyStateVariant.xs}
+                >
                   <EmptyStateFooter>
                     <EmptyStateActions>
                       <Button variant="link">Add card</Button>

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -13,7 +13,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -22,8 +21,7 @@ import {
   ToolbarGroup,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -625,8 +623,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -12,7 +12,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -21,7 +20,6 @@ import {
   ToolbarFilter,
   ToolbarToggleGroup,
   MenuGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -442,8 +440,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -12,7 +12,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -20,7 +19,6 @@ import {
   Badge,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -492,8 +490,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -12,13 +12,11 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -465,8 +463,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -13,12 +13,10 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -274,8 +272,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -13,8 +13,6 @@ import {
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
   MenuToggle,
@@ -505,12 +503,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
           </NotificationDrawerList>
         )}
         {!shouldShowNotifications && (
-          <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateHeader
-              headingLevel="h2"
-              titleText="No alerts found"
-              icon={<EmptyStateIcon icon={SearchIcon} />}
-            />
+          <EmptyState headingLevel="h2" titleText="No alerts found" icon={SearchIcon} variant={EmptyStateVariant.full}>
             <EmptyStateBody>
               There are currently no alerts. There may be silenced critical alerts however.
             </EmptyStateBody>

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -13,8 +13,6 @@ import {
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
   MenuToggle,
@@ -723,12 +721,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               onExpand={toggleThirdDrawer}
             >
               <NotificationDrawerList isHidden={!thirdDrawerGroupExpanded}>
-                <EmptyState variant={EmptyStateVariant.full}>
-                  <EmptyStateHeader
-                    headingLevel="h2"
-                    titleText="No alerts found"
-                    icon={<EmptyStateIcon icon={SearchIcon} />}
-                  />
+                <EmptyState
+                  headingLevel="h2"
+                  titleText="No alerts found"
+                  icon={SearchIcon}
+                  variant={EmptyStateVariant.full}
+                >
                   <EmptyStateBody>
                     There are currently no critical alerts firing. There may be firing alerts of other severities or
                     silenced critical alerts however.
@@ -744,12 +742,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
           </NotificationDrawerGroupList>
         )}
         {!shouldShowNotifications && (
-          <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateHeader
-              headingLevel="h2"
-              titleText="No alerts found"
-              icon={<EmptyStateIcon icon={SearchIcon} />}
-            />
+          <EmptyState headingLevel="h2" titleText="No alerts found" icon={SearchIcon} variant={EmptyStateVariant.full}>
             <EmptyStateBody>
               There are currently no alerts. There may be silenced critical alerts however.
             </EmptyStateBody>

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -3,8 +3,6 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
   NotificationBadge,
   NotificationBadgeVariant,
   NotificationDrawer,
@@ -297,12 +295,12 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           </NotificationDrawerList>
         )}
         {notifications.length === 0 && (
-          <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateHeader
-              headingLevel="h2"
-              titleText="No notifications found"
-              icon={<EmptyStateIcon icon={SearchIcon} />}
-            />
+          <EmptyState
+            headingLevel="h2"
+            titleText="No notifications found"
+            icon={SearchIcon}
+            variant={EmptyStateVariant.full}
+          >
             <EmptyStateBody>There are currently no notifications.</EmptyStateBody>
           </EmptyState>
         )}

package/src/deprecated/components/Wizard/examples/WizardFinished.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Button
 } from '@patternfly/react-core';
@@ -43,12 +41,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>