Skip to content

feat(Pagination): added dynamic sticky style and plain style - #8320

Merged
mcoker merged 7 commits into
patternfly:mainfrom
thatblindgeye:paginationGlassSticky
Apr 28, 2026
Merged

feat(Pagination): added dynamic sticky style and plain style#8320
mcoker merged 7 commits into
patternfly:mainfrom
thatblindgeye:paginationGlassSticky

Conversation

@thatblindgeye

@thatblindgeye thatblindgeye commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

Closes #8105, closes #8225

Summary by CodeRabbit

  • New Features

    • Added Plain pagination variant and new sticky positioning options (base & stuck) including top and bottom variants.
  • Documentation

    • Updated pagination examples to show Plain and sticky variants, bottom/plain example, and menu-toggle positioning.
    • Expanded Usage/Class table with new modifier descriptions and theme interactions.

@coderabbitai

coderabbitai Bot commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

Walkthrough

Replaces string-based pagination modifiers with explicit boolean flags, adds plain/sticky-base/sticky-stuck modifiers and examples, refactors the pagination template to use a setModifiers helper, and extends SCSS with new variables and glass-theme conditional styling for bottom/plain and sticky states.

Changes

Cohort / File(s) Summary
Documentation Examples
src/patternfly/components/Pagination/examples/Pagination.md
Added/updated examples using boolean flags (pagination--IsBottom, pagination--IsSticky, pagination--IsPlain, pagination--IsStickyBase, pagination--IsStickyStuck) and updated Usage/Class table to document .pf-m-sticky-base, .pf-m-sticky-stuck, .pf-m-plain, .pf-m-no-plain-on-glass.
Template Refactor
src/patternfly/components/Pagination/pagination.hbs
Replaced inline conditional class concatenation with setModifiers helper mapping boolean flags to modifier classes (compact, bottom, sticky, plain, static, no-plain-on-glass, sticky-base, sticky-stuck).
Styling Enhancements
src/patternfly/components/Pagination/pagination.scss
Added CSS custom properties and rules for sticky base/stuck states (top/bottom), moved/centralized sticky positioning, introduced theme-conditional overrides for plain/no-plain-on-glass, and split sticky behavior into .pf-m-sticky-base and .pf-m-sticky-stuck.
Demo/Usage Call Sites
src/patternfly/demos/CardView/.../CardView.md, src/patternfly/demos/DataList/data-list-pagination-footer.hbs, src/patternfly/demos/DataList/data-list-pagination-footer-static.hbs, src/patternfly/demos/Table/table-pagination-footer.hbs, src/patternfly/demos/Table/table-pagination-footer-static.hbs, src/patternfly/demos/Toolbar/examples/Toolbar.md
Updated demo templates to pass boolean-style pagination flags instead of pagination--modifier strings (e.g., pagination--IsBottom=true, pagination--IsStatic=true, pagination--IsSticky=true).

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Suggested labels

released on @prerelease``, Needs design review

