From 7d2f9def7a9ce820d042738ca8ac69a8a254be03 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 15 Jan 2024 09:53:06 -0500
Subject: [PATCH 1/4] feat(Pagination): applied Penta updates

---
 .../src/components/Pagination/Pagination.tsx  |   4 -
 .../Pagination/PaginationOptionsMenu.tsx      |   3 +-
 .../PaginationOptionsMenu.test.tsx.snap       |   4 +-
 .../Pagination/__tests__/Pagination.test.tsx  |  10 --
 .../__snapshots__/Pagination.test.tsx.snap    | 152 +++++++++++-------
 5 files changed, 101 insertions(+), 72 deletions(-)

diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
index 60420953b42..013dea5b4dd 100644
--- a/packages/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -108,8 +108,6 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   dropDirection?: 'up' | 'down';
   /** Page to start at. */
   firstPage?: number;
-  /** @beta Flag indicating that pagination should use page insets. */
-  usePageInsets?: boolean;
   /** @beta Insets at various breakpoints. */
   inset?: {
     default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
@@ -227,7 +225,6 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   onLastClick = () => undefined,
   ouiaId,
   ouiaSafe = true,
-  usePageInsets,
   inset,
   ...props
 }: PaginationProps) => {
@@ -283,7 +280,6 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
       className={css(
         styles.pagination,
         variant === PaginationVariant.bottom && styles.modifiers.bottom,
-        usePageInsets && styles.modifiers.pageInsets,
         formatBreakpointMods(inset, styles),
         isStatic && styles.modifiers.static,
         isSticky && styles.modifiers.sticky,
diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
index 8d8f624f98e..8b050b283ff 100644
--- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
+++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { MenuToggle } from '../MenuToggle';
@@ -210,7 +211,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   );
 
   return (
-    <div ref={containerRef}>
+    <div className={css(styles.paginationPageMenu)} ref={containerRef}>
       <Popper
         trigger={toggle}
         triggerRef={toggleRef}
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
index 1167a78ce3f..de8972306bd 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    class="pf-v5-c-pagination__page-menu"
+  >
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
diff --git a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
index e65b3745fe0..2c03c3a4e35 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
+++ b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
@@ -114,16 +114,6 @@ describe('Pagination', () => {
       rerender(<Pagination titles={{ optionsToggleAriaLabel: 'test label' }} itemCount={20} />);
       expect(screen.getByLabelText('test label')).toHaveAttribute('id', id);
     });
-
-    test('page insets', () => {
-      render(<Pagination data-testid="pagination-insets" usePageInsets />);
-      expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
-    });
-
-    test('page insets', () => {
-      render(<Pagination data-testid="pagination-insets" usePageInsets />);
-      expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
-    });
   });
 
   describe('API', () => {
diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index 2743a29b492..bb07538e60f 100644
--- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-44"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-42"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -22,7 +22,9 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -77,7 +79,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-181"
+          data-ouia-component-id="OUIA-Generated-Button-plain-173"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -106,7 +108,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-182"
+          data-ouia-component-id="OUIA-Generated-Button-plain-174"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -136,7 +138,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-46"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-44"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -154,7 +156,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-183"
+          data-ouia-component-id="OUIA-Generated-Button-plain-175"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -182,7 +184,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-184"
+          data-ouia-component-id="OUIA-Generated-Button-plain-176"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -212,7 +214,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-42"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-40"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -230,7 +232,9 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -285,7 +289,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-173"
+          data-ouia-component-id="OUIA-Generated-Button-plain-165"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -314,7 +318,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-174"
+          data-ouia-component-id="OUIA-Generated-Button-plain-166"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -344,7 +348,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-44"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-42"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -362,7 +366,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-175"
+          data-ouia-component-id="OUIA-Generated-Button-plain-167"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -390,7 +394,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-176"
+          data-ouia-component-id="OUIA-Generated-Button-plain-168"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -420,7 +424,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-41"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-39"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -438,7 +442,9 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -493,7 +499,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-169"
+          data-ouia-component-id="OUIA-Generated-Button-plain-161"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -522,7 +528,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-170"
+          data-ouia-component-id="OUIA-Generated-Button-plain-162"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -552,7 +558,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-43"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-41"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -570,7 +576,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-171"
+          data-ouia-component-id="OUIA-Generated-Button-plain-163"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -598,7 +604,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-172"
+          data-ouia-component-id="OUIA-Generated-Button-plain-164"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -628,7 +634,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-39"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-37"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -646,7 +652,9 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -701,7 +709,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-161"
+          data-ouia-component-id="OUIA-Generated-Button-plain-153"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -730,7 +738,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-162"
+          data-ouia-component-id="OUIA-Generated-Button-plain-154"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -760,7 +768,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-41"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-39"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -778,7 +786,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-163"
+          data-ouia-component-id="OUIA-Generated-Button-plain-155"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -806,7 +814,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-164"
+          data-ouia-component-id="OUIA-Generated-Button-plain-156"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -836,7 +844,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-40"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-38"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -854,7 +862,9 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -909,7 +919,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-165"
+          data-ouia-component-id="OUIA-Generated-Button-plain-157"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -938,7 +948,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-166"
+          data-ouia-component-id="OUIA-Generated-Button-plain-158"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -968,7 +978,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-42"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-40"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -986,7 +996,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-167"
+          data-ouia-component-id="OUIA-Generated-Button-plain-159"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -1014,7 +1024,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-168"
+          data-ouia-component-id="OUIA-Generated-Button-plain-160"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -1044,7 +1054,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-43"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-41"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -1062,7 +1072,9 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -1117,7 +1129,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-177"
+          data-ouia-component-id="OUIA-Generated-Button-plain-169"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1146,7 +1158,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-178"
+          data-ouia-component-id="OUIA-Generated-Button-plain-170"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1176,7 +1188,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-45"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-43"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -1194,7 +1206,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-179"
+          data-ouia-component-id="OUIA-Generated-Button-plain-171"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -1222,7 +1234,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-180"
+          data-ouia-component-id="OUIA-Generated-Button-plain-172"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -1263,7 +1275,9 @@ exports[`Pagination component render custom pagination toggle 1`] = `
     >
       1 - 10 - 40 - 
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -1468,7 +1482,9 @@ exports[`Pagination component render custom perPageOptions 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -1680,7 +1696,9 @@ exports[`Pagination component render custom start end 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -2059,7 +2077,9 @@ exports[`Pagination component render last page 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -2271,7 +2291,9 @@ exports[`Pagination component render limited number of pages 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -2474,7 +2496,9 @@ exports[`Pagination component render should render correctly bottom 1`] = `
     id="options-menu-bottom-pagination"
     style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -2674,7 +2698,9 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
     id="options-menu-bottom-pagination"
     style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -2886,7 +2912,9 @@ exports[`Pagination component render should render correctly compact 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -3098,7 +3126,9 @@ exports[`Pagination component render should render correctly disabled 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -3314,7 +3344,9 @@ exports[`Pagination component render should render correctly sticky 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -3526,7 +3558,9 @@ exports[`Pagination component render should render correctly top 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -3738,7 +3772,9 @@ exports[`Pagination component render titles 1`] = `
       </b>
        values
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -3950,7 +3986,9 @@ exports[`Pagination component render up drop direction 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -4162,7 +4200,9 @@ exports[`Pagination component render zero results 1`] = `
       </b>
        
     </div>
-    <div>
+    <div
+      class="pf-v5-c-pagination__page-menu"
+    >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"

From 8564dd00d568e1ea8c2131100fb3935ec2e89e1d Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 16 Jan 2024 09:56:08 -0500
Subject: [PATCH 2/4] Added back usePageInsets prop

---
 .../src/components/Pagination/Pagination.tsx  |   4 +
 .../PaginationOptionsMenu.test.tsx.snap       |   2 +-
 .../Pagination/__tests__/Pagination.test.tsx  |   5 +
 .../__snapshots__/Pagination.test.tsx.snap    | 112 +++++++++---------
 4 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
index 013dea5b4dd..60420953b42 100644
--- a/packages/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -108,6 +108,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   dropDirection?: 'up' | 'down';
   /** Page to start at. */
   firstPage?: number;
+  /** @beta Flag indicating that pagination should use page insets. */
+  usePageInsets?: boolean;
   /** @beta Insets at various breakpoints. */
   inset?: {
     default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
@@ -225,6 +227,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   onLastClick = () => undefined,
   ouiaId,
   ouiaSafe = true,
+  usePageInsets,
   inset,
   ...props
 }: PaginationProps) => {
@@ -280,6 +283,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
       className={css(
         styles.pagination,
         variant === PaginationVariant.bottom && styles.modifiers.bottom,
+        usePageInsets && styles.modifiers.pageInsets,
         formatBreakpointMods(inset, styles),
         isStatic && styles.modifiers.static,
         isSticky && styles.modifiers.sticky,
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
index de8972306bd..4c0c3ae699b 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-pagination__page-menu"
+    class=""
   >
     <button
       aria-expanded="false"
diff --git a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
index 2c03c3a4e35..60bb4437fac 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
+++ b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
@@ -114,6 +114,11 @@ describe('Pagination', () => {
       rerender(<Pagination titles={{ optionsToggleAriaLabel: 'test label' }} itemCount={20} />);
       expect(screen.getByLabelText('test label')).toHaveAttribute('id', id);
     });
+
+    test('page insets', () => {
+      render(<Pagination data-testid="pagination-insets" usePageInsets />);
+      expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
+    });
   });
 
   describe('API', () => {
diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index bb07538e60f..8b8e8683fcd 100644
--- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-42"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-43"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -23,7 +23,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -79,7 +79,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-173"
+          data-ouia-component-id="OUIA-Generated-Button-plain-177"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -108,7 +108,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-174"
+          data-ouia-component-id="OUIA-Generated-Button-plain-178"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -138,7 +138,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-44"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-45"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -156,7 +156,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-175"
+          data-ouia-component-id="OUIA-Generated-Button-plain-179"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -184,7 +184,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-176"
+          data-ouia-component-id="OUIA-Generated-Button-plain-180"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -214,7 +214,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-40"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-41"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -233,7 +233,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -289,7 +289,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-165"
+          data-ouia-component-id="OUIA-Generated-Button-plain-169"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -318,7 +318,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-166"
+          data-ouia-component-id="OUIA-Generated-Button-plain-170"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -348,7 +348,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-42"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-43"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -366,7 +366,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-167"
+          data-ouia-component-id="OUIA-Generated-Button-plain-171"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -394,7 +394,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-168"
+          data-ouia-component-id="OUIA-Generated-Button-plain-172"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -424,7 +424,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-39"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-40"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -443,7 +443,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -499,7 +499,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-161"
+          data-ouia-component-id="OUIA-Generated-Button-plain-165"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -528,7 +528,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-162"
+          data-ouia-component-id="OUIA-Generated-Button-plain-166"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -558,7 +558,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-41"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-42"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -576,7 +576,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-163"
+          data-ouia-component-id="OUIA-Generated-Button-plain-167"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -604,7 +604,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-164"
+          data-ouia-component-id="OUIA-Generated-Button-plain-168"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -634,7 +634,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-37"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-38"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -653,7 +653,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -709,7 +709,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-153"
+          data-ouia-component-id="OUIA-Generated-Button-plain-157"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -738,7 +738,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-154"
+          data-ouia-component-id="OUIA-Generated-Button-plain-158"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -768,7 +768,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-39"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-40"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -786,7 +786,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-155"
+          data-ouia-component-id="OUIA-Generated-Button-plain-159"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -814,7 +814,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-156"
+          data-ouia-component-id="OUIA-Generated-Button-plain-160"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -844,7 +844,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-38"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-39"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -863,7 +863,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -919,7 +919,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-157"
+          data-ouia-component-id="OUIA-Generated-Button-plain-161"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -948,7 +948,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-158"
+          data-ouia-component-id="OUIA-Generated-Button-plain-162"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -978,7 +978,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-40"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-41"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -996,7 +996,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-159"
+          data-ouia-component-id="OUIA-Generated-Button-plain-163"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -1024,7 +1024,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-160"
+          data-ouia-component-id="OUIA-Generated-Button-plain-164"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -1054,7 +1054,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-pagination pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-41"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-42"
     data-ouia-component-type="PF5/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -1073,7 +1073,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -1129,7 +1129,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-169"
+          data-ouia-component-id="OUIA-Generated-Button-plain-173"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1158,7 +1158,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v5-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-170"
+          data-ouia-component-id="OUIA-Generated-Button-plain-174"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1188,7 +1188,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-43"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-44"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -1206,7 +1206,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v5-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-171"
+          data-ouia-component-id="OUIA-Generated-Button-plain-175"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -1234,7 +1234,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v5-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-172"
+          data-ouia-component-id="OUIA-Generated-Button-plain-176"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
@@ -1276,7 +1276,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
       1 - 10 - 40 - 
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -1483,7 +1483,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -1697,7 +1697,7 @@ exports[`Pagination component render custom start end 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -2078,7 +2078,7 @@ exports[`Pagination component render last page 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -2292,7 +2292,7 @@ exports[`Pagination component render limited number of pages 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -2497,7 +2497,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
     style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -2699,7 +2699,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
     style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -2913,7 +2913,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -3127,7 +3127,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -3345,7 +3345,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -3559,7 +3559,7 @@ exports[`Pagination component render should render correctly top 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -3773,7 +3773,7 @@ exports[`Pagination component render titles 1`] = `
        values
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -3987,7 +3987,7 @@ exports[`Pagination component render up drop direction 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"
@@ -4201,7 +4201,7 @@ exports[`Pagination component render zero results 1`] = `
        
     </div>
     <div
-      class="pf-v5-c-pagination__page-menu"
+      class=""
     >
       <button
         aria-expanded="false"

From e8d2b16d55178bd21cd540e51bacc398e471b0f5 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 16 Jan 2024 10:04:20 -0500
Subject: [PATCH 3/4] Updated snapshots

---
 .../PaginationOptionsMenu.test.tsx.snap       |  2 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 40 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
index 4c0c3ae699b..de8972306bd 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class=""
+    class="pf-v5-c-pagination__page-menu"
   >
     <button
       aria-expanded="false"
diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index 8b8e8683fcd..2a3d98c5c93 100644
--- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -233,7 +233,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -443,7 +443,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -653,7 +653,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -863,7 +863,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -1073,7 +1073,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -1276,7 +1276,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
       1 - 10 - 40 - 
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -1483,7 +1483,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -1697,7 +1697,7 @@ exports[`Pagination component render custom start end 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -2078,7 +2078,7 @@ exports[`Pagination component render last page 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -2292,7 +2292,7 @@ exports[`Pagination component render limited number of pages 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -2497,7 +2497,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
     style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -2699,7 +2699,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
     style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -2913,7 +2913,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -3127,7 +3127,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -3345,7 +3345,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -3559,7 +3559,7 @@ exports[`Pagination component render should render correctly top 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -3773,7 +3773,7 @@ exports[`Pagination component render titles 1`] = `
        values
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -3987,7 +3987,7 @@ exports[`Pagination component render up drop direction 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"
@@ -4201,7 +4201,7 @@ exports[`Pagination component render zero results 1`] = `
        
     </div>
     <div
-      class=""
+      class="pf-v5-c-pagination__page-menu"
     >
       <button
         aria-expanded="false"

From 4e217d59c232f41c69ee69a1a4e181070f5b4127 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 16 Jan 2024 13:35:10 -0500
Subject: [PATCH 4/4] Added test file for PaginationOptionsMenu

---
 .../__tests__/PaginationOptionsMenu.test.tsx  | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 packages/react-core/src/components/Pagination/__tests__/PaginationOptionsMenu.test.tsx

diff --git a/packages/react-core/src/components/Pagination/__tests__/PaginationOptionsMenu.test.tsx b/packages/react-core/src/components/Pagination/__tests__/PaginationOptionsMenu.test.tsx
new file mode 100644
index 00000000000..5ba7f5b61ab
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/__tests__/PaginationOptionsMenu.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { PaginationOptionsMenu } from '../PaginationOptionsMenu';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
+
+jest.mock('../../../helpers/Popper/Popper');
+
+test('renders pagination options menu', () => {
+  render(
+    <div data-testid="options-menu">
+      <PaginationOptionsMenu toggleTemplate="Test" />
+    </div>
+  );
+
+  expect(screen.getByTestId('options-menu').children[0]).toBeVisible();
+});
+
+test(`renders with class ${styles.paginationPageMenu} by default`, () => {
+  render(<PaginationOptionsMenu toggleTemplate="Test" />);
+
+  // Mocked Popper is rendered with data-testid="mock-wrapper"
+  expect(screen.getByTestId('mock-wrapper').parentElement).toHaveClass(styles.paginationPageMenu);
+});