feat(Pagination): added dynamic sticky and plain (#12388)

* feat(Pagination): added dynamic sticky and plain

* Made util out of scroll helper in examples

* Updated scroll logic, removed plain

* Yarn lock

* Made util helper back to inline code

* Verbiage updates

Author: thatblindgeye

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"

packages/react-core/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` })}

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(<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', () => {

packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap

@@ -6,58 +6,84 @@ propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggl
 ouia: true
 ---
 
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef, useLayoutEffect } from 'react';
 
 ## Examples
 
 ### Top
 
 ```ts file="./PaginationTop.tsx"
+
 ```
 
 ### Bottom
 
 ```ts file="./PaginationBottom.tsx"
+
 ```
 
 ### Indeterminate
 
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
 
 ```ts file="./PaginationIndeterminate.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./PaginationDisabled.tsx"
+
 ```
 
 ### No items
 
 ```ts file="./PaginationNoItems.tsx"
+
 ```
 
 ### One page
 
 ```ts file="./PaginationOnePage.tsx"
+
 ```
 
 ### Compact
 
 ```ts file="./PaginationCompact.tsx"
+
 ```
 
 ### Offset
 
 ```ts file="./PaginationOffset.tsx"
+
 ```
 
 ### Sticky
 
 ```ts isFullscreen file="./PaginationSticky.tsx"
+
+```
+
+### Dynamic sticky top
+
+Pagination can be made sticky via two properties: `isStickyBase`, which allows separate control of the sticky position, and `isStickyStuck`, which applies the sticky styling. In this example, `isStickyStuck` is only applied when the pagination is not at the top of the scroll parent container.
+
+```ts isFullscreen file="./PaginationDynamicStickyTop.tsx"
+
+```
+
+### Dynamic sticky bottom
+
+Bottom pagination can be made sticky via two properties: `isStickyBase`, which allows separate control of the sticky position, and `isStickyStuck`, which applies the sticky styling. In this example, `isStickyStuck` is only applied when the pagination is not at the bottom of the scroll parent container.
+
+```ts isFullscreen file="./PaginationDynamicStickyBottom.tsx"
+
 ```
 
 ### Inset
 
 ```ts file="./PaginationInset.tsx"
+
 ```

packages/react-core/src/components/Pagination/examples/Pagination.md

@@ -0,0 +1,86 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  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 + scrollElement.clientHeight < scrollElement.scrollHeight);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
+
+export const PaginationDynamicStickyBottom: React.FunctionComponent = () => {
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(50);
+  const itemCount = 523;
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  const buildCards = () => {
+    const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
+
+    return Array.from({ length: numberOfCards }).map((_value, index) => (
+      <GalleryItem key={index}>
+        <Card>
+          <CardBody>This is card {(page - 1) * perPage + index + 1}</CardBody>
+        </Card>
+      </GalleryItem>
+    ));
+  };
+
+  return (
+    <div ref={scrollParentRef} style={{ overflowY: 'scroll', height: '400px' }}>
+      <Gallery hasGutter>{buildCards()}</Gallery>
+      <Pagination
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        onSetPage={onSetPage}
+        widgetId="dynamic-sticky-bottom-example"
+        onPerPageSelect={onPerPageSelect}
+        variant={PaginationVariant.bottom}
+        isStickyBase
+        isStickyStuck={isStickyStuck}
+      />
+    </div>
+  );
+};

packages/react-core/src/components/Pagination/examples/PaginationDynamicStickyBottom.tsx

@@ -0,0 +1,85 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+import { Pagination, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  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 PaginationDynamicStickyTop: React.FunctionComponent = () => {
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(50);
+  const itemCount = 523;
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  const buildCards = () => {
+    const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
+
+    return Array.from({ length: numberOfCards }).map((_value, index) => (
+      <GalleryItem key={index}>
+        <Card>
+          <CardBody>This is card {(page - 1) * perPage + index + 1}</CardBody>
+        </Card>
+      </GalleryItem>
+    ));
+  };
+
+  return (
+    <div ref={scrollParentRef} style={{ overflowY: 'scroll', height: '400px' }}>
+      <Pagination
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        onSetPage={onSetPage}
+        widgetId="dynamic-sticky-top-example"
+        onPerPageSelect={onPerPageSelect}
+        isStickyBase
+        isStickyStuck={isStickyStuck}
+      />
+      <Gallery hasGutter>{buildCards()}</Gallery>
+    </div>
+  );
+};

packages/react-core/src/components/Pagination/examples/PaginationDynamicStickyTop.tsx

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.78",
+    "@patternfly/patternfly": "6.5.0-prerelease.79",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-docs/package.json

@@ -35,8 +35,8 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.5.0-prerelease.78",
-    "@rhds/icons": "^2.2.0",
+    "@patternfly/patternfly": "6.5.0-prerelease.79",
+    "@rhds/icons": "^2.1.0",
     "fs-extra": "^11.3.3",
     "tslib": "^2.8.1"
   },

packages/react-icons/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.78",
+    "@patternfly/patternfly": "6.5.0-prerelease.79",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.3"
   },