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

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/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -115,14 +115,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
         numLabels={5}
         isEditable
         addLabelControl={
-          <Popper
-            trigger={toggle}
-            triggerRef={toggleRef}
-            popper={menu}
-            popperRef={menuRef}
-            isVisible={isOpen}
-            popperMatchesTriggerWidth={false}
-          />
+          <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
         }
       >
         {labels.map((label, index) => (

package/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -289,7 +289,6 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
                 popperRef={colorMenuRef}
                 appendTo={colorContainerRef.current as HTMLElement}
                 isVisible={isColorOpen}
-                popperMatchesTriggerWidth={false}
               />
             </div>
           </FormGroup>
@@ -302,7 +301,6 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
                 popperRef={iconMenuRef}
                 appendTo={iconContainerRef.current as HTMLElement}
                 isVisible={isIconOpen}
-                popperMatchesTriggerWidth={false}
               />
             </div>
           </FormGroup>

package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -1096,7 +1096,7 @@ exports[`Nav Nav List with flyout 1`] = `
       data-popper-escaped="true"
       data-popper-placement="right-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: 0px; transform: translate(0px, 0px);"
     >
       <div>
         Flyout test

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/Pagination/PaginationOptionsMenu.tsx

@@ -16,6 +16,8 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   isDisabled?: boolean;
   /** Menu will open up or open down from the options menu toggle. */
   dropDirection?: 'up' | 'down';
+  /** Minimum width of the pagination options menu. If set to "trigger", the minimum width will be set to the toggle width. */
+  minWidth?: string | 'trigger';
   /** Array of titles and values which will be the options on the options menu dropdown. */
   perPageOptions?: PerPageOptions[];
   /** The title of the pagination options menu. */
@@ -58,6 +60,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   page: pageProp,
   itemCount,
   isDisabled = false,
+  minWidth,
   dropDirection = 'down',
   perPageOptions = [] as PerPageOptions[],
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -206,7 +209,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
         isVisible={isOpen}
         direction={dropDirection}
         appendTo={containerRef.current || undefined}
-        popperMatchesTriggerWidth={false}
+        minWidth={minWidth !== undefined ? minWidth : 'revert'}
       />
     </div>
   );

package/src/components/Popover/Popover.tsx

@@ -464,7 +464,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         triggerRef={triggerRef}
         popper={content}
         popperRef={popoverRef}
-        popperMatchesTriggerWidth={false}
+        minWidth="revert"
         appendTo={appendTo}
         isVisible={visible}
         positionModifiers={positionModifiers}

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -246,7 +246,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); width: 0px; z-index: 9999;"
+      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999;"
     >
       <div
         class="pf-c-panel pf-m-raised"

package/src/components/Tabs/OverflowTab.tsx

@@ -139,7 +139,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
         popper={overflowMenu}
         popperRef={menuRef}
         isVisible={isExpanded}
-        popperMatchesTriggerWidth={false}
+        minWidth="revert"
         appendTo={overflowLIRef.current}
         zIndex={zIndex}
       />

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -6,11 +6,10 @@ import { OverflowTab } from '../OverflowTab';
 import { TabsContext } from '../TabsContext';
 
 jest.mock('../../../helpers', () => ({
-  Popper: ({ trigger, popper, isVisible, popperMatchesTriggerWidth, appendTo }) => (
+  Popper: ({ trigger, popper, isVisible, appendTo }) => (
     <div data-testid="popper-mock">
       <div data-testid="trigger">{trigger}</div>
       <div data-testid="popper">{isVisible && popper}</div>
-      <p>Popper matches trigger width: {`${popperMatchesTriggerWidth}`}</p>
       <p>Append to class name: {appendTo && `${appendTo.className}`}</p>
     </div>
   )
@@ -206,8 +205,8 @@ test('Closes the overflowing tabs menu when a tab is selected', async () => {
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
-          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -228,8 +227,8 @@ test('Closes the overflowing tabs menu when the user clicks outside of the menu'
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
-          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -250,7 +249,7 @@ test('Calls the onTabClick callback provided via context when a tab is clicked',
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, handleTabClick: mockHandleTabClick }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -303,7 +302,7 @@ test('Uses the selected tab title as the overflow tab title rather than the defa
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -323,7 +322,7 @@ test('Uses the selected tab title as the overflow tab title rather than the defa
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
         defaultTitleText="Test"
       />
@@ -369,13 +368,6 @@ test('Renders the tab with aria-expanded set to true when the menu is opened', a
   expect(overflowTab).toHaveAttribute('aria-expanded', 'true');
 });
 
-test('Passes Popper popperMatchesTriggerWidth set to false', () => {
-  render(<OverflowTab />);
-
-  // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
-  expect(screen.getByText('Popper matches trigger width: false')).toBeVisible();
-});
-
 test('Passes Popper an appendTo value of the presentation element', async () => {
   const user = userEvent.setup();
 
@@ -394,7 +386,7 @@ test('Does not render an overflowing tab as a selected menu item by default', as
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -413,7 +405,7 @@ test('Renders an overflowing tab as a selected menu item when its key matches th
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -432,8 +424,8 @@ test('Matches snapshot when expanded', async () => {
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
-          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>

package/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap

@@ -78,9 +78,6 @@ exports[`Matches snapshot when expanded 1`] = `
         </button>
       </div>
     </div>
-    <p>
-      Popper matches trigger width: false
-    </p>
     <p>
       Append to class name: pf-c-tabs__item pf-m-overflow pf-m-current
     </p>
@@ -166,9 +163,6 @@ exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 1`
         </button>
       </div>
     </div>
-    <p>
-      Popper matches trigger width: false
-    </p>
     <p>
       Append to class name: pf-c-tabs__item pf-m-overflow
     </p>

package/src/components/Tooltip/Tooltip.tsx

@@ -93,6 +93,8 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
         | 'right-start'
         | 'right-end'
       )[];
+  /** Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width. */
+  minWidth?: string | 'trigger';
   /** Maximum width of the tooltip (default 18.75rem) */
   maxWidth?: string;
   /** Callback when tooltip's hide transition has finished executing */
@@ -151,6 +153,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   exitDelay = 300,
   appendTo = () => document.body,
   zIndex = 9999,
+  minWidth,
   maxWidth = tooltipMaxWidth.value,
   distance = 15,
   aria = 'describedby',
@@ -321,7 +324,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       triggerRef={triggerRef}
       popper={content}
       popperRef={popperRef}
-      popperMatchesTriggerWidth={false}
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
       appendTo={appendTo}
       isVisible={visible}
       positionModifiers={positionModifiers}

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/ComposableMenu/examples/ComposableActionsMenu.tsx

@@ -69,11 +69,6 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
       // eslint-disable-next-line no-console
       onActionClick={(event, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}
       onSelect={onSelect}
-      style={
-        {
-          '--pf-c-menu--Width': '300px'
-        } as React.CSSProperties
-      }
     >
       <MenuGroup label="Actions">
         <MenuList>
@@ -122,14 +117,5 @@ export const ComposableActionsMenu: 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/ComposableApplicationLauncher.tsx

@@ -265,14 +265,5 @@ export const ComposableApplicationLauncher: 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/ComposableContextSelector.tsx

@@ -146,17 +146,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
   };
 
   const menu = (
-    <Menu
-      ref={menuRef}
-      id="context-selector"
-      onSelect={onSelect}
-      isScrollable
-      style={
-        {
-          '--pf-c-menu--Width': '300px'
-        } as React.CSSProperties
-      }
-    >
+    <Menu ref={menuRef} id="context-selector" onSelect={onSelect} isScrollable>
       <MenuInput>
         <InputGroup>
           <SearchInput
@@ -198,14 +188,5 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       </MenuFooter>
     </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/ComposableDateSelect.tsx

@@ -109,14 +109,5 @@ export const ComposableSimpleDropdown: 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} />;
 };