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

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

@@ -12,16 +12,17 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateIcon,
-  Title,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStatePrimary,
   Button,
   Bullseye,
   Badge,
   ToolbarFilter,
   ToolbarToggleGroup,
-  MenuGroup
+  MenuGroup,
+  EmptyStateIcon,
+  EmptyStateActions
 } 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';
@@ -444,22 +445,21 @@ export const FilterFaceted: 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={() => {
-            setStatusSelections([]);
-            setLocationSelections([]);
-          }}
-        >
-          Clear all filters
-        </Button>
-      </EmptyStatePrimary>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button
+            variant="link"
+            onClick={() => {
+              setStatusSelections([]);
+              setLocationSelections([]);
+            }}
+          >
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 

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

@@ -12,15 +12,16 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateIcon,
-  Title,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStatePrimary,
   Button,
   Bullseye,
   Badge,
   ToolbarFilter,
-  ToolbarToggleGroup
+  ToolbarToggleGroup,
+  EmptyStateIcon,
+  EmptyStateActions
 } 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';
@@ -494,22 +495,21 @@ export const FilterMixedSelectGroup: 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={() => {
-            setStatusSelection('');
-            setLocationSelections([]);
-          }}
-        >
-          Clear all filters
-        </Button>
-      </EmptyStatePrimary>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button
+            variant="link"
+            onClick={() => {
+              setStatusSelection('');
+              setLocationSelections([]);
+            }}
+          >
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 

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

@@ -12,13 +12,14 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateIcon,
-  Title,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStatePrimary,
   Button,
   Bullseye,
-  ToolbarToggleGroup
+  ToolbarToggleGroup,
+  EmptyStateIcon,
+  EmptyStateActions
 } 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';
@@ -467,22 +468,21 @@ export const FilterSameSelectGroup: 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={() => {
-            setStatusSelection('All statuses');
-            setLocationSelection('All locations');
-          }}
-        >
-          Clear all filters
-        </Button>
-      </EmptyStatePrimary>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button
+            variant="link"
+            onClick={() => {
+              setStatusSelection('All statuses');
+              setLocationSelection('All locations');
+            }}
+          >
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 

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

@@ -13,12 +13,13 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateIcon,
-  Title,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStatePrimary,
   Button,
-  Bullseye
+  Bullseye,
+  EmptyStateIcon,
+  EmptyStateActions
 } 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';
@@ -276,21 +277,20 @@ export const FilterSearchInput: 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('');
-          }}
-        >
-          Clear all filters
-        </Button>
-      </EmptyStatePrimary>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button
+            variant="link"
+            onClick={() => {
+              setSearchValue('');
+            }}
+          >
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -38,9 +38,11 @@ import {
   DropdownItem,
   DropdownSeparator,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStatePrimary,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateVariant,
   KebabToggle,
   Nav,
@@ -104,7 +106,7 @@ class BasicNotificationDrawer extends React.Component {
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -116,20 +118,20 @@ class BasicNotificationDrawer extends React.Component {
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
     this.onCloseNotificationDrawer = () => {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         return {
           isDrawerExpanded: !prevState.isDrawerExpanded
         };
@@ -142,14 +144,14 @@ class BasicNotificationDrawer extends React.Component {
       });
     };
 
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isActionsMenuOpen: null
       });
     };
 
