@patternfly/react-core 6.5.0-prerelease.9 → 6.5.1-prerelease.0

package/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`page group Verify basic render 1`] = `
+exports[`Verify basic render 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group"
@@ -10,7 +10,7 @@ exports[`page group Verify basic render 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify bottom shadow 1`] = `
+exports[`Verify bottom shadow 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-shadow-bottom"
@@ -20,7 +20,7 @@ exports[`page group Verify bottom shadow 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify bottom sticky 1`] = `
+exports[`Verify bottom sticky 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-sticky-bottom"
@@ -30,7 +30,7 @@ exports[`page group Verify bottom sticky 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify overflow scroll 1`] = `
+exports[`Verify overflow scroll 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-overflow-scroll"
@@ -42,7 +42,7 @@ exports[`page group Verify overflow scroll 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify top shadow 1`] = `
+exports[`Verify top shadow 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-shadow-top"
@@ -52,7 +52,7 @@ exports[`page group Verify top shadow 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify top sticky 1`] = `
+exports[`Verify top sticky 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-sticky-top"

package/src/components/Page/examples/Page.md

@@ -6,7 +6,7 @@ propComponents:
   ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
 
-import { useState } from 'react';
+import { useState, useLayoutEffect, useRef } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
@@ -20,7 +20,7 @@ A page will typically contain the following components:
 
 The `<MastheadMain>` component includes the smaller area that typically contains the `<MastheadToggle>` and a `<MastheadLogo>`. `<MastheadContent>` represents the main portion of the masthead, and will typically contain a `<Toolbar>` or other menu-like components, like a `<Dropdown>`.
 
-  - Mastheads contain a `<MastheadMain>` component, which includes the `<MastheadToggle>`, a `<MastheadLogo>`,  and the page's toolbar (via `<MastheadContent>`.) The `<MastheadToggle>` component contains a `<PageToggleButton>`, and the `<MastheadLogo>` component contains a `<MastheadBrand>`. 
+- Mastheads contain a `<MastheadMain>` component, which includes the `<MastheadToggle>`, a `<MastheadLogo>`, and the page's toolbar (via `<MastheadContent>`.) The `<MastheadToggle>` component contains a `<PageToggleButton>`, and the `<MastheadLogo>` component contains a `<MastheadBrand>`.
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
@@ -123,3 +123,21 @@ The content in this example is placed in a card to better illustrate how the sec
 ```ts file="./PageCenteredSection.tsx"
 
 ```
+
+### Plain sections and groups
+
+To remove the default background color from a page section or group, use the `isPlain` property on `<PageSection>` or `<PageGroup>` components.
+
+```ts file="./PagePlainSections.tsx"
+
+```
+
+### Dynamic sticky section
+
+A page section may be made sticky with separate control of its sticky positioning and stuck styling using the `stickyBase` and `isStickyStuck` properties. The `stickyBase` property accepts a value of `"top"` or `"bottom"` and applies the base sticky positioning in the given direction. The `isStickyStuck` property applies visual "stuck" styling such as a background, box shadow, and border, and should be toggled based on the scroll position of the scroll parent container.
+
+In this example, a scroll event listener on the scroll parent container toggles `isStickyStuck` when `scrollTop > 0`, so the stuck styling appears only when the content is scrolled.
+
+```ts file="./PageDynamicStickySection.tsx"
+
+```

package/src/components/Page/examples/PageDynamicStickySection.tsx

@@ -0,0 +1,108 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+import {
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  PageSection,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  Breadcrumb,
+  BreadcrumbItem,
+  Content
+} from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  shouldTrack: boolean;
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
+
+export const PageDynamicStickySection: React.FunctionComponent = () => {
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });
+
+  const headerToolbar = (
+    <Toolbar id="dynamic-sticky-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>header-tools</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  return (
+    <Page masthead={masthead}>
+      <div ref={scrollParentRef} style={{ overflowY: 'auto', height: '100%' }}>
+        <PageSection type="breadcrumb" stickyBase="top" isStickyStuck={isStickyStuck}>
+          <Breadcrumb>
+            <BreadcrumbItem>Section home</BreadcrumbItem>
+            <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+            <BreadcrumbItem to="#" isActive>
+              Section landing
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </PageSection>
+        <PageSection>
+          <Content>
+            <h1>Main title</h1>
+            <p>
+              Scroll the container to see the breadcrumb section above dynamically apply its stuck styling. The section
+              uses <code>stickyBase=&quot;top&quot;</code> to remain fixed at the top of the scroll parent, and{' '}
+              <code>isStickyStuck</code> is toggled via a scroll event listener to apply visual styling when the section
+              is no longer at the top edge.
+            </p>
+          </Content>
+        </PageSection>
+        {Array.from({ length: 30 }, (_, i) => (
+          <PageSection key={i} variant={i % 2 === 0 ? 'default' : 'secondary'}>
+            <Content>
+              <p>{`Section ${i + 1} content`}</p>
+            </Content>
+          </PageSection>
+        ))}
+      </div>
+    </Page>
+  );
+};

