feat(Pagination): added dynamic sticky style and plain style - #8320
Conversation
WalkthroughReplaces 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
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ 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. Comment |
|
Preview: https://pf-pr-8320.surge.sh A11y report: https://pf-pr-8320-a11y.surge.sh |
There was a problem hiding this comment.
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-bottompagination. 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
📒 Files selected for processing (3)
src/patternfly/components/Pagination/examples/Pagination.mdsrc/patternfly/components/Pagination/pagination.hbssrc/patternfly/components/Pagination/pagination.scss
| &.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); | ||
| } | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, find the pagination.scss file
find . -name "pagination.scss" -type fRepository: 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
fiRepository: 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
fiRepository: patternfly/patternfly
Length of output: 1325
🏁 Script executed:
# Find Pagination.md to check the example mentioned
find . -name "Pagination.md" -type fRepository: 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 2Repository: 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 -50Repository: 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 -80Repository: 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 -5Repository: 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 -100Repository: 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 -50Repository: 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.
| &.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.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/patternfly/components/Pagination/pagination.scss (1)
199-230:⚠️ Potential issue | 🟠 MajorShared sticky block is missing the inset-block-start, background-color, and box-shadow property declarations.
Duplicate of the earlier
.pf-m-sticky-baseinset-block-start finding, with one additional downstream effect worth noting at the same root cause:
inset-block-startis 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 toautoand the element does not stick.box-shadowis likewise only declared in&.pf-m-sticky(line 196) and&.pf-m-bottom(line 124). The.pf-m-sticky-stuckrule 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, andbox-shadowinto the shared&.pf-m-sticky, &.pf-m-sticky-baseblock 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
📒 Files selected for processing (9)
src/patternfly/components/Pagination/examples/Pagination.mdsrc/patternfly/components/Pagination/pagination.hbssrc/patternfly/components/Pagination/pagination.scsssrc/patternfly/demos/CardView/examples/CardView.mdsrc/patternfly/demos/DataList/data-list-pagination-footer-static.hbssrc/patternfly/demos/DataList/data-list-pagination-footer.hbssrc/patternfly/demos/Table/table-pagination-footer-static.hbssrc/patternfly/demos/Table/table-pagination-footer.hbssrc/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
9201cce to
b9f0590
Compare
de98a95 to
041c109
Compare
|
🎉 This PR is included in version 6.5.0-prerelease.79 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #8105, closes #8225
Summary by CodeRabbit
New Features
Documentation