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

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

@@ -1,33 +1,35 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateExtraLarge: React.FunctionComponent = () => (
   <EmptyState variant={EmptyStateVariant.xl}>
-    <EmptyStateIcon icon={CubesIcon} />
-    <Title headingLevel="h5" size="4xl">
-      Empty state
-    </Title>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <EmptyStateBody>
-      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-      enough to meet a variety of needs.
+      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>
-    <Button variant="primary">Primary action</Button>
-    <EmptyStateSecondaryActions>
-      <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>
-    </EmptyStateSecondaryActions>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</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/EmptyState/examples/EmptyStateExtraSmall.tsx

@@ -1,29 +1,30 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter
 } from '@patternfly/react-core';
 
 export const EmptyStateExtraSmall: React.FunctionComponent = () => (
   <EmptyState variant={EmptyStateVariant.xs}>
-    <Title headingLevel="h4" size="md">
-      Empty state
-    </Title>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" />
     <EmptyStateBody>
-      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-      enough to meet a variety of needs.
+      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>
-    <EmptyStateSecondaryActions>
-      <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>
-    </EmptyStateSecondaryActions>
+    <EmptyStateFooter>
+      <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/EmptyState/examples/EmptyStateLarge.tsx

@@ -1,33 +1,35 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.large}>
-    <EmptyStateIcon icon={CubesIcon} />
-    <Title headingLevel="h4" size="lg">
-      Empty state
-    </Title>
+  <EmptyState variant={EmptyStateVariant.lg}>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <EmptyStateBody>
-      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-      enough to meet a variety of needs.
+      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>
-    <Button variant="primary">Primary action</Button>
-    <EmptyStateSecondaryActions>
-      <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>
-    </EmptyStateSecondaryActions>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</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/EmptyState/examples/EmptyStateNoMatchFound.tsx

@@ -1,16 +1,23 @@
 import React from 'react';
-import { Title, Button, EmptyState, EmptyStatePrimary, EmptyStateIcon, EmptyStateBody } from '@patternfly/react-core';
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateActions,
+  EmptyStateIcon
+} from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const EmptyStateNoMatchFound: React.FunctionComponent = () => (
   <EmptyState>
-    <EmptyStateIcon icon={SearchIcon} />
-    <Title size="lg" headingLevel="h4">
-      No results found
-    </Title>
+    <EmptyStateHeader titleText="No results found" headingLevel="h4" icon={<EmptyStateIcon icon={SearchIcon} />} />
     <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-    <EmptyStatePrimary>
-      <Button variant="link">Clear all filters</Button>
-    </EmptyStatePrimary>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="link">Clear all filters</Button>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

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

@@ -1,33 +1,35 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.small}>
-    <EmptyStateIcon icon={CubesIcon} />
-    <Title headingLevel="h4" size="lg">
-      Empty state
-    </Title>
+  <EmptyState variant={EmptyStateVariant.sm}>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <EmptyStateBody>
-      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-      enough to meet a variety of needs.
+      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>
-    <Button variant="primary">Primary action</Button>
-    <EmptyStateSecondaryActions>
-      <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>
-    </EmptyStateSecondaryActions>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</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/EmptyState/examples/EmptyStateSpinner.tsx

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

package/src/components/EmptyState/index.ts

@@ -1,5 +1,6 @@
 export * from './EmptyState';
-export * from './EmptyStateBody';
+export * from './EmptyStateHeader';
 export * from './EmptyStateIcon';
-export * from './EmptyStateSecondaryActions';
-export * from './EmptyStatePrimary';
+export * from './EmptyStateBody';
+export * from './EmptyStateFooter';
+export * from './EmptyStateActions';

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

