From 560db7a794817c6d026772db78428166a8dd9226 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 29 Apr 2026 09:54:10 -0400 Subject: [PATCH 1/5] feat(Pagination): added dynamic sticky and plain --- packages/react-core/package.json | 2 +- .../src/components/Pagination/Pagination.tsx | 24 +++++- .../Pagination/__tests__/Pagination.test.tsx | 43 ++++++++++ .../__snapshots__/Pagination.test.tsx.snap | 84 +++++++++--------- .../Pagination/examples/Pagination.md | 36 +++++++- .../PaginationDynamicStickyBottom.tsx | 86 +++++++++++++++++++ .../examples/PaginationDynamicStickyTop.tsx | 85 ++++++++++++++++++ .../examples/PaginationPlainBottom.tsx | 33 +++++++ .../examples/PaginationPlainTop.tsx | 32 +++++++ packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 4 +- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- yarn.lock | 20 ++--- 14 files changed, 393 insertions(+), 62 deletions(-) create mode 100644 packages/react-core/src/components/Pagination/examples/PaginationDynamicStickyBottom.tsx create mode 100644 packages/react-core/src/components/Pagination/examples/PaginationDynamicStickyTop.tsx create mode 100644 packages/react-core/src/components/Pagination/examples/PaginationPlainBottom.tsx create mode 100644 packages/react-core/src/components/Pagination/examples/PaginationPlainTop.tsx diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 71bfc4dd4a8..f5b35775e58 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,7 @@ "tslib": "^2.8.1" }, "devDependencies": { - "@patternfly/patternfly": "6.5.0-prerelease.78", + "@patternfly/patternfly": "6.5.0-prerelease.79", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.3" diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx index 335ce7947eb..df6a7b2cba7 100644 --- a/packages/react-core/src/components/Pagination/Pagination.tsx +++ b/packages/react-core/src/components/Pagination/Pagination.tsx @@ -123,10 +123,20 @@ export interface PaginationProps extends React.HTMLProps, OUIAPr isDisabled?: boolean; /** Flag indicating if pagination is compact. */ isCompact?: boolean; + /** @beta Adds plain styling to the pagination. */ + isPlain?: boolean; + /** @beta Prevents the pagination from automatically applying plain styling when glass theme is enabled. */ + isNoPlainOnGlass?: 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 contro, 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 +201,12 @@ export const Pagination: React.FunctionComponent = ({ variant = PaginationVariant.top, isDisabled = false, isCompact = false, - isSticky = false, + isPlain = false, + isNoPlainOnGlass = false, isStatic = false, + isSticky = false, + isStickyBase = false, + isStickyStuck = false, dropDirection: dropDirectionProp, toggleTemplate, perPage = defaultPerPageOptions[0].value, @@ -290,7 +304,11 @@ export const Pagination: React.FunctionComponent = ({ 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, + isPlain && styles.modifiers.plain, + isNoPlainOnGlass && styles.modifiers.noPlainOnGlass, className )} {...(widgetId && { id: `${widgetId}-${variant}-pagination` })} 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 c38ba33dc40..746d6baff15 100644 --- a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx +++ b/packages/react-core/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,48 @@ describe('Pagination', () => { render(); expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets'); }); + + test(`should not render ${styles.modifiers.plain} class by default`, () => { + render(); + expect(screen.getByTestId('pagination-plain-default')).not.toHaveClass(styles.modifiers.plain); + }); + + test(`should render ${styles.modifiers.plain} class when isPlain is true`, () => { + render(); + expect(screen.getByTestId('pagination-plain')).toHaveClass(styles.modifiers.plain); + }); + + test(`should not render ${styles.modifiers.noPlainOnGlass} class by default`, () => { + render(); + expect(screen.getByTestId('pagination-no-plain-on-glass-default')).not.toHaveClass( + styles.modifiers.noPlainOnGlass + ); + }); + + test(`should render ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlass is true`, () => { + render(); + expect(screen.getByTestId('pagination-no-plain-on-glass')).toHaveClass(styles.modifiers.noPlainOnGlass); + }); + + test(`should not render ${styles.modifiers.stickyBase} class by default`, () => { + render(); + expect(screen.getByTestId('pagination-sticky-base-default')).not.toHaveClass(styles.modifiers.stickyBase); + }); + + test(`should render ${styles.modifiers.stickyBase} class when isStickyBase is true`, () => { + render(); + expect(screen.getByTestId('pagination-sticky-base')).toHaveClass(styles.modifiers.stickyBase); + }); + + test(`should not render ${styles.modifiers.stickyStuck} class by default`, () => { + render(); + expect(screen.getByTestId('pagination-sticky-stuck-default')).not.toHaveClass(styles.modifiers.stickyStuck); + }); + + test(`should render ${styles.modifiers.stickyStuck} class when isStickyStuck is true`, () => { + render(); + expect(screen.getByTestId('pagination-sticky-stuck')).toHaveClass(styles.modifiers.stickyStuck); + }); }); 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 ad9e0ed5945..c308f9ca406 100644 --- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap +++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `