feat(Popper): add width props, remove popperMatchesTriggerWidth

patternfly · Feb 20, 2023 · 4477ecc · 4477ecc
1 parent c6de813
commit 4477ecc
Show file tree

Hide file tree

Showing 30 changed files with 180 additions and 154 deletions.
diff --git a/...ges/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/...ges/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`With popover opened 1`] = `
         aria-modal="true"
         class="pf-c-popover pf-m-no-padding pf-m-width-auto pf-m-top"
         role="dialog"
-        style="opacity: 1; transition: opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11); position: absolute; left: 0px; top: 0px; z-index: 9999;"
+        style="opacity: 1; transition: opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11); position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: auto;"
       >
         <div
           class="pf-c-popover__arrow"

diff --git a/packages/react-core/src/components/Dropdown/DropdownWithContext.tsx b/packages/react-core/src/components/Dropdown/DropdownWithContext.tsx
@@ -140,7 +140,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
               ref={this.baseComponentRef}
               {...getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)}
             >
-              {React.Children.map(toggle, oneToggle =>
+              {React.Children.map(toggle, (oneToggle) =>
                 React.cloneElement(oneToggle, {
                   parentRef: this.baseComponentRef,
                   getMenuRef: this.getMenuComponentRef,
@@ -175,7 +175,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
               appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
               isVisible={isOpen}
               zIndex={zIndex}
-              popperMatchesTriggerWidth={false}
+              minWidth="auto"
             />
           );
         }}

diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx
@@ -114,7 +114,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
         categoryName="Label group 1"
         numLabels={5}
         isEditable
-        addLabelControl={<Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />}
+        addLabelControl={<Popper trigger={toggle} popper={menu} isVisible={isOpen} minWidth="auto" />}
       >
         {labels.map((label, index) => (
           <Label

diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx
@@ -287,7 +287,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
                 popper={colorMenu}
                 appendTo={colorContainerRef.current as HTMLElement}
                 isVisible={isColorOpen}
-                popperMatchesTriggerWidth={false}
+                minWidth="auto"
               />
             </div>
           </FormGroup>
@@ -298,7 +298,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
                 popper={iconMenu}
                 appendTo={iconContainerRef.current as HTMLElement}
                 isVisible={isIconOpen}
-                popperMatchesTriggerWidth={false}
+                minWidth="auto"
               />
             </div>
           </FormGroup>

diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
@@ -1082,7 +1082,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

diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -79,11 +79,11 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
-    setIsOpen(prevState => !prevState);
+    setIsOpen((prevState) => !prevState);
   };
 
   const onSelect = () => {
-    setIsOpen(prevState => !prevState);
+    setIsOpen((prevState) => !prevState);
     toggleRef.current?.focus();
   };
 
@@ -156,7 +156,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
         key={value}
         data-action={`per-page-${value}`}
         isSelected={perPage === value}
-        onClick={event => handleNewPerPage(event, value)}
+        onClick={(event) => handleNewPerPage(event, value)}
       >
         {title}
         {` ${perPageSuffix}`}
@@ -204,7 +204,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
         isVisible={isOpen}
         direction={dropDirection}
         appendTo={containerRef.current || undefined}
-        popperMatchesTriggerWidth={false}
+        minWidth="auto"
       />
     </div>
   );

diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx
@@ -460,7 +460,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         trigger={children}
         reference={reference}
         popper={content}
-        popperMatchesTriggerWidth={false}
+        minWidth="auto"
         appendTo={appendTo}
         isVisible={visible}
         positionModifiers={positionModifiers}

diff --git a/...s/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/...s/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -257,7 +257,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"

diff --git a/packages/react-core/src/components/Tabs/OverflowTab.tsx b/packages/react-core/src/components/Tabs/OverflowTab.tsx
@@ -70,11 +70,11 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
     };
   }, [isExpanded, menuRef, overflowTabRef]);
 
-  const selectedTab = overflowingTabs.find(tab => tab.eventKey === localActiveKey);
+  const selectedTab = overflowingTabs.find((tab) => tab.eventKey === localActiveKey);
   const tabTitle = selectedTab?.title ? selectedTab.title : defaultTitleText;
 
   const toggleMenu = () => {
-    setIsExpanded(prevIsExpanded => !prevIsExpanded);
+    setIsExpanded((prevIsExpanded) => !prevIsExpanded);
     setTimeout(() => {
       if (menuRef?.current) {
         const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');
@@ -111,15 +111,15 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
     </li>
   );
 
-  const tabs = overflowingTabs.map(tab => (
+  const tabs = overflowingTabs.map((tab) => (
     <MenuItem key={tab.eventKey} itemId={tab.eventKey} isSelected={localActiveKey === tab.eventKey}>
       {tab.title}
     </MenuItem>
   ));
 
   const onTabSelect = (event: React.MouseEvent<HTMLElement, MouseEvent>, key: number | string) => {
     closeMenu();
-    const selectedTabRef = overflowingTabs.find(tab => tab.eventKey === key).tabContentRef;
+    const selectedTabRef = overflowingTabs.find((tab) => tab.eventKey === key).tabContentRef;
     handleTabClick(event, key, selectedTabRef);
   };
 
@@ -139,7 +139,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
         popper={overflowMenu}
         popperRef={menuRef}
         isVisible={isExpanded}
-        popperMatchesTriggerWidth={false}
+        minWidth="auto"
         appendTo={overflowLIRef.current}
         zIndex={zIndex}
       />

diff --git a/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx b/packages/react-core/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>

diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap b/packages/react-core/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>

diff --git a/packages/react-core/src/components/Tooltip/Tooltip.tsx b/packages/react-core/src/components/Tooltip/Tooltip.tsx
@@ -178,7 +178,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const prevExitDelayRef = React.useRef<number>();
 
   const clearTimeouts = (timeoutRefs: React.RefObject<any>[]) => {
-    timeoutRefs.forEach(ref => {
+    timeoutRefs.forEach((ref) => {
       if (ref.current) {
         clearTimeout(ref.current);
       }
@@ -317,7 +317,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       trigger={aria !== 'none' && visible ? addAriaToTrigger() : children}
       reference={reference}
       popper={content}
-      popperMatchesTriggerWidth={false}
+      minWidth="auto"
       appendTo={appendTo}
       isVisible={visible}
       positionModifiers={positionModifiers}

diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx
@@ -41,7 +41,7 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     }
 
     if (selectedItems.includes(itemId)) {
-      setSelectedItems(selectedItems.filter(id => id !== itemId));
+      setSelectedItems(selectedItems.filter((id) => id !== itemId));
     } else {
       setSelectedItems([...selectedItems, itemId]);
     }
@@ -122,5 +122,5 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} minWidth="auto" />;
 };