@@ -8,8 +8,8 @@ import {
   DropdownSeparator,
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStatePrimary,
+  EmptyStateHeader,
+  EmptyStateFooter,
   KebabToggle,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -20,8 +20,9 @@ import {
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
-  Title,
-  EmptyStateVariant
+  EmptyStateVariant,
+  EmptyStateActions,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
@@ -319,17 +320,20 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
           >
             <NotificationDrawerList isHidden={!thirdGroupExpanded} aria-label="Notifications in the third group">
               <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateIcon icon={SearchIcon} />
-                <Title headingLevel="h2" size="lg">
-                  No alerts found
-                </Title>
+                <EmptyStateHeader
+                  headingLevel="h2"
+                  titleText="No alerts found"
+                  icon={<EmptyStateIcon icon={SearchIcon} />}
+                />
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.
                 </EmptyStateBody>
-                <EmptyStatePrimary>
-                  <Button variant="link">Action</Button>
-                </EmptyStatePrimary>
+                <EmptyStateFooter>
+                  <EmptyStateActions>
+                    <Button variant="link">Action</Button>
+                  </EmptyStateActions>
+                </EmptyStateFooter>
               </EmptyState>
             </NotificationDrawerList>
           </NotificationDrawerGroup>

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

@@ -3,8 +3,8 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStatePrimary,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateVariant,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -15,7 +15,8 @@ import {
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
-  Title
+  EmptyStateActions,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
@@ -173,17 +174,20 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => {
               aria-label="Notifications in the third lightweight group"
             >
               <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateIcon icon={SearchIcon} />
-                <Title headingLevel="h2" size="lg">
-                  No alerts found
-                </Title>
+                <EmptyStateHeader
+                  headingLevel="h2"
+                  titleText="No alerts found"
+                  icon={<EmptyStateIcon icon={SearchIcon} />}
+                />
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.
                 </EmptyStateBody>
-                <EmptyStatePrimary>
-                  <Button variant="link">Action</Button>
-                </EmptyStatePrimary>
+                <EmptyStateFooter>
+                  <EmptyStateActions>
+                    <Button variant="link">Action</Button>
+                  </EmptyStateActions>
+                </EmptyStateFooter>
               </EmptyState>
             </NotificationDrawerList>
           </NotificationDrawerGroup>

package/src/components/Wizard/examples/Wizard.md

@@ -8,7 +8,7 @@ ouia: true
 ---
 
 import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
-DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
+DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateHeader, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStateSecondaryActions,
-  Title,
+  EmptyStateActions,
+  EmptyStateIcon,
   Progress,
   Button,
   Wizard
@@ -20,7 +21,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   const [percent, setPercent] = React.useState(0);
 
   const tick = () => {
-    setPercent(prevPercent => {
+    setPercent((prevPercent) => {
       if (prevPercent < 100) {
         return prevPercent + 20;
       } else {
@@ -41,11 +42,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className="pf-l-bullseye">
-      <EmptyState variant="large">
-        <EmptyStateIcon icon={CogsIcon} />
-        <Title headingLevel="h4" size="lg">
-          {percent === 100 ? 'Validation complete' : 'Validating credentials'}
-        </Title>
+      <EmptyState variant="lg">
+        <EmptyStateHeader
+          headingLevel="h4"
+          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+          icon={<EmptyStateIcon icon={CogsIcon} />}
+        />
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>
@@ -53,11 +55,13 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
           Description can be used to further elaborate on the validation step, or give the user a better idea of how
           long the process will take.
         </EmptyStateBody>
-        <EmptyStateSecondaryActions>
-          <Button isDisabled={percent !== 100} onClick={props.onClose}>
-            Log to console
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button isDisabled={percent !== 100} onClick={props.onClose}>
+              Log to console
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     </div>
   );

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStateSecondaryActions,
-  Title,
+  EmptyStateActions,
   Form,
   FormGroup,
   TextInput,
@@ -13,7 +13,8 @@ import {
   Wizard,
   WizardFooter,
   WizardContextConsumer,
-  Alert
+  Alert,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
@@ -26,7 +27,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   const [percent, setPercent] = React.useState(0);
 
   const tick = () => {
-    setPercent(prevPercent => {
+    setPercent((prevPercent) => {
       if (prevPercent < 100) {
         return prevPercent + 20;
       } else {
@@ -47,11 +48,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className="pf-l-bullseye">
-      <EmptyState variant="large">
-        <EmptyStateIcon icon={CogsIcon} />
-        <Title headingLevel="h4" size="lg">
-          {percent === 100 ? 'Validation complete' : 'Validating credentials'}
-        </Title>
+      <EmptyState variant="lg">
+        <EmptyStateHeader
+          headingLevel="h4"
+          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+          icon={<EmptyStateIcon icon={CogsIcon} />}
+        />
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>
@@ -59,11 +61,13 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
           Description can be used to further elaborate on the validation step, or give the user a better idea of how
           long the process will take.
         </EmptyStateBody>
-        <EmptyStateSecondaryActions>
-          <Button isDisabled={percent !== 100} onClick={props.onClose}>
-            Log to console
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button isDisabled={percent !== 100} onClick={props.onClose}>
+              Log to console
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     </div>
   );
@@ -126,7 +130,7 @@ export const WizardValidateButtonPress: React.FunctionComponent = () => {
     setFormValue(value);
   };
 
-  const validateLastStep: (onNext: () => void) => void = onNext => {
+  const validateLastStep: (onNext: () => void) => void = (onNext) => {
     if (stepsValid !== 1 && !isFormValid) {
       setErrorText(true);
     } else {

package/src/demos/Card/Card.md

@@ -42,9 +42,11 @@ import {
   DropdownPosition,
   DropdownToggleCheckbox,
   EmptyState,
+  EmptyStateHeader,
   EmptyStateIcon,
+  EmptyStateFooter,
   EmptyStateVariant,
-  EmptyStateSecondaryActions,
+  EmptyStateActions,
   Gallery,
   KebabToggle,
   OverflowMenu,
@@ -605,13 +607,16 @@ class CardViewBasic extends React.Component {
               <Card isCompact>
                 <Bullseye>
                   <EmptyState variant={EmptyStateVariant.xs}>
-                    <EmptyStateIcon icon={PlusCircleIcon} />
-                    <Title headingLevel="h2" size="md">
-                      Add a new card to your page
-                    </Title>
-                    <EmptyStateSecondaryActions>
-                      <Button variant="link">Add card</Button>
-                    </EmptyStateSecondaryActions>
+                    <EmptyStateHeader
+                      headingLevel="h2"
+                      titleText="Add a new card to your page"
+                      icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+                    />
+                    <EmptyStateFooter>
+                      <EmptyStateActions>
+                        <Button variant="link">Add card</Button>
+                      </EmptyStateActions>
+                    </EmptyStateFooter>
                   </EmptyState>
                 </Bullseye>
               </Card>

package/src/demos/Filters/FilterDemos.md

@@ -20,10 +20,12 @@ ToolbarFilter,
 Badge,
 Pagination,
 EmptyState,
+EmptyStateBody,
+EmptyStateHeader,
+EmptyStateFooter,
 EmptyStateIcon,
+EmptyStateActions,
 Title,
-EmptyStateBody,
-EmptyStatePrimary,
 Button,
 Bullseye,
 ToolbarToggleGroup

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

@@ -13,16 +13,17 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateIcon,
-  Title,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStatePrimary,
   Button,
   Bullseye,
   Badge,
   ToolbarGroup,
   ToolbarFilter,
-  ToolbarToggleGroup
+  ToolbarToggleGroup,
+  EmptyStateActions,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -627,23 +628,22 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
 
   const emptyState = (
     <EmptyState>
-      <EmptyStateIcon icon={SearchIcon} />
-      <Title size="lg" headingLevel="h4">
-        No results found
-      </Title>
+      <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={() => {
-            setSearchValue('');
-            setStatusSelection('');
-            setLocationSelections([]);
-          }}
-        >
-          Clear all filters
-        </Button>
-      </EmptyStatePrimary>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button
+            variant="link"
+            onClick={() => {
+              setSearchValue('');
+              setStatusSelection('');
+              setLocationSelections([]);
+            }}
+          >
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );