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..a647a3e5095 100644 --- a/packages/react-core/src/components/Pagination/Pagination.tsx +++ b/packages/react-core/src/components/Pagination/Pagination.tsx @@ -125,8 +125,14 @@ export interface PaginationProps extends React.HTMLProps, 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 = ({ 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 = ({ 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` })} 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..85e0f0cd2e1 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,26 @@ describe('Pagination', () => { render(); expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets'); }); + + 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..7d291a25a05 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`] = `