"fix(Pagination): Fix bottom pagination layout" (#10315)

* fix(Pgination): Fix bottom pagination layout * fix(Pgination): Fix bottom pagination layout
patternfly · May 3, 2024 · 0ba7e5c · 0ba7e5c
1 parent 029351e
commit 0ba7e5c
Show file tree

Hide file tree

Showing 4 changed files with 765 additions and 806 deletions.
diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -232,6 +232,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ...props
 }: PaginationProps) => {
   const paginationRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const getLastPage = () =>
     // when itemCount is not known let's set lastPage as page+1 as we don't know the total count
@@ -335,6 +336,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
           widgetId={`${widgetId}-${variant}`}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
+          containerRef={containerRef}
         />
       )}
       <Navigation

diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -52,6 +52,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
+  containerRef?: React.RefObject<HTMLDivElement>;
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -74,12 +75,12 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   isLastFullPageShown = false,
   itemsTitle = 'items',
   toggleTemplate,
-  onPerPageSelect = () => null as any
+  onPerPageSelect = () => null as any,
+  containerRef
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
     setIsOpen((prevState) => !prevState);
@@ -208,18 +209,16 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   );
 
   return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        isVisible={isOpen}
-        direction={dropDirection}
-        appendTo={containerRef.current || undefined}
-        minWidth={minWidth !== undefined ? minWidth : 'revert'}
-      />
-    </div>
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      direction={dropDirection}
+      appendTo={containerRef?.current || undefined}
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
+    />
   );
 };
 

diff --git a/...mponents/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap b/...mponents/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
@@ -2,48 +2,46 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div>
-    <button
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-      id="''-toggle"
-      type="button"
+  <button
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+    id="''-toggle"
+    type="button"
+  >
+    <span
+      class="pf-v5-c-menu-toggle__text"
+    >
+      <b>
+        0 - 0
+      </b>
+      Custom toggle template of
+      <b>
+        0
+      </b>
+       'items'
+    </span>
+    <span
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__text"
-      >
-        <b>
-          0 - 0
-        </b>
-        Custom toggle template of
-        <b>
-          0
-        </b>
-         'items'
-      </span>
-      <span
-        class="pf-v5-c-menu-toggle__controls"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
-        <span
-          class="pf-v5-c-menu-toggle__toggle-icon"
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 320 512"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 320 512"
-            width="1em"
-          >
-            <path
-              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
       </span>
-    </button>
-  </div>
+    </span>
+  </button>
 </DocumentFragment>
 `;