-    this.onListItemClick = id => {
-      this.setState(prevState => {
+    this.onListItemClick = (id) => {
+      this.setState((prevState) => {
         if (!prevState.isUnreadMap) return;
         prevState.isUnreadMap[id] = false;
         return {
@@ -172,7 +174,7 @@ class BasicNotificationDrawer extends React.Component {
       });
     };
 
-    this.showNotifications = showNotifications => {
+    this.showNotifications = (showNotifications) => {
       this.setState({
         isUnreadMap: null,
         showNotifications: showNotifications
@@ -503,16 +505,19 @@ class BasicNotificationDrawer extends React.Component {
           )}
           {!showNotifications && (
             <EmptyState variant={EmptyStateVariant.full}>
-              <EmptyStateIcon icon={SearchIcon} />
-              <Title headingLevel="h2" size="lg">
-                No alerts found
-              </Title>
+              <EmptyStateHeader
+                headingLevel="h2"
+                titleText="No results found"
+                icon={<EmptyStateIcon icon={SearchIcon} />}
+              />
               <EmptyStateBody>
                 There are currently no alerts. There may be silenced critical alerts however.
               </EmptyStateBody>
-              <EmptyStatePrimary>
-                <Button variant="link">Action</Button>
-              </EmptyStatePrimary>
+              <EmptyStateFooter>
+                <EmptyStateActions>
+                  <Button variant="link">Action</Button>
+                </EmptyStateActions>
+              </EmptyStateFooter>
             </EmptyState>
           )}
         </NotificationDrawerBody>
@@ -572,9 +577,11 @@ import {
   DropdownItem,
   DropdownSeparator,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStatePrimary,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateVariant,
   KebabToggle,
   Nav,
@@ -650,7 +657,7 @@ class GroupedNotificationDrawer extends React.Component {
       });
     };
 
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -662,20 +669,20 @@ class GroupedNotificationDrawer extends React.Component {
       });
     };
 
-    this.onKebabDropdownSelect = event => {
+    this.onKebabDropdownSelect = (event) => {
       this.setState({
         isKebabDropdownOpen: !this.state.isKebabDropdownOpen
       });
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
     this.onCloseNotificationDrawer = () => {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         return {
           isDrawerExpanded: !prevState.isDrawerExpanded
         };
@@ -688,14 +695,14 @@ class GroupedNotificationDrawer extends React.Component {
       });
     };
 
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isActionsMenuOpen: null
       });
     };
 
     this.onListItemClick = (groupId, id) => {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         if (!prevState.isUnreadMap || !prevState.isUnreadMap[groupId]) return;
         console.log(prevState.isUnreadMap);
         prevState.isUnreadMap[groupId][id] = false;
@@ -710,7 +717,7 @@ class GroupedNotificationDrawer extends React.Component {
       return isUnreadMap && isUnreadMap[groupId] && isUnreadMap[groupId][id];
     };
 
-    this.getNumberUnread = groupId => {
+    this.getNumberUnread = (groupId) => {
       const { isUnreadMap } = this.state;
       if (isUnreadMap === null) return 0;
 
@@ -737,7 +744,7 @@ class GroupedNotificationDrawer extends React.Component {
       });
     };
 
-    this.showNotifications = showNotifications => {
+    this.showNotifications = (showNotifications) => {
       this.setState({
         isUnreadMap: null,
         showNotifications: showNotifications
@@ -1232,17 +1239,20 @@ class GroupedNotificationDrawer extends React.Component {
               >
                 <NotificationDrawerList isHidden={!thirdDrawerGroupExpanded}>
                   <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>
@@ -1250,16 +1260,19 @@ class GroupedNotificationDrawer extends React.Component {
           )}
           {!showNotifications && (
             <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 alerts. There may be silenced critical alerts however.
               </EmptyStateBody>
-              <EmptyStatePrimary>
-                <Button variant="link">Action</Button>
-              </EmptyStatePrimary>
+              <EmptyStateFooter>
+                <EmptyStateActions>
+                  <Button variant="link">Action</Button>
+                </EmptyStateActions>
+              </EmptyStateFooter>
             </EmptyState>
           )}
         </NotificationDrawerBody>

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

@@ -5,6 +5,7 @@ import {
   DropdownItem,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   KebabToggle,
   NotificationBadge,
@@ -20,7 +21,6 @@ import {
   PageSectionVariants,
   TextContent,
   Text,
-  Title,
   DropdownPosition,
   EmptyStateVariant,
   NumberInput,
@@ -69,13 +69,13 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
     const key = getUniqueId();
     const timestamp = getTimeCreated();
 
-    setNotifications(prevNotifications => [
+    setNotifications((prevNotifications) => [
       { title, srTitle, variant, key, timestamp, description, isNotificationRead: false },
       ...prevNotifications
     ]);
 
     if (!isDrawerExpanded) {
-      setAlerts(prevAlerts => [
+      setAlerts((prevAlerts) => [
         <Alert
           variant={variant}
           title={title}
@@ -96,7 +96,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   };
 
   const removeNotification = (key: React.Key) => {
-    setNotifications(prevNotifications => prevNotifications.filter(notification => notification.key !== key));
+    setNotifications((prevNotifications) => prevNotifications.filter((notification) => notification.key !== key));
   };
 
   const removeAllNotifications = () => {
@@ -104,28 +104,29 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   };
 
   const isNotificationRead = (key: React.Key) =>
-    notifications.find(notification => notification.key === key)?.isNotificationRead;
+    notifications.find((notification) => notification.key === key)?.isNotificationRead;
 
   const markNotificationRead = (key: React.Key) => {
-    setNotifications(prevNotifications =>
-      prevNotifications.map(notification =>
+    setNotifications((prevNotifications) =>
+      prevNotifications.map((notification) =>
         notification.key === key ? { ...notification, isNotificationRead: true } : notification
       )
     );
   };
 
   const markAllNotificationsRead = () => {
-    setNotifications(prevNotifications =>
-      prevNotifications.map(notification => ({ ...notification, isNotificationRead: true }))
+    setNotifications((prevNotifications) =>
+      prevNotifications.map((notification) => ({ ...notification, isNotificationRead: true }))
     );
   };
 
   const getUnreadNotificationsNumber = () =>
-    notifications.filter(notification => notification.isNotificationRead === false).length;
+    notifications.filter((notification) => notification.isNotificationRead === false).length;
 
   const containsUnreadAlertNotification = () =>
-    notifications.filter(notification => notification.isNotificationRead === false && notification.variant === 'danger')
-      .length > 0;
+    notifications.filter(
+      (notification) => notification.isNotificationRead === false && notification.variant === 'danger'
+    ).length > 0;
 
   const getNotificationBadgeVariant = () => {
     if (getUnreadNotificationsNumber() === 0) {
@@ -176,7 +177,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   };
 
   const removeAlert = (key: React.Key) => {
-    setAlerts(prevAlerts => prevAlerts.filter(alert => alert.props.id !== key.toString()));
+    setAlerts((prevAlerts) => prevAlerts.filter((alert) => alert.props.id !== key.toString()));
   };
 
   const removeAllAlerts = () => {
@@ -281,10 +282,11 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         )}
         {notifications.length === 0 && (
           <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateIcon icon={SearchIcon} />
-            <Title headingLevel="h2" size="lg">
-              No notifications found
-            </Title>
+            <EmptyStateHeader
+              headingLevel="h2"
+              titleText="No notifications found"
+              icon={<EmptyStateIcon icon={SearchIcon} />}
+            />
             <EmptyStateBody>There are currently no notifications.</EmptyStateBody>
           </EmptyState>
         )}

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

@@ -4,11 +4,12 @@ import {
   Button,
   Alert,
   EmptyState,
-  EmptyStateIcon,
-  Title,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
+  EmptyStateActions,
+  EmptyStateIcon,
   Progress,
-  EmptyStateSecondaryActions,
   Form,
   FormGroup,
   TextInput
@@ -25,7 +26,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   const tick = React.useCallback(() => {
     if (percentValidated < 100) {
-      setPercentValidated(prevValue => prevValue + 20);
+      setPercentValidated((prevValue) => prevValue + 20);
     }
   }, [percentValidated]);
 
@@ -39,11 +40,12 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   return (
     <div className="pf-l-bullseye">
-      <EmptyState variant="large">
-        <EmptyStateIcon icon={CogsIcon} />
-        <Title headingLevel="h4" size="lg">
-          {percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-        </Title>
+      <EmptyState variant="lg">
+        <EmptyStateHeader
+          headingLevel="h4"
+          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+          icon={<EmptyStateIcon icon={CogsIcon} />}
+        />
         <EmptyStateBody>
           <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>
@@ -51,11 +53,13 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
           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={percentValidated !== 100} onClick={onClose}>
-            Log to console
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button isDisabled={percentValidated !== 100} onClick={onClose}>
+              Log to console
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     </div>
   );
@@ -173,7 +177,7 @@ export const WizardValidateOnButtonPress: React.FunctionComponent = () => {
         )}
         <SampleForm
           value={ageValue}
-          setValue={value => setAgeValue(value)}
+          setValue={(value) => setAgeValue(value)}
           isValid={!hasErrorOnSubmit || isFirstStepValid}
           setIsValid={setIsFirstStepValid}
         />