@patternfly/react-core 5.0.0-alpha.32 → 5.0.0-alpha.34

package/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx

@@ -107,11 +107,6 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       onDrillOut={drillOut}
       onGetMenuHeight={setHeight}
       ref={menuRef}
-      style={
-        {
-          '--pf-c-menu--Width': '300px'
-        } as React.CSSProperties
-      }
     >
       <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>
         <MenuList>
@@ -247,14 +242,5 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <Popper
-      trigger={toggle}
-      triggerRef={toggleRef}
-      popper={menu}
-      popperRef={menuRef}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

package/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx

@@ -226,14 +226,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
         />
       </ToggleGroup>
       <br />
-      <Popper
-        trigger={buildToggle()}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
-      />
+      <Popper trigger={buildToggle()} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
     </React.Fragment>
   );
 };

package/src/demos/ComposableMenu/examples/ComposableFlyout.tsx

@@ -100,14 +100,5 @@ export const ComposableFlyout: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return (
-    <Popper
-      trigger={toggle}
-      triggerRef={toggleRef}
-      popper={menu}
-      popperRef={menuRef}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

package/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx

@@ -267,14 +267,5 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
       </PanelMain>
     </Panel>
   );
-  return (
-    <Popper
-      trigger={toggle}
-      triggerRef={toggleRef}
-      popper={menu}
-      popperRef={menuRef}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

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';
@@ -255,7 +256,6 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );
@@ -627,23 +627,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>
   );
 

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

@@ -231,7 +231,6 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );

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';
@@ -238,7 +239,6 @@ export const FilterFaceted: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );
@@ -444,22 +444,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';
@@ -235,7 +236,6 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );
@@ -494,22 +494,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';
@@ -236,7 +237,6 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );
@@ -467,22 +467,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';
@@ -239,7 +240,6 @@ export const FilterSearchInput: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );
@@ -276,21 +276,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/Filters/examples/FilterSingleSelect.tsx

@@ -226,7 +226,6 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );

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>