From a1212cc62c4a932fe608f19ebedcbc4c640776fc Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 7 Apr 2022 14:23:28 -0400
Subject: [PATCH 1/7] fix(Pagination): make items per page text in toggle
 clickable

---
 .../components/Pagination/OptionsToggle.tsx   | 64 +++++++++----------
 1 file changed, 30 insertions(+), 34 deletions(-)

diff --git a/packages/react-core/src/components/Pagination/OptionsToggle.tsx b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
index bb797b828ad..8d3c26f19b0 100644
--- a/packages/react-core/src/components/Pagination/OptionsToggle.tsx
+++ b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
@@ -59,41 +59,37 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   toggleTemplate: ToggleTemplate,
   onEnter = null
 }: OptionsToggleProps) => (
-  <div
-    className={css(
-      styles.optionsMenuToggle,
-      isDisabled && styles.modifiers.disabled,
-      styles.modifiers.plain,
-      styles.modifiers.text
-    )}
-  >
+  <>
     {showToggle && (
-      <React.Fragment>
-        <span className={css(styles.optionsMenuToggleText)}>
-          {typeof ToggleTemplate === 'string' ? (
-            fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })
-          ) : (
-            <ToggleTemplate
-              firstIndex={firstIndex}
-              lastIndex={lastIndex}
-              ofWord={ofWord}
-              itemCount={itemCount}
-              itemsTitle={itemsTitle}
-            />
-          )}
-        </span>
-        <DropdownToggle
-          onEnter={onEnter}
-          aria-label={optionsToggle}
-          onToggle={onToggle}
-          isDisabled={isDisabled || (itemCount && itemCount <= 0)}
-          isOpen={isOpen}
-          id={`${widgetId}-toggle-${toggleId++}`}
-          className={styles.optionsMenuToggleButton}
-          parentRef={parentRef}
-        ></DropdownToggle>
-      </React.Fragment>
+      <DropdownToggle
+        onEnter={onEnter}
+        aria-label={optionsToggle}
+        onToggle={onToggle}
+        isDisabled={isDisabled || (itemCount && itemCount <= 0)}
+        isOpen={isOpen}
+        id={`${widgetId}-toggle-${toggleId++}`}
+        className={css(
+          styles.optionsMenuToggle,
+          isDisabled && styles.modifiers.disabled,
+          styles.modifiers.plain,
+          styles.modifiers.text
+        )}
+        parentRef={parentRef}
+        aria-haspopup="listbox"
+      >
+        {typeof ToggleTemplate === 'string' ? (
+          fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })
+        ) : (
+          <ToggleTemplate
+            firstIndex={firstIndex}
+            lastIndex={lastIndex}
+            ofWord={ofWord}
+            itemCount={itemCount}
+            itemsTitle={itemsTitle}
+          />
+        )}
+      </DropdownToggle>
     )}
-  </div>
+  </>
 );
 OptionsToggle.displayName = 'OptionsToggle';

From c55ad2048a7a4bc6e92186c81f595714ca96a645 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 7 Apr 2022 14:27:50 -0400
Subject: [PATCH 2/7] Update snapshots

---
 .../__snapshots__/OptionsToggle.test.tsx.snap |  57 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 202 +++++
 .../PaginationOptionsMenu.test.tsx.snap       |   6 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 806 +++++++++---------
 4 files changed, 609 insertions(+), 462 deletions(-)
 create mode 100644 packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap

diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
index 294ac5dbf4c..5c9b9236c94 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
@@ -2,40 +2,35 @@
 
 exports[`OptionsToggle should match snapshot (auto-generated) 1`] = `
 <div>
-  <div
-    class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+  <button
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="'Select'"
+    class="pf-c-dropdown__toggle pf-c-options-menu__toggle pf-m-plain pf-m-text"
+    data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
+    data-ouia-component-type="PF4/DropdownToggle"
+    data-ouia-safe="true"
+    id="''-toggle-0"
+    type="button"
   >
+    
     <span
-      class="pf-c-options-menu__toggle-text"
-    />
-    <button
-      aria-expanded="false"
-      aria-label="'Select'"
-      class="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-      data-ouia-component-type="PF4/DropdownToggle"
-      data-ouia-safe="true"
-      id="''-toggle-0"
-      type="button"
+      class=""
     >
-      <span
-        class=""
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 320 512"
+        width="1em"
       >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          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>
-    </button>
-  </div>
+        <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>
 `;
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap
new file mode 100644
index 00000000000..4cb5f2cfbd9
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap
@@ -0,0 +1,202 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pagination should match snapshot (auto-generated) 1`] = `
+<div>
+  <div
+    class="pf-c-pagination ''"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-1"
+    data-ouia-component-type="PF4/Pagination"
+    data-ouia-safe="true"
+    id="'pagination-options-menu'-0"
+    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+  >
+    <div
+      class="pf-c-pagination__total-items"
+    >
+      string
+    </div>
+    <div
+      class="pf-c-options-menu pf-m-top"
+      data-ouia-component-type="PF4/PaginationOptionsMenu"
+      data-ouia-safe="true"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="'pagination-options-menu'-toggle-0"
+        type="button"
+      >
+        <span
+          class="pf-c-options-menu__toggle-text"
+        >
+          string
+        </span>
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
+    </div>
+    <nav
+      aria-label="Pagination"
+      class="pf-c-pagination__nav"
+    >
+      <div
+        class="pf-c-pagination__nav-control pf-m-first"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to first page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="first"
+          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to previous page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="previous"
+          data-ouia-component-id="OUIA-Generated-Button-plain-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-page-select"
+      >
+        <input
+          aria-label="Current page"
+          class="pf-c-form-control"
+          disabled=""
+          max="1"
+          min="1"
+          type="number"
+          value="1"
+        />
+        <span
+          aria-hidden="true"
+        >
+          of
+           
+          1
+        </span>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to next page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="next"
+          data-ouia-component-id="OUIA-Generated-Button-plain-3"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control pf-m-last"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to last page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="last"
+          data-ouia-component-id="OUIA-Generated-Button-plain-4"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+    </nav>
+    ReactNode
+  </div>
+</div>
+`;
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 c657b4a112f..53521992ce8 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
@@ -6,10 +6,6 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
     class="pf-c-options-menu pf-m-top"
     data-ouia-component-type="PF4/PaginationOptionsMenu"
     data-ouia-safe="true"
-  >
-    <div
-      class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
-    />
-  </div>
+  />
 </div>
 `;
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 6d92aa8ffda..06e21811abb 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
@@ -20,43 +20,40 @@ exports[`Pagination component render custom pagination toggle 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-13"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
         >
           -9 - 10 - 40 - 
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-12"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -225,8 +222,16 @@ exports[`Pagination component render custom perPageOptions 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-9"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -240,35 +245,24 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-9"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -437,8 +431,16 @@ exports[`Pagination component render custom start end 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-11"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -452,35 +454,24 @@ exports[`Pagination component render custom start end 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-10"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -646,11 +637,7 @@ exports[`Pagination component render empty per page options 1`] = `
       class="pf-c-options-menu"
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
-    >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
-      />
-    </div>
+    />
     <nav
       aria-label="Pagination"
       class="pf-c-pagination__nav"
@@ -818,8 +805,16 @@ exports[`Pagination component render last page 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-8"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -833,35 +828,24 @@ exports[`Pagination component render last page 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-8"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -1030,8 +1014,16 @@ exports[`Pagination component render limited number of pages 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-6"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1045,35 +1037,24 @@ exports[`Pagination component render limited number of pages 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-6"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -1233,8 +1214,16 @@ exports[`Pagination component render should render correctly bottom 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-1"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1248,35 +1237,24 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-1"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -1433,8 +1411,16 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-4"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1448,35 +1434,24 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-4"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -1645,8 +1620,16 @@ exports[`Pagination component render should render correctly compact 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-2"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1660,35 +1643,24 @@ exports[`Pagination component render should render correctly compact 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-2"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -1783,8 +1755,17 @@ exports[`Pagination component render should render correctly disabled 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-disabled pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-disabled pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        disabled=""
+        id="pagination-options-menu-toggle-5"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1798,36 +1779,24 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          disabled=""
-          id="pagination-options-menu-toggle-5"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -1999,8 +1968,16 @@ exports[`Pagination component render should render correctly sticky 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-3"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -2014,35 +1991,24 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-3"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -2211,8 +2177,16 @@ exports[`Pagination component render should render correctly top 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-0"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -2226,35 +2200,24 @@ exports[`Pagination component render should render correctly top 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-0"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -2423,8 +2386,16 @@ exports[`Pagination component render titles 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-12"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -2438,35 +2409,24 @@ exports[`Pagination component render titles 1`] = `
           </b>
            values
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-11"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -2635,8 +2595,16 @@ exports[`Pagination component render up drop direction 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-15"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-14"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -2650,35 +2618,24 @@ exports[`Pagination component render up drop direction 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-13"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"
@@ -2847,8 +2804,16 @@ exports[`Pagination component render zero results 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Items per page"
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-7"
+        type="button"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -2862,35 +2827,24 @@ exports[`Pagination component render zero results 1`] = `
           </b>
            
         </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-7"
-          type="button"
+        <span
+          class="pf-c-options-menu__toggle-button-icon"
         >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
     </div>
     <nav
       aria-label="Pagination"

From f6ba50faa6d5a6ed96544c0682ee47c46ce3ea3c Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Fri, 8 Apr 2022 12:51:17 -0400
Subject: [PATCH 3/7] Update Cypress tests

---
 .../cypress/integration/pagination.spec.ts             | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-integration/cypress/integration/pagination.spec.ts b/packages/react-integration/cypress/integration/pagination.spec.ts
index 91b37f92cb2..fef085a5b2a 100644
--- a/packages/react-integration/cypress/integration/pagination.spec.ts
+++ b/packages/react-integration/cypress/integration/pagination.spec.ts
@@ -19,9 +19,9 @@ describe('Pagination Demo Test', () => {
     cy.get('.pagination-options-menu-disabled')
       .find('button[data-action="last"]')
       .then(button => expect(button).to.be.disabled);
-    cy.get('.pagination-options-menu-disabled > .pf-c-options-menu > .pf-c-options-menu__toggle')
-      .find('button')
-      .then(button => expect(button).to.be.disabled);
+    cy.get('.pagination-options-menu-disabled')
+      .find('.pf-c-options-menu__toggle')
+      .then(toggleButton => expect(toggleButton).to.be.disabled);
   });
 
   it('should be sticky when flag is present', () => {
@@ -58,7 +58,7 @@ describe('Pagination Demo Test', () => {
 
   it('Verify event handlers fire correctly', () => {
     cy.get('.pagination-options-menu-top')
-      .find('.pf-c-options-menu__toggle button')
+      .find('button.pf-c-options-menu__toggle')
       .then((toggleButton: JQuery<HTMLButtonElement>) => {
         cy.wrap(toggleButton).click();
         cy.get('.pf-c-options-menu.pf-m-expanded').should('exist');
@@ -142,7 +142,7 @@ describe('Pagination Demo Test', () => {
       .then((button: JQuery<HTMLButtonElement>) => {
         cy.wrap(button).click();
         cy.get('.pagination-options-menu-default-fullpage')
-          .find('.pf-c-options-menu__toggle button')
+          .find('button.pf-c-options-menu__toggle')
           .then((toggleButton: JQuery<HTMLButtonElement>) => {
             cy.wrap(toggleButton).click();
             cy.get('.pf-c-options-menu.pf-m-expanded').should('exist');

From e13c1ca8e328093304a2a5fe278c5a534246a33e Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 14 Apr 2022 13:13:23 -0400
Subject: [PATCH 4/7] Update to temporary opt-in approach

---
 .../components/Pagination/OptionsToggle.tsx   |  64 +-
 .../src/components/Pagination/Pagination.tsx  |   9 +-
 .../Pagination/PaginationOptionsMenu.tsx      |  15 +-
 .../__snapshots__/OptionsToggle.test.tsx.snap |  58 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 202 -----
 .../PaginationOptionsMenu.test.tsx.snap       |   6 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 820 ++++++++++--------
 7 files changed, 532 insertions(+), 642 deletions(-)
 delete mode 100644 packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap

diff --git a/packages/react-core/src/components/Pagination/OptionsToggle.tsx b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
index 8d3c26f19b0..1116a8b156f 100644
--- a/packages/react-core/src/components/Pagination/OptionsToggle.tsx
+++ b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
@@ -37,12 +37,14 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   onEnter?: () => void;
   /** Label for the English word "of" */
   ofWord?: string;
+  /** Component to be used for wrapping the toggle contents. */
+  component?: 'div' | 'button';
 }
 
 let toggleId = 0;
 export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   itemsTitle = 'items',
-  optionsToggle = 'Items per page',
+  optionsToggle,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   itemsPerPageTitle = 'Items per page',
   ofWord = 'of',
@@ -57,39 +59,49 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   isDisabled = false,
   parentRef = null,
   toggleTemplate: ToggleTemplate,
-  onEnter = null
-}: OptionsToggleProps) => (
-  <>
-    {showToggle && (
+  onEnter = null,
+  component = 'div'
+}: OptionsToggleProps) => {
+  const isDiv = component === 'div';
+  const toggleClasses = css(
+    styles.optionsMenuToggle,
+    isDisabled && styles.modifiers.disabled,
+    styles.modifiers.plain,
+    styles.modifiers.text
+  );
+
+  const template =
+    typeof ToggleTemplate === 'string' ? (
+      fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })
+    ) : (
+      <ToggleTemplate
+        firstIndex={firstIndex}
+        lastIndex={lastIndex}
+        ofWord={ofWord}
+        itemCount={itemCount}
+        itemsTitle={itemsTitle}
+      />
+    );
+
+  const dropdown = showToggle && (
+    <React.Fragment>
+      {isDiv && <span className={css(styles.optionsMenuToggleText)}>{template}</span>}
       <DropdownToggle
         onEnter={onEnter}
-        aria-label={optionsToggle}
+        aria-label={isDiv ? optionsToggle || 'Items per page' : optionsToggle}
         onToggle={onToggle}
         isDisabled={isDisabled || (itemCount && itemCount <= 0)}
         isOpen={isOpen}
         id={`${widgetId}-toggle-${toggleId++}`}
-        className={css(
-          styles.optionsMenuToggle,
-          isDisabled && styles.modifiers.disabled,
-          styles.modifiers.plain,
-          styles.modifiers.text
-        )}
+        className={isDiv ? styles.optionsMenuToggleButton : toggleClasses}
         parentRef={parentRef}
         aria-haspopup="listbox"
       >
-        {typeof ToggleTemplate === 'string' ? (
-          fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })
-        ) : (
-          <ToggleTemplate
-            firstIndex={firstIndex}
-            lastIndex={lastIndex}
-            ofWord={ofWord}
-            itemCount={itemCount}
-            itemsTitle={itemsTitle}
-          />
-        )}
+        {!isDiv && template}
       </DropdownToggle>
-    )}
-  </>
-);
+    </React.Fragment>
+  );
+
+  return isDiv ? <div className={toggleClasses}>{dropdown}</div> : dropdown;
+};
 OptionsToggle.displayName = 'OptionsToggle';
diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
index 926c2204446..8646315eb0c 100644
--- a/packages/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -141,6 +141,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
+  /** Component to be used for wrapping the toggle contents. */
+  component?: 'div' | 'button';
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {
@@ -177,7 +179,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
       toPreviousPage: 'Go to previous page',
       toLastPage: 'Go to last page',
       toNextPage: 'Go to next page',
-      optionsToggle: 'Items per page',
+      optionsToggle: '',
       currPage: 'Current page',
       paginationTitle: 'Pagination',
       ofWord: 'of'
@@ -197,7 +199,8 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
     onNextClick: () => undefined,
     onPageInput: () => undefined,
     onLastClick: () => undefined,
-    ouiaSafe: true
+    ouiaSafe: true,
+    component: 'div'
   };
 
   state = {
@@ -252,6 +255,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
       onLastClick,
       ouiaId,
       ouiaSafe,
+      component,
       ...props
     } = this.props;
     const dropDirection = dropDirectionProp || (variant === 'bottom' && !isStatic ? 'up' : 'down');
@@ -335,6 +339,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
           widgetId={widgetId}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
+          component={component}
         />
         <Navigation
           pagesTitle={titles.page}
diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
index 9bc46c467b0..5111215c8d6 100644
--- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
+++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -26,7 +26,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   perPageSuffix?: string;
   /** The type or title of the items being paginated */
   itemsTitle?: string;
-  /** The text to be displayed on the Options Toggle */
+  /** Accessible label for the Options Toggle */
   optionsToggle?: string;
   /** The total number of items being paginated */
   itemCount?: number;
@@ -46,6 +46,8 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of" */
   ofWord?: string;
+  /** Component to be used for wrapping the toggle contents. */
+  component?: 'div' | 'button';
 }
 
 interface PaginationOptionsMenuState {
@@ -63,7 +65,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
     perPageOptions: [] as PerPageOptions[],
     itemsPerPageTitle: 'Items per page',
     perPageSuffix: 'per page',
-    optionsToggle: 'Items per page',
+    optionsToggle: '',
     ofWord: 'of',
     perPage: 0,
     firstIndex: 0,
@@ -71,7 +73,8 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
     defaultToFullPage: false,
     itemsTitle: 'items',
     toggleTemplate: ToggleTemplate,
-    onPerPageSelect: () => null as any
+    onPerPageSelect: () => null as any,
+    component: 'div'
   };
 
   constructor(props: PaginationOptionsMenuProps) {
@@ -144,7 +147,8 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
       lastIndex,
       itemCount,
       itemsTitle,
-      ofWord
+      ofWord,
+      component
     } = this.props;
     const { isOpen } = this.state;
 
@@ -153,7 +157,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
         value={{
           id: widgetId,
           onSelect: this.onSelect,
-          toggleIndicatorClass: styles.optionsMenuToggleButtonIcon,
+          toggleIndicatorClass: component === 'div' ? styles.optionsMenuToggleButtonIcon : styles.optionsMenuToggleIcon,
           toggleTextClass: styles.optionsMenuToggleText,
           menuClass: styles.optionsMenuMenu,
           itemClass: styles.optionsMenuMenuItem,
@@ -184,6 +188,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
               toggleTemplate={toggleTemplate}
               parentRef={this.parentRef.current}
               isDisabled={isDisabled}
+              component={component}
             />
           }
           dropdownItems={this.renderItems()}
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
index 5c9b9236c94..0251e56a3fc 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
@@ -2,35 +2,41 @@
 
 exports[`OptionsToggle should match snapshot (auto-generated) 1`] = `
 <div>
-  <button
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-label="'Select'"
-    class="pf-c-dropdown__toggle pf-c-options-menu__toggle pf-m-plain pf-m-text"
-    data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-    data-ouia-component-type="PF4/DropdownToggle"
-    data-ouia-safe="true"
-    id="''-toggle-0"
-    type="button"
+  <div
+    class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
   >
-    
     <span
-      class=""
+      class="pf-c-options-menu__toggle-text"
+    />
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="'Select'"
+      class="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="''-toggle-0"
+      type="button"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 320 512"
-        width="1em"
+      <span
+        class=""
       >
-        <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>
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          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>
+    </button>
+  </div>
 </div>
 `;
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap
deleted file mode 100644
index 4cb5f2cfbd9..00000000000
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap
+++ /dev/null
@@ -1,202 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Pagination should match snapshot (auto-generated) 1`] = `
-<div>
-  <div
-    class="pf-c-pagination ''"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-1"
-    data-ouia-component-type="PF4/Pagination"
-    data-ouia-safe="true"
-    id="'pagination-options-menu'-0"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
-  >
-    <div
-      class="pf-c-pagination__total-items"
-    >
-      string
-    </div>
-    <div
-      class="pf-c-options-menu pf-m-top"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="'pagination-options-menu'-toggle-0"
-        type="button"
-      >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          string
-        </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
-    </div>
-    <nav
-      aria-label="Pagination"
-      class="pf-c-pagination__nav"
-    >
-      <div
-        class="pf-c-pagination__nav-control pf-m-first"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
-          data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-c-pagination__nav-control"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
-          data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-c-pagination__nav-page-select"
-      >
-        <input
-          aria-label="Current page"
-          class="pf-c-form-control"
-          disabled=""
-          max="1"
-          min="1"
-          type="number"
-          value="1"
-        />
-        <span
-          aria-hidden="true"
-        >
-          of
-           
-          1
-        </span>
-      </div>
-      <div
-        class="pf-c-pagination__nav-control"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
-          data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-3"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-c-pagination__nav-control pf-m-last"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
-          data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-4"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-            />
-          </svg>
-        </button>
-      </div>
-    </nav>
-    ReactNode
-  </div>
-</div>
-`;
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 53521992ce8..c657b4a112f 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
@@ -6,6 +6,10 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
     class="pf-c-options-menu pf-m-top"
     data-ouia-component-type="PF4/PaginationOptionsMenu"
     data-ouia-safe="true"
-  />
+  >
+    <div
+      class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+    />
+  </div>
 </div>
 `;
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 06e21811abb..82f1e98c3ff 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
@@ -20,40 +20,44 @@ exports[`Pagination component render custom pagination toggle 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-13"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
         >
           -9 - 10 - 40 - 
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-12"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -222,16 +226,8 @@ exports[`Pagination component render custom perPageOptions 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-9"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -245,24 +241,36 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-9"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -431,16 +439,8 @@ exports[`Pagination component render custom start end 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-11"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -454,24 +454,36 @@ exports[`Pagination component render custom start end 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-10"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -637,7 +649,11 @@ exports[`Pagination component render empty per page options 1`] = `
       class="pf-c-options-menu"
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
-    />
+    >
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      />
+    </div>
     <nav
       aria-label="Pagination"
       class="pf-c-pagination__nav"
@@ -805,16 +821,8 @@ exports[`Pagination component render last page 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-8"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -828,24 +836,36 @@ exports[`Pagination component render last page 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-8"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -1014,16 +1034,8 @@ exports[`Pagination component render limited number of pages 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-6"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1037,24 +1049,36 @@ exports[`Pagination component render limited number of pages 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-6"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -1214,16 +1238,8 @@ exports[`Pagination component render should render correctly bottom 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-1"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1237,24 +1253,36 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-1"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -1411,16 +1439,8 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-4"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1434,24 +1454,36 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-4"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -1620,16 +1652,8 @@ exports[`Pagination component render should render correctly compact 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-2"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1643,24 +1667,36 @@ exports[`Pagination component render should render correctly compact 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-2"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -1755,17 +1791,8 @@ exports[`Pagination component render should render correctly disabled 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-disabled pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        disabled=""
-        id="pagination-options-menu-toggle-5"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-disabled pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1779,24 +1806,37 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          disabled=""
+          id="pagination-options-menu-toggle-5"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -1968,16 +2008,8 @@ exports[`Pagination component render should render correctly sticky 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-3"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -1991,24 +2023,36 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-3"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -2177,16 +2221,8 @@ exports[`Pagination component render should render correctly top 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-0"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -2200,24 +2236,36 @@ exports[`Pagination component render should render correctly top 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-0"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -2386,16 +2434,8 @@ exports[`Pagination component render titles 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-12"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -2409,24 +2449,36 @@ exports[`Pagination component render titles 1`] = `
           </b>
            values
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-11"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -2595,16 +2647,8 @@ exports[`Pagination component render up drop direction 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-15"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-14"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -2618,24 +2662,36 @@ exports[`Pagination component render up drop direction 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-13"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"
@@ -2804,16 +2860,8 @@ exports[`Pagination component render zero results 1`] = `
       data-ouia-component-type="PF4/PaginationOptionsMenu"
       data-ouia-safe="true"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-label="Items per page"
-        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
-        data-ouia-component-type="PF4/DropdownToggle"
-        data-ouia-safe="true"
-        id="pagination-options-menu-toggle-7"
-        type="button"
+      <div
+        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
       >
         <span
           class="pf-c-options-menu__toggle-text"
@@ -2827,24 +2875,36 @@ exports[`Pagination component render zero results 1`] = `
           </b>
            
         </span>
-        <span
-          class="pf-c-options-menu__toggle-button-icon"
+        <button
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Items per page"
+          class="  pf-c-options-menu__toggle-button"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
+          data-ouia-component-type="PF4/DropdownToggle"
+          data-ouia-safe="true"
+          id="pagination-options-menu-toggle-7"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            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>
-      </button>
+          <span
+            class="pf-c-options-menu__toggle-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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>
+        </button>
+      </div>
     </div>
     <nav
       aria-label="Pagination"

From a3183c5ab9faa263ba3e5c17a9d73cbe53de7b0d Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 14 Apr 2022 13:19:41 -0400
Subject: [PATCH 5/7] Update examples to use button for component prop

---
 .../src/components/Pagination/examples/Pagination.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Pagination/examples/Pagination.md b/packages/react-core/src/components/Pagination/examples/Pagination.md
index 9db34f98bd7..7d5393d3254 100644
--- a/packages/react-core/src/components/Pagination/examples/Pagination.md
+++ b/packages/react-core/src/components/Pagination/examples/Pagination.md
@@ -38,6 +38,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        component="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -77,6 +78,7 @@ class PaginationBottom extends React.Component {
   render() {
     return (
       <Pagination
+        component="button"
         itemCount={333}
         widgetId="pagination-options-menu-bottom"
         perPage={this.state.perPage}
@@ -89,6 +91,7 @@ class PaginationBottom extends React.Component {
   }
 }
 ```
+
 ### Indeterminate
 
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
@@ -106,6 +109,7 @@ PaginationIndeterminate = () => {
 
   return (
     <Pagination
+      component="button"
       toggleTemplate={({ firstIndex, lastIndex }) => (
         <React.Fragment>
           <b>
@@ -122,7 +126,7 @@ PaginationIndeterminate = () => {
       onPerPageSelect={onPerPageSelect}
     />
   );
-}
+};
 ```
 
 ### Disabled
@@ -155,6 +159,7 @@ class PaginationDisabled extends React.Component {
   render() {
     return (
       <Pagination
+        component="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -198,6 +203,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        component="button"
         itemCount={0}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -240,6 +246,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        component="button"
         itemCount={15}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -282,6 +289,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        component="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -335,6 +343,7 @@ class PaginationSticky extends React.Component {
         {this.state.isTopSticky && (
           <React.Fragment>
             <Pagination
+              component="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}
@@ -368,6 +377,7 @@ class PaginationSticky extends React.Component {
               ))}
             </Gallery>
             <Pagination
+              component="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}

From 1bf45a43e7287df01811e978254070e9cb85a306 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 14 Apr 2022 15:36:41 -0400
Subject: [PATCH 6/7] Add separate tests for button variant

---
 .../Pagination/__tests__/Pagination.test.tsx  |  10 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 209 ++++++++++++++++++
 .../cypress/integration/pagination.spec.ts    |  10 +-
 .../paginationbuttonvariant.spec.ts           | 162 ++++++++++++++
 .../demo-app-ts/src/Demos.ts                  |   5 +
 .../PaginationButtonVariantDemo.tsx           | 160 ++++++++++++++
 .../demo-app-ts/src/components/demos/index.ts |   1 +
 7 files changed, 548 insertions(+), 9 deletions(-)
 create mode 100644 packages/react-integration/cypress/integration/paginationbuttonvariant.spec.ts
 create mode 100644 packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx

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 de4b8b4686b..6e274a8d4a2 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
+++ b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
@@ -75,10 +75,7 @@ describe('Pagination', () => {
 
     test('custom pagination toggle', () => {
       const { asFragment } = render(
-        <Pagination
-          itemCount={40}
-          toggleTemplate={'${firstIndex} - ${lastIndex} - ${itemCount} - ${itemsTitle}'}
-        />
+        <Pagination itemCount={40} toggleTemplate={'${firstIndex} - ${lastIndex} - ${itemCount} - ${itemsTitle}'} />
       );
       expect(asFragment()).toMatchSnapshot();
     });
@@ -110,6 +107,11 @@ describe('Pagination', () => {
       render(<Pagination toggleTemplate={'I am a string'} />);
       expect(screen.getAllByText('I am a string')[0]).toBeInTheDocument();
     });
+
+    test('should render correctly button variant', () => {
+      const { asFragment } = render(<Pagination component="button" itemCount={20} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
   });
 
   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 82f1e98c3ff..a89f6ec9472 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
@@ -1625,6 +1625,215 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
 </DocumentFragment>
 `;
 
+exports[`Pagination component render should render correctly button variant 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-pagination"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-17"
+    data-ouia-component-type="PF4/Pagination"
+    data-ouia-safe="true"
+    id="pagination-options-menu-18"
+    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+  >
+    <div
+      class="pf-c-pagination__total-items"
+    >
+      <b>
+        -9 - 10
+      </b>
+       of 
+      <b>
+        20
+      </b>
+       
+    </div>
+    <div
+      class="pf-c-options-menu"
+      data-ouia-component-type="PF4/PaginationOptionsMenu"
+      data-ouia-safe="true"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label=""
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-18"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-17"
+        type="button"
+      >
+        <span
+          class="pf-c-options-menu__toggle-text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-c-options-menu__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            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>
+      </button>
+    </div>
+    <nav
+      aria-label="Pagination"
+      class="pf-c-pagination__nav"
+    >
+      <div
+        class="pf-c-pagination__nav-control pf-m-first"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to first page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="first"
+          data-ouia-component-id="OUIA-Generated-Button-plain-71"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to previous page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="previous"
+          data-ouia-component-id="OUIA-Generated-Button-plain-72"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-page-select"
+      >
+        <input
+          aria-label="Current page"
+          class="pf-c-form-control"
+          max="2"
+          min="1"
+          type="number"
+          value="1"
+        />
+        <span
+          aria-hidden="true"
+        >
+          of 2
+        </span>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to next page"
+          class="pf-c-button pf-m-plain"
+          data-action="next"
+          data-ouia-component-id="OUIA-Generated-Button-plain-73"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control pf-m-last"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to last page"
+          class="pf-c-button pf-m-plain"
+          data-action="last"
+          data-ouia-component-id="OUIA-Generated-Button-plain-74"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+    </nav>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Pagination component render should render correctly compact 1`] = `
 <DocumentFragment>
   <div
diff --git a/packages/react-integration/cypress/integration/pagination.spec.ts b/packages/react-integration/cypress/integration/pagination.spec.ts
index fef085a5b2a..91b37f92cb2 100644
--- a/packages/react-integration/cypress/integration/pagination.spec.ts
+++ b/packages/react-integration/cypress/integration/pagination.spec.ts
@@ -19,9 +19,9 @@ describe('Pagination Demo Test', () => {
     cy.get('.pagination-options-menu-disabled')
       .find('button[data-action="last"]')
       .then(button => expect(button).to.be.disabled);
-    cy.get('.pagination-options-menu-disabled')
-      .find('.pf-c-options-menu__toggle')
-      .then(toggleButton => expect(toggleButton).to.be.disabled);
+    cy.get('.pagination-options-menu-disabled > .pf-c-options-menu > .pf-c-options-menu__toggle')
+      .find('button')
+      .then(button => expect(button).to.be.disabled);
   });
 
   it('should be sticky when flag is present', () => {
@@ -58,7 +58,7 @@ describe('Pagination Demo Test', () => {
 
   it('Verify event handlers fire correctly', () => {
     cy.get('.pagination-options-menu-top')
-      .find('button.pf-c-options-menu__toggle')
+      .find('.pf-c-options-menu__toggle button')
       .then((toggleButton: JQuery<HTMLButtonElement>) => {
         cy.wrap(toggleButton).click();
         cy.get('.pf-c-options-menu.pf-m-expanded').should('exist');
@@ -142,7 +142,7 @@ describe('Pagination Demo Test', () => {
       .then((button: JQuery<HTMLButtonElement>) => {
         cy.wrap(button).click();
         cy.get('.pagination-options-menu-default-fullpage')
-          .find('button.pf-c-options-menu__toggle')
+          .find('.pf-c-options-menu__toggle button')
           .then((toggleButton: JQuery<HTMLButtonElement>) => {
             cy.wrap(toggleButton).click();
             cy.get('.pf-c-options-menu.pf-m-expanded').should('exist');
diff --git a/packages/react-integration/cypress/integration/paginationbuttonvariant.spec.ts b/packages/react-integration/cypress/integration/paginationbuttonvariant.spec.ts
new file mode 100644
index 00000000000..a33019de559
--- /dev/null
+++ b/packages/react-integration/cypress/integration/paginationbuttonvariant.spec.ts
@@ -0,0 +1,162 @@
+describe('Pagination Button Variant Demo Test', () => {
+  it('Navigate to Pagination section', () => {
+    cy.visit('http://localhost:3000/pagination-button-variant-demo-nav-link');
+  });
+
+  it('should be disabled when flag is present on button variant', () => {
+    cy.get('.pagination-options-menu-disabled')
+      .find('.pf-c-options-menu__toggle-text')
+      .then(toggleText => expect(toggleText).to.have.text('1 - 20 of 523 '));
+    cy.get('.pagination-options-menu-disabled')
+      .find('button[data-action="first"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('.pagination-options-menu-disabled')
+      .find('button[data-action="previous"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('.pagination-options-menu-disabled')
+      .find('button[data-action="next"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('.pagination-options-menu-disabled')
+      .find('button[data-action="last"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('.pagination-options-menu-disabled')
+      .find('.pf-c-options-menu__toggle')
+      .then(toggleButton => expect(toggleButton).to.be.disabled);
+  });
+
+  it('should be sticky when flag is present on button variant', () => {
+    cy.get('.pagination-options-menu-sticky').should('have.class', 'pf-m-sticky');
+  });
+
+  it('Verify initial state on button variant', () => {
+    cy.get('.pf-c-pagination').should('have.length', 5);
+    cy.get('.pagination-options-menu-bottom.pf-c-pagination.pf-m-bottom').should('exist');
+    cy.get('.pagination-options-menu-top')
+      .find('.pf-c-options-menu__toggle-text')
+      .then(toggleText => expect(toggleText).to.have.text('1 - 20 of 523 '));
+
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="first"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="previous"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="next"]')
+      .then(button => expect(button).not.to.be.disabled);
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="last"]')
+      .then(button => expect(button).not.to.be.disabled);
+
+    cy.get('.pagination-options-menu-top')
+      .find('.pf-c-pagination__nav-page-select input')
+      .then(input => expect(input).to.have.value('1'));
+    cy.get('.pagination-options-menu-top')
+      .find('.pf-c-pagination__nav-page-select')
+      .then(navPageSelect => expect(navPageSelect).to.have.text('of 27'));
+  });
+
+  it('Verify event handlers fire correctly on button variant', () => {
+    cy.get('.pagination-options-menu-top')
+      .find('button.pf-c-options-menu__toggle')
+      .then((toggleButton: JQuery<HTMLButtonElement>) => {
+        cy.wrap(toggleButton).click();
+        cy.get('.pf-c-options-menu.pf-m-expanded').should('exist');
+        cy.get('button[data-action="per-page-10"]').then((firstMenuItem: JQuery<HTMLButtonElement>) => {
+          cy.wrap(firstMenuItem).click();
+          cy.get('.pf-c-options-menu.pf-m-expanded').should('not.exist');
+          cy.get('.pagination-options-menu-top')
+            .find('.pf-c-options-menu__toggle-text')
+            .then(toggleText => expect(toggleText).to.have.text('1 - 10 of 523 '));
+          cy.get('.pagination-options-menu-top')
+            .find('.pf-c-pagination__nav-page-select')
+            .then(navPageSelect => expect(navPageSelect).to.have.text('of 53'));
+
+          cy.get('.pagination-options-menu-bottom')
+            .find('.pf-c-options-menu__toggle-text')
+            .then(toggleText => expect(toggleText).to.have.text('1 - 10 of 523 '));
+          cy.get('.pagination-options-menu-bottom')
+            .find('.pf-c-pagination__nav-page-select')
+            .then(navPageSelect => expect(navPageSelect).to.have.text('of 53'));
+        });
+      });
+
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="next"]')
+      .then((button: JQuery<HTMLButtonElement>) => {
+        cy.wrap(button).click();
+        cy.get('.pagination-options-menu-top')
+          .find('button[data-action="first"]')
+          .then(firstButton => expect(firstButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-top')
+          .find('button[data-action="previous"]')
+          .then(previousButton => expect(previousButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-top')
+          .find('.pf-c-options-menu__toggle-text')
+          .then(toggleText => expect(toggleText).to.have.text('11 - 20 of 523 '));
+        cy.get('.pagination-options-menu-top')
+          .find('.pf-c-pagination__nav-page-select input')
+          .then(input => expect(input).to.have.value('2'));
+      });
+
+    cy.get('.pagination-options-menu-bottom')
+      .find('button[data-action="next"]')
+      .then((button: JQuery<HTMLButtonElement>) => {
+        cy.wrap(button).click();
+        cy.get('.pagination-options-menu-bottom')
+          .find('button[data-action="first"]')
+          .then(firstButton => expect(firstButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-bottom')
+          .find('button[data-action="previous"]')
+          .then(previousButton => expect(previousButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-bottom')
+          .find('.pf-c-options-menu__toggle-text')
+          .then(toggleText => expect(toggleText).to.have.text('11 - 20 of 523 '));
+        cy.get('.pagination-options-menu-bottom')
+          .find('.pf-c-pagination__nav-page-select input')
+          .then(input => expect(input).to.have.value('2'));
+      });
+
+    cy.get('.pagination-options-menu-default-fullpage')
+      .find('button[data-action="next"]')
+      .then((button: JQuery<HTMLButtonElement>) => {
+        cy.wrap(button).click();
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('button[data-action="first"]')
+          .then(firstButton => expect(firstButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('button[data-action="previous"]')
+          .then(previousButton => expect(previousButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('.pf-c-options-menu__toggle-text')
+          .then(toggleText => expect(toggleText).to.have.text('11 - 20 of 523 '));
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('.pf-c-pagination__nav-page-select input')
+          .then(input => expect(input).to.have.value('2'));
+      });
+  });
+
+  it('Verify defaultToFullPage works correctly on button variant', () => {
+    cy.get('.pagination-options-menu-default-fullpage')
+      .find('button[data-action="last"]')
+      .then((button: JQuery<HTMLButtonElement>) => {
+        cy.wrap(button).click();
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('button.pf-c-options-menu__toggle')
+          .then((toggleButton: JQuery<HTMLButtonElement>) => {
+            cy.wrap(toggleButton).click();
+            cy.get('.pf-c-options-menu.pf-m-expanded').should('exist');
+            cy.get('button[data-action="per-page-100"]').then((lastMenuItem: JQuery<HTMLButtonElement>) => {
+              cy.wrap(lastMenuItem).click();
+              cy.get('.pf-c-options-menu.pf-m-expanded').should('not.exist');
+              cy.get('.pagination-options-menu-default-fullpage')
+                .find('.pf-c-options-menu__toggle-text')
+                .then(toggleText => expect(toggleText).to.have.text('401 - 500 of 523 '));
+              cy.get('.pagination-options-menu-default-fullpage')
+                .find('.pf-c-form-control')
+                .then(currentPage => expect(currentPage).to.have.value('5'));
+            });
+          });
+      });
+  });
+});
diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts
index ef1c2c68316..7e460ad6d02 100644
--- a/packages/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/react-integration/demo-app-ts/src/Demos.ts
@@ -285,6 +285,11 @@ export const Demos: DemoInterface[] = [
     name: 'Page Managed Sidebar Closed Demo',
     componentType: Examples.PageManagedSidebarClosedDemo
   },
+  {
+    id: 'pagination-button-variant-demo',
+    name: 'Pagination Button Variant Demo',
+    componentType: Examples.PaginationButtonVariantDemo
+  },
   {
     id: 'pagination-demo',
     name: 'Pagination Demo',
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx
new file mode 100644
index 00000000000..356973742b5
--- /dev/null
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import { Pagination, PaginationVariant, Stack, StackItem, Title } from '@patternfly/react-core';
+
+interface OptionsMenuDemoState {
+  topPage: number;
+  bottomPage: number;
+  defaultFullPage: number;
+  perPage: number;
+}
+
+export class PaginationButtonVariantDemo extends React.Component<
+  React.HTMLProps<HTMLDivElement>,
+  OptionsMenuDemoState
+> {
+  static displayName = 'PaginationDemo';
+  state = {
+    topPage: 1,
+    bottomPage: 1,
+    defaultFullPage: 1,
+    perPage: 20
+  };
+
+  onSetTopPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {
+    this.setState({
+      topPage: pageNumber
+    });
+  };
+
+  onSetBottomPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {
+    this.setState({
+      bottomPage: pageNumber
+    });
+  };
+
+  onSetDefaultPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {
+    this.setState({
+      defaultFullPage: pageNumber
+    });
+  };
+
+  onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, perPage: number) => {
+    this.setState({
+      perPage
+    });
+  };
+
+  onDefaultToFullPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    perPage: number,
+    pageNumber: number
+  ) => {
+    this.setState({
+      perPage,
+      defaultFullPage: pageNumber
+    });
+  };
+
+  renderPaginationButtonVariant() {
+    return (
+      <StackItem isFilled={false}>
+        <Title headingLevel="h2" size="2xl">
+          Pagination
+        </Title>
+        <React.Fragment>
+          <Pagination
+            component="button"
+            itemCount={523}
+            perPage={this.state.perPage}
+            page={this.state.topPage}
+            onSetPage={this.onSetTopPage}
+            widgetId="pagination-options-menu-top"
+            className="pagination-options-menu-top"
+            onPerPageSelect={this.onPerPageSelect}
+          />
+          <Pagination
+            component="button"
+            itemCount={523}
+            widgetId="pagination-options-menu-bottom"
+            className="pagination-options-menu-bottom"
+            perPage={this.state.perPage}
+            page={this.state.bottomPage}
+            variant={PaginationVariant.bottom}
+            onSetPage={this.onSetBottomPage}
+            onPerPageSelect={this.onPerPageSelect}
+          />
+          <Pagination
+            component="button"
+            itemCount={523}
+            widgetId="pagination-options-menu-default-fullpage"
+            className="pagination-options-menu-default-fullpage"
+            perPage={this.state.perPage}
+            page={this.state.defaultFullPage}
+            variant={PaginationVariant.bottom}
+            onSetPage={this.onSetDefaultPage}
+            onPerPageSelect={this.onDefaultToFullPerPageSelect}
+            defaultToFullPage
+          />
+        </React.Fragment>
+      </StackItem>
+    );
+  }
+
+  renderDisabledButtonVariant() {
+    return (
+      <StackItem isFilled={false}>
+        <Title headingLevel="h2" size="2xl">
+          Disabled state
+        </Title>
+        <React.Fragment>
+          <Pagination
+            component="button"
+            itemCount={523}
+            perPage={this.state.perPage}
+            page={this.state.topPage}
+            onSetPage={this.onSetTopPage}
+            widgetId="pagination-options-menu-disabled"
+            className="pagination-options-menu-disabled"
+            onPerPageSelect={this.onPerPageSelect}
+            isDisabled
+          />
+        </React.Fragment>
+      </StackItem>
+    );
+  }
+
+  renderStickyButtonVariant() {
+    return (
+      <StackItem isFilled={false}>
+        <Title headingLevel="h2" size="2xl">
+          Sticky state
+        </Title>
+        <React.Fragment>
+          <Pagination
+            component="button"
+            isSticky
+            itemCount={523}
+            perPage={this.state.perPage}
+            page={this.state.topPage}
+            onSetPage={this.onSetTopPage}
+            widgetId="pagination-options-menu-sticky"
+            className="pagination-options-menu-sticky"
+            onPerPageSelect={this.onPerPageSelect}
+          />
+        </React.Fragment>
+      </StackItem>
+    );
+  }
+
+  render() {
+    return (
+      <Stack hasGutter>
+        {this.renderPaginationButtonVariant()}
+        {this.renderDisabledButtonVariant()}
+        {this.renderStickyButtonVariant()}
+      </Stack>
+    );
+  }
+}
+
+export default PaginationButtonVariantDemo;
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
index 6f67e7f41e5..f6f8d58fac4 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -55,6 +55,7 @@ export * from './OptionsMenuDemo/OptionsMenuDemo';
 export * from './OverflowMenuDemo/OverflowMenuDemo';
 export * from './PageDemo/PageDemo';
 export * from './PageDemo/PageManagedSidebarClosedDemo';
+export * from './PaginationDemo/PaginationButtonVariantDemo';
 export * from './PaginationDemo/PaginationDemo';
 export * from './PopoverDemo/PopoverDemo';
 export * from './RadioDemo/RadioDemo';

From 830b583c6dee7e0a463ffed134c8e510b9598664 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 14 Apr 2022 17:21:40 -0400
Subject: [PATCH 7/7] Update prop name and descriptions

---
 .../components/Pagination/OptionsToggle.tsx   | 22 +++++++------
 .../src/components/Pagination/Pagination.tsx  | 18 ++++++-----
 .../Pagination/PaginationOptionsMenu.tsx      | 31 ++++++++++---------
 .../Pagination/__tests__/Pagination.test.tsx  |  2 +-
 .../Pagination/examples/Pagination.md         | 18 +++++------
 .../PaginationButtonVariantDemo.tsx           | 10 +++---
 6 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/packages/react-core/src/components/Pagination/OptionsToggle.tsx b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
index 1116a8b156f..43c02e56f1a 100644
--- a/packages/react-core/src/components/Pagination/OptionsToggle.tsx
+++ b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
@@ -9,9 +9,9 @@ import { DropdownToggle } from '../Dropdown';
 export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   /** The type or title of the items being paginated */
   itemsTitle?: string;
-  /** Accessible label for the Options Toggle */
+  /** Accessible label for the options toggle */
   optionsToggle?: string;
-  /** The Title of the Pagination Options Menu */
+  /** The title of the pagination options menu */
   itemsPerPageTitle?: string;
   /** The first index of the items being paginated */
   firstIndex?: number;
@@ -19,15 +19,15 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   lastIndex?: number;
   /** The total number of items being paginated */
   itemCount?: number;
-  /** Id added to the title of the Pagination Options Menu */
+  /** Id added to the title of the pagination options menu */
   widgetId?: string;
   /** showToggle */
   showToggle?: boolean;
-  /** Event function that fires when user clicks the Options Menu toggle */
+  /** Event function that fires when user clicks the options menu toggle */
   onToggle?: (isOpen: boolean) => void;
-  /** Flag indicating if the Options Menu dropdown is open or not */
+  /** Flag indicating if the options menu dropdown is open or not */
   isOpen?: boolean;
-  /** Flag indicating if the Options Menu is disabled */
+  /** Flag indicating if the options menu is disabled */
   isDisabled?: boolean;
   /** */
   parentRef?: HTMLElement;
@@ -37,8 +37,10 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   onEnter?: () => void;
   /** Label for the English word "of" */
   ofWord?: string;
-  /** Component to be used for wrapping the toggle contents. */
-  component?: 'div' | 'button';
+  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
+   * all of the toggle text to be clickable.
+   */
+  perPageComponent?: 'div' | 'button';
 }
 
 let toggleId = 0;
@@ -60,9 +62,9 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   parentRef = null,
   toggleTemplate: ToggleTemplate,
   onEnter = null,
-  component = 'div'
+  perPageComponent = 'div'
 }: OptionsToggleProps) => {
-  const isDiv = component === 'div';
+  const isDiv = perPageComponent === 'div';
   const toggleClasses = css(
     styles.optionsMenuToggle,
     isDisabled && styles.modifiers.disabled,
diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
index 8646315eb0c..ef7ff8e3c18 100644
--- a/packages/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -48,9 +48,9 @@ export interface PaginationTitles {
   pages?: string;
   /** The type or title of the items being paginated */
   items?: string;
-  /** The Title of the Pagination Options Menu */
+  /** The title of the pagination options menu */
   itemsPerPage?: string;
-  /** The suffix to be displayed after each option on the Options Menu dropdown */
+  /** The suffix to be displayed after each option on the options menu dropdown */
   perPageSuffix?: string;
   /** Accessible label for the button which moves to the first page */
   toFirstPage?: string;
@@ -60,7 +60,7 @@ export interface PaginationTitles {
   toLastPage?: string;
   /** Accessible label for the button which moves to the next page */
   toNextPage?: string;
-  /** Accessible label for the Options Toggle */
+  /** Accessible label for the options toggle */
   optionsToggle?: string;
   /** Accessible label for the input displaying the current page */
   currPage?: string;
@@ -141,8 +141,10 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
-  /** Component to be used for wrapping the toggle contents. */
-  component?: 'div' | 'button';
+  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
+   * all of the toggle text to be clickable.
+   */
+  perPageComponent?: 'div' | 'button';
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {
@@ -200,7 +202,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
     onPageInput: () => undefined,
     onLastClick: () => undefined,
     ouiaSafe: true,
-    component: 'div'
+    perPageComponent: 'div'
   };
 
   state = {
@@ -255,7 +257,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
       onLastClick,
       ouiaId,
       ouiaSafe,
-      component,
+      perPageComponent,
       ...props
     } = this.props;
     const dropDirection = dropDirectionProp || (variant === 'bottom' && !isStatic ? 'up' : 'down');
@@ -339,7 +341,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
           widgetId={widgetId}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
-          component={component}
+          perPageComponent={perPageComponent}
         />
         <Navigation
           pagesTitle={titles.page}
diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
index 5111215c8d6..2f5d977c909 100644
--- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
+++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -8,25 +8,25 @@ import { ToggleTemplateProps, ToggleTemplate } from './ToggleTemplate';
 import { PerPageOptions, OnPerPageSelect } from './Pagination';
 
 export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivElement> {
-  /** Custom class name added to the Pagination Options Menu */
+  /** Custom class name added to the pagination options menu */
   className?: string;
-  /** Id added to the title of the Pagination Options Menu */
+  /** Id added to the title of the Pagination options menu */
   widgetId?: string;
-  /** Flag indicating if Pagination Options Menu is disabled */
+  /** Flag indicating if pagination options menu is disabled */
   isDisabled?: boolean;
-  /** Menu will open up or open down from the Options menu toggle */
+  /** Menu will open up or open down from the options menu toggle */
   dropDirection?: 'up' | 'down';
-  /** Array of titles and values which will be the options on the Options Menu dropdown */
+  /** Array of titles and values which will be the options on the options menu dropdown */
   perPageOptions?: PerPageOptions[];
-  /** The Title of the Pagination Options Menu */
+  /** The title of the pagination options menu */
   itemsPerPageTitle?: string;
   /** Current page number */
   page?: number;
-  /** The suffix to be displayed after each option on the Options Menu dropdown */
+  /** The suffix to be displayed after each option on the options menu dropdown */
   perPageSuffix?: string;
   /** The type or title of the items being paginated */
   itemsTitle?: string;
-  /** Accessible label for the Options Toggle */
+  /** Accessible label for the options toggle */
   optionsToggle?: string;
   /** The total number of items being paginated */
   itemCount?: number;
@@ -46,8 +46,10 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of" */
   ofWord?: string;
-  /** Component to be used for wrapping the toggle contents. */
-  component?: 'div' | 'button';
+  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
+   * all of the toggle text to be clickable.
+   */
+  perPageComponent?: 'div' | 'button';
 }
 
 interface PaginationOptionsMenuState {
@@ -74,7 +76,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
     itemsTitle: 'items',
     toggleTemplate: ToggleTemplate,
     onPerPageSelect: () => null as any,
-    component: 'div'
+    perPageComponent: 'div'
   };
 
   constructor(props: PaginationOptionsMenuProps) {
@@ -148,7 +150,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
       itemCount,
       itemsTitle,
       ofWord,
-      component
+      perPageComponent
     } = this.props;
     const { isOpen } = this.state;
 
@@ -157,7 +159,8 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
         value={{
           id: widgetId,
           onSelect: this.onSelect,
-          toggleIndicatorClass: component === 'div' ? styles.optionsMenuToggleButtonIcon : styles.optionsMenuToggleIcon,
+          toggleIndicatorClass:
+            perPageComponent === 'div' ? styles.optionsMenuToggleButtonIcon : styles.optionsMenuToggleIcon,
           toggleTextClass: styles.optionsMenuToggleText,
           menuClass: styles.optionsMenuMenu,
           itemClass: styles.optionsMenuMenuItem,
@@ -188,7 +191,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
               toggleTemplate={toggleTemplate}
               parentRef={this.parentRef.current}
               isDisabled={isDisabled}
-              component={component}
+              perPageComponent={perPageComponent}
             />
           }
           dropdownItems={this.renderItems()}
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 6e274a8d4a2..ba17f3b099e 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
+++ b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
@@ -109,7 +109,7 @@ describe('Pagination', () => {
     });
 
     test('should render correctly button variant', () => {
-      const { asFragment } = render(<Pagination component="button" itemCount={20} />);
+      const { asFragment } = render(<Pagination perPageComponent="button" itemCount={20} />);
       expect(asFragment()).toMatchSnapshot();
     });
   });
diff --git a/packages/react-core/src/components/Pagination/examples/Pagination.md b/packages/react-core/src/components/Pagination/examples/Pagination.md
index 7d5393d3254..f933a0292e8 100644
--- a/packages/react-core/src/components/Pagination/examples/Pagination.md
+++ b/packages/react-core/src/components/Pagination/examples/Pagination.md
@@ -38,7 +38,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
-        component="button"
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -78,7 +78,7 @@ class PaginationBottom extends React.Component {
   render() {
     return (
       <Pagination
-        component="button"
+        perPageComponent="button"
         itemCount={333}
         widgetId="pagination-options-menu-bottom"
         perPage={this.state.perPage}
@@ -109,7 +109,7 @@ PaginationIndeterminate = () => {
 
   return (
     <Pagination
-      component="button"
+      perPageComponent="button"
       toggleTemplate={({ firstIndex, lastIndex }) => (
         <React.Fragment>
           <b>
@@ -159,7 +159,7 @@ class PaginationDisabled extends React.Component {
   render() {
     return (
       <Pagination
-        component="button"
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -203,7 +203,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
-        component="button"
+        perPageComponent="button"
         itemCount={0}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -246,7 +246,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
-        component="button"
+        perPageComponent="button"
         itemCount={15}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -289,7 +289,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
-        component="button"
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -343,7 +343,7 @@ class PaginationSticky extends React.Component {
         {this.state.isTopSticky && (
           <React.Fragment>
             <Pagination
-              component="button"
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}
@@ -377,7 +377,7 @@ class PaginationSticky extends React.Component {
               ))}
             </Gallery>
             <Pagination
-              component="button"
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx
index 356973742b5..76d7a879074 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx
@@ -63,7 +63,7 @@ export class PaginationButtonVariantDemo extends React.Component<
         </Title>
         <React.Fragment>
           <Pagination
-            component="button"
+            perPageComponent="button"
             itemCount={523}
             perPage={this.state.perPage}
             page={this.state.topPage}
@@ -73,7 +73,7 @@ export class PaginationButtonVariantDemo extends React.Component<
             onPerPageSelect={this.onPerPageSelect}
           />
           <Pagination
-            component="button"
+            perPageComponent="button"
             itemCount={523}
             widgetId="pagination-options-menu-bottom"
             className="pagination-options-menu-bottom"
@@ -84,7 +84,7 @@ export class PaginationButtonVariantDemo extends React.Component<
             onPerPageSelect={this.onPerPageSelect}
           />
           <Pagination
-            component="button"
+            perPageComponent="button"
             itemCount={523}
             widgetId="pagination-options-menu-default-fullpage"
             className="pagination-options-menu-default-fullpage"
@@ -108,7 +108,7 @@ export class PaginationButtonVariantDemo extends React.Component<
         </Title>
         <React.Fragment>
           <Pagination
-            component="button"
+            perPageComponent="button"
             itemCount={523}
             perPage={this.state.perPage}
             page={this.state.topPage}
@@ -131,7 +131,7 @@ export class PaginationButtonVariantDemo extends React.Component<
         </Title>
         <React.Fragment>
           <Pagination
-            component="button"
+            perPageComponent="button"
             isSticky
             itemCount={523}
             perPage={this.state.perPage}