package/src/components/Page/examples/PagePlainSections.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import {
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  PageSidebar,
+  PageSidebarBody,
+  PageSection,
+  PageGroup,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+
+export const PagePlainSections: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const headerToolbar = (
+    <Toolbar id="plain-sections-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>header-tools</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            aria-label="Plain sections example navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="plain-sections-nav-toggle"
+            isHamburgerButton
+          />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="plain-sections-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page masthead={masthead} sidebar={sidebar}>
+      <PageSection isPlain aria-label="Plain section example">
+        <h2>Plain PageSection</h2>
+        <p>
+          This section uses <code>isPlain</code> to apply plain styling with no background color.
+        </p>
+      </PageSection>
+      <PageSection aria-label="Default section example">
+        <h2>Default PageSection</h2>
+        <p>This section has the default styling with a background color.</p>
+      </PageSection>
+      <PageGroup isPlain>
+        <PageSection aria-label="Section in plain group">
+          <h2>PageSection inside Plain PageGroup</h2>
+          <p>
+            This section is inside a PageGroup with <code>isPlain</code> applied.
+          </p>
+        </PageSection>
+        <PageSection aria-label="Another section in plain group">
+          <h2>Another Section in Plain Group</h2>
+          <p>Both sections are grouped with plain styling.</p>
+        </PageSection>
+      </PageGroup>
+      <PageSection variant="secondary" aria-label="Secondary variant section">
+        <h2>Secondary Variant Section</h2>
+        <p>This section uses the secondary variant for contrast.</p>
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Pagination/Pagination.tsx

@@ -125,8 +125,14 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   isCompact?: boolean;
   /** Flag indicating if pagination should not be sticky on mobile. */
   isStatic?: boolean;
-  /** Flag indicating if pagination should stick to its position (based on variant). */
+  /** Flag indicating if pagination should stick to its position (based on variant). For dynamic sticky control, use isStickyBase
+   * and isStickyStuck instead.
+   */
   isSticky?: boolean;
+  /** @beta Flag indicating the pagination should have sticky positioning relative to its container. */
+  isStickyBase?: boolean;
+  /** @beta Flag indicating the pagination should have stuck styling, when the pagination is not at the top (for top variant) or bottom (for bottom variant) of the scroll container. */
+  isStickyStuck?: boolean;
   /** Total number of items. */
   itemCount?: number;
   /** Last index of items on current page. */
@@ -191,8 +197,10 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   variant = PaginationVariant.top,
   isDisabled = false,
   isCompact = false,
-  isSticky = false,
   isStatic = false,
+  isSticky = false,
+  isStickyBase = false,
+  isStickyStuck = false,
   dropDirection: dropDirectionProp,
   toggleTemplate,
   perPage = defaultPerPageOptions[0].value,
@@ -290,7 +298,9 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         usePageInsets && styles.modifiers.pageInsets,
         formatBreakpointMods(inset, styles),
         isStatic && styles.modifiers.static,
-        isSticky && styles.modifiers.sticky,
+        isSticky && !isStickyBase && !isStickyStuck && styles.modifiers.sticky,
+        isStickyBase && styles.modifiers.stickyBase,
+        isStickyStuck && styles.modifiers.stickyStuck,
         className
       )}
       {...(widgetId && { id: `${widgetId}-${variant}-pagination` })}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         aria-label="Go to first page"
         class="pf-v6-c-button pf-m-plain"
         data-action="first"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -33,12 +33,24 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            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