Suggested reviewers

  • mcoker
  • jcmill
  • andrew-ronaldson
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title follows conventional commit guidelines with a clear feature type prefix 'feat' and descriptive subject about adding sticky and plain style functionality to Pagination.
Linked Issues check ✅ Passed All code changes align with linked issue objectives: plain styling implementation (#8105) includes new modifier flags and CSS variables for plain/no-plain variants; sticky styling implementation (#8225) includes sticky-base/stuck flags and comprehensive CSS updates for Glass theme integration.
Out of Scope Changes check ✅ Passed All changes are directly scoped to Pagination component implementation and its usage in demos; no unrelated modifications to other components or build configurations are present.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build

patternfly-build commented Apr 17, 2026

Copy link
Copy Markdown
Collaborator

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
src/patternfly/components/Pagination/examples/Pagination.md (1)

234-237: Clarify the new modifier rows.

A couple of small doc polish items on the new rows:

  • .pf-m-plain — the "Only applies outside of glass theme" phrasing is ambiguous (it reads like it doesn't work in glass, when actually glass makes it the default). Consider something like: "Applies a transparent background to .pf-m-bottom pagination. On the glass theme, transparent is the default and this modifier is redundant."
  • .pf-m-plain / .pf-m-no-plain-on-glass — "Applied to" says .pf-v6-c-pagination, but per the SCSS only the bottom variant is affected. Either scope it or note the limitation.
  • .pf-m-sticky-stuck — "Applied to" reads .pf-v6-c-pagination.pf-m-sticky-base, but the CSS rule at line 222 only requires .pf-v6-c-pagination.pf-m-sticky-stuck (sticky-base isn't strictly required by the selector). Either tighten the CSS or align the docs.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Pagination/examples/Pagination.md` around lines 234
- 237, Update the three modifier table rows so the docs match the SCSS: change
the "Applied to" for .pf-m-plain and .pf-m-no-plain-on-glass to
`.pf-v6-c-pagination.pf-m-bottom` and reword the description for .pf-m-plain to:
"Applies a transparent background to `.pf-m-bottom` pagination; on the glass
theme transparency is the default and this modifier is redundant." For
.pf-m-sticky-stuck, update the "Applied to" to
`.pf-v6-c-pagination.pf-m-sticky-stuck` and remove the requirement for
`.pf-m-sticky-base` (or alternatively tighten the SCSS selector to require
`.pf-m-sticky-base` if you prefer CSS change), ensuring the table text reflects
whichever approach you choose.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/Pagination/examples/Pagination.md`:
- Around line 150-168: The top "Plain" example sets pagination--IsPlain=true on
the pagination-plain-top instance but that flag only toggles the bottom
background modifier and has no visual effect; fix by removing
pagination--IsPlain=true from the pagination-plain-top example (leave it on
pagination-plain-bottom only) OR, if you intend the top variant to be plain too,
adjust the pagination--IsPlain modifier semantics in pagination.scss so it
applies the plain styling used by the bottom instance to the top instance as
well (update the logic that currently only toggles --m-bottom--BackgroundColor).

In `@src/patternfly/components/Pagination/pagination.scss`:
- Around line 102-105: The .pf-m-plain selector only clears
--#{$pagination}--m-bottom--BackgroundColor (used by .pf-m-bottom), causing
.pf-m-plain to be a no-op for top/sticky paginations; update the selector and
docs: either expand the CSS selector to also clear
--#{$pagination}--m-sticky--BackgroundColor (and any top background token) so
IsPlain affects sticky/top instances, or restrict the modifier to bottom by
scoping the selector to .pf-m-bottom and adjust the
.pf-m-no-plain-on-glass/glass auto-opt-in rule similarly; then update
Pagination.md examples and the usage table row to accurately reflect
.pf-m-plain’s intended scope.
- Around line 188-220: The .pf-m-sticky-base variant never receives
inset-block-start because the property is only set inside the .pf-m-sticky
block; move the inset-block-start:
var(--#{$pagination}--m-sticky--InsetBlockStart) declaration from the
.pf-m-sticky block into the shared selector block (&.pf-m-sticky,
&.pf-m-sticky-base) so both .pf-m-sticky and .pf-m-sticky-base honor
--#{$pagination}--m-sticky--InsetBlockStart, then remove the now-redundant
inset-block-start from the .pf-m-sticky block; ensure you reference the variable
--#{$pagination}--m-sticky--InsetBlockStart and the selectors .pf-m-sticky and
.pf-m-sticky-base when making the change.

---

Nitpick comments:
In `@src/patternfly/components/Pagination/examples/Pagination.md`:
- Around line 234-237: Update the three modifier table rows so the docs match
the SCSS: change the "Applied to" for .pf-m-plain and .pf-m-no-plain-on-glass to
`.pf-v6-c-pagination.pf-m-bottom` and reword the description for .pf-m-plain to:
"Applies a transparent background to `.pf-m-bottom` pagination; on the glass
theme transparency is the default and this modifier is redundant." For
.pf-m-sticky-stuck, update the "Applied to" to
`.pf-v6-c-pagination.pf-m-sticky-stuck` and remove the requirement for
`.pf-m-sticky-base` (or alternatively tighten the SCSS selector to require
`.pf-m-sticky-base` if you prefer CSS change), ensuring the table text reflects
whichever approach you choose.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 1539239b-bf7b-4f8a-9795-4082e1f1807b

📥 Commits

Reviewing files that changed from the base of the PR and between 86abb1a and bd050b9.

📒 Files selected for processing (3)
  • src/patternfly/components/Pagination/examples/Pagination.md
  • src/patternfly/components/Pagination/pagination.hbs
  • src/patternfly/components/Pagination/pagination.scss

Comment thread src/patternfly/components/Pagination/examples/Pagination.md Outdated
Comment thread src/patternfly/components/Pagination/pagination.scss
Comment on lines 188 to +220
&.pf-m-sticky {
--#{$pagination}--m-bottom--InsetBlockEnd: 0;
--#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
--#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);

position: sticky;
inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
}

&.pf-m-sticky,
&.pf-m-sticky-base {
position: sticky;
z-index: var(--#{$pagination}--m-sticky--ZIndex);
padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
}

&.pf-m-sticky-base {
--#{$pagination}--m-sticky--InsetBlockStart: var(--#{$pagination}--m-sticky-base--InsetBlockStart);

border-radius: var(--#{$pagination}--m-sticky-base--BorderRadius);
transition-timing-function: var(--#{$pagination}--m-sticky-base--TransitionTimingFunction);
transition-duration: var(--#{$pagination}--m-sticky-base--TransitionDuration);
transition-property: background-color, box-shadow;

&.pf-m-bottom {
--#{$pagination}--m-sticky-base--InsetBlockStart: 0;
--#{$pagination}--m-bottom--InsetBlockEnd: var(--#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd);
}
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# First, find the pagination.scss file
find . -name "pagination.scss" -type f

Repository: patternfly/patternfly

Length of output: 119


🏁 Script executed:

# Check if the file exists and read the relevant lines
if [ -f "src/patternfly/components/Pagination/pagination.scss" ]; then
  echo "=== Lines 188-220 of pagination.scss ==="
  sed -n '188,220p' "src/patternfly/components/Pagination/pagination.scss" | cat -n
fi

Repository: patternfly/patternfly

Length of output: 1933


🏁 Script executed:

# Also check the broader context around line 117 mentioned for .pf-m-bottom
if [ -f "src/patternfly/components/Pagination/pagination.scss" ]; then
  echo "=== Lines 110-130 for .pf-m-bottom context ==="
  sed -n '110,130p' "src/patternfly/components/Pagination/pagination.scss" | cat -n
fi

Repository: patternfly/patternfly

Length of output: 1325


🏁 Script executed:

# Find Pagination.md to check the example mentioned
find . -name "Pagination.md" -type f

Repository: patternfly/patternfly

Length of output: 126


🏁 Script executed:

# Check for usage of pf-m-sticky-base in the codebase
rg "pf-m-sticky-base" --type scss -B 2 -A 2

Repository: patternfly/patternfly

Length of output: 93


🏁 Script executed:

# Also check any TypeScript/JSX files that set these classes
rg "pf-m-sticky-base|IsStickyBase" --type ts --type tsx -B 1 -A 1 | head -50

Repository: patternfly/patternfly

Length of output: 92


🏁 Script executed:

# Read Pagination.md to find the example mentioned
rg "Top sticky with base and stuck|IsStickyBase|Pagination.*sticky" ./src/patternfly/components/Pagination/examples/Pagination.md -A 5 -B 2 | head -80

Repository: patternfly/patternfly

Length of output: 5730


🏁 Script executed:

# Search for class application patterns in component code
find ./src/patternfly/components/Pagination -name "*.ts" -o -name "*.tsx" | head -5

Repository: patternfly/patternfly

Length of output: 47


🏁 Script executed:

# Look for how sticky classes are applied
rg "pf-m-sticky" ./src/patternfly/components/Pagination -t ts -t tsx -B 2 -A 2 | head -100

Repository: patternfly/patternfly

Length of output: 92


🏁 Script executed:

# Check if pf-m-sticky-base is ever applied WITHOUT pf-m-sticky
rg "sticky-base" --type ts --type tsx -B 2 -A 2 2>/dev/null || rg "sticky-base" -B 2 -A 2 | grep -E "\.(ts|tsx):" | head -50

Repository: patternfly/patternfly

Length of output: 47


🏁 Script executed:

# Search for sticky-base in component files (broader search)
find ./src/patternfly/components/Pagination -type f | xargs grep -l "sticky-base"

Repository: patternfly/patternfly

Length of output: 235


.pf-m-sticky-base on top pagination won't stick — missing inset-block-start property.

The inset-block-start property is only declared inside the .pf-m-sticky block (line 193). The shared selector at lines 198‑206 sets position: sticky for both .pf-m-sticky and .pf-m-sticky-base, but the inset-block-start property is absent. The variable --m-sticky--InsetBlockStart is reassigned for .pf-m-sticky-base at line 209, but without the property declaration, it has no effect.

Result: When only .pf-m-sticky-base is applied (as in the "Top sticky with base and stuck" example in Pagination.md, which sets IsStickyBase=true IsStickyStuck=true without IsSticky), the element resolves to position: sticky; inset-block-start: auto; — the default — so it never sticks. Only the bottom variant works because .pf-m-bottom separately sets inset-block-end at line 117.

🐛 Proposed fix — move `inset-block-start` to the shared selector
   &.pf-m-sticky,
   &.pf-m-sticky-base {
     position: sticky;
+    inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
     z-index: var(--#{$pagination}--m-sticky--ZIndex);
     padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
     padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
     padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
     padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
   }

Then remove the redundant inset-block-start from the .pf-m-sticky block (line 193).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
&.pf-m-sticky {
--#{$pagination}--m-bottom--InsetBlockEnd: 0;
--#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
--#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);
position: sticky;
inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
}
&.pf-m-sticky,
&.pf-m-sticky-base {
position: sticky;
z-index: var(--#{$pagination}--m-sticky--ZIndex);
padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
}
&.pf-m-sticky-base {
--#{$pagination}--m-sticky--InsetBlockStart: var(--#{$pagination}--m-sticky-base--InsetBlockStart);
border-radius: var(--#{$pagination}--m-sticky-base--BorderRadius);
transition-timing-function: var(--#{$pagination}--m-sticky-base--TransitionTimingFunction);
transition-duration: var(--#{$pagination}--m-sticky-base--TransitionDuration);
transition-property: background-color, box-shadow;
&.pf-m-bottom {
--#{$pagination}--m-sticky-base--InsetBlockStart: 0;
--#{$pagination}--m-bottom--InsetBlockEnd: var(--#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd);
}
}
&.pf-m-sticky {
--#{$pagination}--m-bottom--InsetBlockEnd: 0;
--#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
--#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);
inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
}
&.pf-m-sticky,
&.pf-m-sticky-base {
position: sticky;
inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
z-index: var(--#{$pagination}--m-sticky--ZIndex);
padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
}
&.pf-m-sticky-base {
--#{$pagination}--m-sticky--InsetBlockStart: var(--#{$pagination}--m-sticky-base--InsetBlockStart);
border-radius: var(--#{$pagination}--m-sticky-base--BorderRadius);
transition-timing-function: var(--#{$pagination}--m-sticky-base--TransitionTimingFunction);
transition-duration: var(--#{$pagination}--m-sticky-base--TransitionDuration);
transition-property: background-color, box-shadow;
&.pf-m-bottom {
--#{$pagination}--m-sticky-base--InsetBlockStart: 0;
--#{$pagination}--m-bottom--InsetBlockEnd: var(--#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd);
}
}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Pagination/pagination.scss` around lines 188 - 220,
The .pf-m-sticky-base variant never receives inset-block-start because the
property is only set inside the .pf-m-sticky block; move the inset-block-start:
var(--#{$pagination}--m-sticky--InsetBlockStart) declaration from the
.pf-m-sticky block into the shared selector block (&.pf-m-sticky,
&.pf-m-sticky-base) so both .pf-m-sticky and .pf-m-sticky-base honor
--#{$pagination}--m-sticky--InsetBlockStart, then remove the now-redundant
inset-block-start from the .pf-m-sticky block; ensure you reference the variable
--#{$pagination}--m-sticky--InsetBlockStart and the selectors .pf-m-sticky and
.pf-m-sticky-base when making the change.

@thatblindgeye
thatblindgeye requested review from kmcfaul and mcoker April 17, 2026 15:12

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (1)
src/patternfly/components/Pagination/pagination.scss (1)

199-230: ⚠️ Potential issue | 🟠 Major

Shared sticky block is missing the inset-block-start, background-color, and box-shadow property declarations.

Duplicate of the earlier .pf-m-sticky-base inset-block-start finding, with one additional downstream effect worth noting at the same root cause:

  • inset-block-start is declared only inside &.pf-m-sticky (line 194). For top .pf-m-sticky-base (which only redefines the variable at line 210), the property is never set, so it resolves to auto and the element does not stick.
  • box-shadow is likewise only declared in &.pf-m-sticky (line 196) and &.pf-m-bottom (line 124). The .pf-m-sticky-stuck rule at line 224 reassigns --m-sticky--BoxShadow, but for a top .pf-m-sticky-base.pf-m-sticky-stuck (no .pf-m-sticky, no .pf-m-bottom) no selector actually consumes it, so the stuck shadow never renders.

Both are resolved by hoisting inset-block-start, background-color, and box-shadow into the shared &.pf-m-sticky, &.pf-m-sticky-base block and letting the variables drive per-state values.

🐛 Proposed fix — consolidate shared sticky properties
   &.pf-m-sticky {
     --#{$pagination}--m-bottom--InsetBlockEnd: 0;
     --#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
     --#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);
-
-    inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
-    background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
-    box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
   }

   &.pf-m-sticky,
   &.pf-m-sticky-base {
     position: sticky;
+    inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
     z-index: var(--#{$pagination}--m-sticky--ZIndex);
     padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
     padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
     padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
     padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
+    background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
+    box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
   }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Pagination/pagination.scss` around lines 199 - 230,
The shared sticky selectors (&.pf-m-sticky, &.pf-m-sticky-base) lack the actual
inset-block-start, background-color and box-shadow property declarations so
variable changes in .pf-m-sticky-base and .pf-m-sticky-stuck never apply;
move/hoist the concrete properties into the shared block using the sticky
variables (set inset-block-start:
var(--#{$pagination}--m-sticky--InsetBlockStart), background-color:
var(--#{$pagination}--m-sticky--BackgroundColor), and box-shadow:
var(--#{$pagination}--m-sticky--BoxShadow)) so that .pf-m-sticky-base and
.pf-m-sticky-stuck can drive those values via their variable overrides; keep
per-state variable assignments inside .pf-m-sticky-base, .pf-m-bottom and
.pf-m-sticky-stuck as currently defined.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@src/patternfly/components/Pagination/pagination.scss`:
- Around line 199-230: The shared sticky selectors (&.pf-m-sticky,
&.pf-m-sticky-base) lack the actual inset-block-start, background-color and
box-shadow property declarations so variable changes in .pf-m-sticky-base and
.pf-m-sticky-stuck never apply; move/hoist the concrete properties into the
shared block using the sticky variables (set inset-block-start:
var(--#{$pagination}--m-sticky--InsetBlockStart), background-color:
var(--#{$pagination}--m-sticky--BackgroundColor), and box-shadow:
var(--#{$pagination}--m-sticky--BoxShadow)) so that .pf-m-sticky-base and
.pf-m-sticky-stuck can drive those values via their variable overrides; keep
per-state variable assignments inside .pf-m-sticky-base, .pf-m-bottom and
.pf-m-sticky-stuck as currently defined.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: a2d8896b-6067-4282-8a28-afe1fcad4647

📥 Commits

Reviewing files that changed from the base of the PR and between bd050b9 and 9201cce.

📒 Files selected for processing (9)
  • src/patternfly/components/Pagination/examples/Pagination.md
  • src/patternfly/components/Pagination/pagination.hbs
  • src/patternfly/components/Pagination/pagination.scss
  • src/patternfly/demos/CardView/examples/CardView.md
  • src/patternfly/demos/DataList/data-list-pagination-footer-static.hbs
  • src/patternfly/demos/DataList/data-list-pagination-footer.hbs
  • src/patternfly/demos/Table/table-pagination-footer-static.hbs
  • src/patternfly/demos/Table/table-pagination-footer.hbs
  • src/patternfly/demos/Toolbar/examples/Toolbar.md
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/patternfly/components/Pagination/pagination.hbs
  • src/patternfly/components/Pagination/examples/Pagination.md

@thatblindgeye
thatblindgeye force-pushed the paginationGlassSticky branch from 9201cce to b9f0590 Compare April 27, 2026 21:09
@thatblindgeye
thatblindgeye force-pushed the paginationGlassSticky branch from de98a95 to 041c109 Compare April 28, 2026 14:35

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@mcoker
mcoker merged commit 5b394e2 into patternfly:main Apr 28, 2026
5 checks passed
@patternfly-build

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 6.5.0-prerelease.79 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sticky pagination on Glass Pagination - plain styling for bottom variant

3 participants