fix: address bottom pagination bugs - #8498

src/patternfly/components/Pagination/pagination.scss (1)

70-98: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Add missing transparent background for glass theme and fix stylelint error.

The PR objective states: "Ensure bottom pagination in glass has a transparent background when sticky on mobile by default". However, the variable assignment --#{$pagination}--m-bottom--BackgroundColor: transparent; is missing from the glass theme block. Without this, .pf-m-bottom on glass defaults to the solid sticky-default background on mobile.

Additionally, standard CSS rules (enforced by Stylelint's no-invalid-position-declaration) require declarations to appear before nested rules. The current placement of the :where(:root.pf-v6-theme-glass) & nested rule before the subsequent CSS variables and @media queries triggers a static analysis error.

Move the glass theme block to the end of the pf-root mixin and include the missing background property.

🛠️ Proposed fix

-  :where(:root.pf-v6-theme-glass) & {
-    --#{$pagination}--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
-    --#{$pagination}--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
-    --#{$pagination}--m-sticky--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
-    --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
-    --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
-    --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
-  }
-
   // page menu
   --#{$pagination}__page-menu--Display--base: block;
   --#{$pagination}__page-menu--Display: none;
   --#{$pagination}--m-display-summary__page-menu--Display: none;
   --#{$pagination}--m-display-full__page-menu--Display: var(--#{$pagination}__page-menu--Display--base);
   --#{$pagination}--m-bottom__page-menu--Display: var(--#{$pagination}__page-menu--Display--base);
   --#{$pagination}__page-menu--md--Display: var(--#{$pagination}__page-menu--Display--base);
 
   `@media` screen and (min-width: $pf-v6-global--breakpoint--md) {
     --#{$pagination}--m-bottom--BackgroundColor: transparent;
     --#{$pagination}--m-bottom--BoxShadow: none;
     --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
     --#{$pagination}__page-menu--Display: var(--#{$pagination}__page-menu--md--Display);
     --#{$pagination}__nav--Display: inline-flex;
     --#{$pagination}__total-items--Display: none;
   }
 
   `@media` screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$pagination}__scroll-button--Width: var(--#{$pagination}__scroll-button--xl--Width);
   }
+
+  :where(:root.pf-v6-theme-glass) & {
+    --#{$pagination}--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
+    --#{$pagination}--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
+    --#{$pagination}--m-sticky--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
+    --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
+    --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
+    --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
+    --#{$pagination}--m-bottom--BackgroundColor: transparent;
+  }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/patternfly/components/Pagination/pagination.scss` around lines 70 - 98,
Update the pf-root mixin by moving the :where(:root.pf-v6-theme-glass) & nested
block after all declarations and media queries, then add
--#{$pagination}--m-bottom--BackgroundColor: transparent; to that glass-theme
block. Preserve the existing glass-specific variables and responsive rules.

Source: Linters/SAST tools