+              class="pf-v6-icon-default"
+              viewBox="0 0 448 512"
+            >
+              <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>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M15.707 28.293a.999.999 0 1 1-1.414 1.414L1.646 17.061a1.501 1.501 0 0 1 0-2.121L14.293 2.293a.999.999 0 1 1 1.414 1.414L3.414 16l12.293 12.293ZM17.414 16 29.707 3.707a.999.999 0 1 0-1.414-1.414L15.647 14.939a1.501 1.501 0 0 0 0 2.121l12.646 12.646a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L17.414 15.999Z"
+              />
+            </svg>
           </svg>
         </span>
       </button>
@@ -50,7 +62,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         aria-label="Go to previous page"
         class="pf-v6-c-button pf-m-plain"
         data-action="previous"
-        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -64,12 +76,24 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            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
+              class="pf-v6-icon-default"
+              viewBox="0 0 256 512"
+            >
+              <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>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M21 30a.997.997 0 0 1-.707-.293L7.647 17.061a1.501 1.501 0 0 1 0-2.121L20.293 2.293a.999.999 0 1 1 1.414 1.414L9.414 16l12.293 12.293A.999.999 0 0 1 21 30Z"
+              />
+            </svg>
           </svg>
         </span>
       </button>
@@ -83,7 +107,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         <input
           aria-invalid="false"
           aria-label="Current page"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           max="0"
@@ -100,7 +124,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         aria-label="Go to next page"
         class="pf-v6-c-button pf-m-plain"
         data-action="next"
-        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -114,12 +138,24 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            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
+              class="pf-v6-icon-default"
+              viewBox="0 0 256 512"
+            >
+              <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>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+              />
+            </svg>
           </svg>
         </span>
       </button>
@@ -131,7 +167,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         aria-label="Go to last page"
         class="pf-v6-c-button pf-m-plain"
         data-action="last"
-        data-ouia-component-id="OUIA-Generated-Button-plain-4"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -145,12 +181,24 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            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
+              class="pf-v6-icon-default"
+              viewBox="0 0 448 512"
+            >
+              <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>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M30.354 17.061 17.708 29.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L28.587 16 16.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121Zm-14-2.122L3.707 2.293a.999.999 0 1 0-1.414 1.414L14.586 16 2.293 28.293a.999.999 0 1 0 1.414 1.414l12.646-12.646a1.501 1.501 0 0 0 0-2.121Z"
+              />
+            </svg>
           </svg>
         </span>
       </button>

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:r1:"
       data-ouia-component-type="PF6/MenuToggle"
       data-ouia-safe="true"
       id="''-toggle"
@@ -39,12 +39,24 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 320 512"
             width="1em"
           >
-            <path
-              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-            />
+            <svg
+              class="pf-v6-icon-default"
+              viewBox="0 0 320 512"
+            >
+              <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>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+              />
+            </svg>
           </svg>
         </span>
       </span>

package/src/components/Pagination/__tests__/Pagination.test.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { Pagination, PaginationVariant } from '../index';
 import { KeyTypes } from '../../../helpers';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 
 describe('Pagination', () => {
   describe('component render', () => {
@@ -117,6 +118,26 @@ describe('Pagination', () => {
       render(<Pagination data-testid="pagination-insets" usePageInsets />);
       expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
     });
+
+    test(`should not render ${styles.modifiers.stickyBase} class by default`, () => {
+      render(<Pagination data-testid="pagination-sticky-base-default" itemCount={20} />);
+      expect(screen.getByTestId('pagination-sticky-base-default')).not.toHaveClass(styles.modifiers.stickyBase);
+    });
+
+    test(`should render ${styles.modifiers.stickyBase} class when isStickyBase is true`, () => {
+      render(<Pagination data-testid="pagination-sticky-base" itemCount={20} isStickyBase />);
+      expect(screen.getByTestId('pagination-sticky-base')).toHaveClass(styles.modifiers.stickyBase);
+    });
+
+    test(`should not render ${styles.modifiers.stickyStuck} class by default`, () => {
+      render(<Pagination data-testid="pagination-sticky-stuck-default" itemCount={20} />);
+      expect(screen.getByTestId('pagination-sticky-stuck-default')).not.toHaveClass(styles.modifiers.stickyStuck);
+    });
+
+    test(`should render ${styles.modifiers.stickyStuck} class when isStickyStuck is true`, () => {
+      render(<Pagination data-testid="pagination-sticky-stuck" itemCount={20} isStickyStuck />);
+      expect(screen.getByTestId('pagination-sticky-stuck')).toHaveClass(styles.modifiers.stickyStuck);
+    });
   });
 
   describe('API', () => {