va-pagination: add resize listener to adapt to mobile devices and zoomed layouts #1476

1Copenut · 2025-02-03T20:46:46Z

Chromatic

https://tpierce-2199-bug-va-pagination--65a6e2ed2314f7b8f98609d8.chromatic.com

Configuring this pull request

Link to any related issues in the description so they can be cross-referenced.
Add the appropriate version patch label (major, minor, patch, or ignore-for-release).
- See How to choose a version number for guidance.
- Use ignore-for-release if files haven't been changed in a component library package. (ie. only Storybook files)
DST Only: Increment the /packages/core version number if this will be the last PR merged before a release.
Complete all sections below.
Delete this section once complete

Description

Closes department-of-veterans-affairs/vets-design-system-documentation#2199.

This PR adds a resizeObserver to the va-pagination component to update the number of pagination links on smaller device viewports and zoomed browser windows.

QA Checklist

Component maintains 1:1 parity with design mocks
Text is consistent with what's been provided in the mocks
Component behaves as expected across breakpoints
Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
Designer has signed off on changes (if applicable. If not applicable provide reason why)
Tab order and focus state work as expected
Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
New components are covered by e2e tests; updates to existing components are covered by existing test suite
Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

These are screenshots from a local test on vets-website having published the components on Verdaccio (local registry).

Small screen

Medium screen

Large screen

Acceptance criteria

QA checklist has been completed
Screenshots have been attached that cover desktop and mobile screens

Definition of done

Documentation has been updated, if applicable
A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

* Updated Storybook instances to five as default maxPageListLength. * Added tests for mobile display and mobile axe check. * Added comment for mobile testing device.

…iveness.

1Copenut

Added a few comments to help clarify some of my refactoring decisions.

1Copenut · 2025-02-07T22:39:05Z

packages/web-components/src/components/va-pagination/va-pagination.tsx

+            {this.renderPreviousButton(arrowClasses, previousAriaLabel)}
+            {this.renderFirstPage(itemClasses, ellipsisClasses)}
+            {this.renderMiddlePages(ariaLabelSuffix, itemClasses)}
+            {this.renderLastPage(ellipsisClasses, itemClasses)}
+            {this.renderNextPageButton(arrowClasses, nextAriaLabel)}


I re-architected these into private functions so we could separate the business logic from the render() method. I felt it made the "view layer" easier to read and co-located each piece of the pagination. If there's a better way to render these than individual functions, LMK!

1Copenut · 2025-02-07T22:40:58Z

packages/web-components/src/components/va-pagination/va-pagination.tsx

+    // The smallest breakpoint can show at most 6 pages, including ellipses
+    if (isMobileViewport) maxPageListLengthState = SHOW_ALL_PAGES;
+
+    // Use cases


I lightly refactored the pageNumbers() function to use if, else if, else logic. I explored using a switch case but didn't feel it was going to scale with multiple props needed to derive the final arrays.

1Copenut · 2025-02-07T22:42:56Z

packages/web-components/src/components/va-pagination/va-pagination.tsx

+    previousAriaLabel: string,
+  ): JSX.Element {
+    // Skip rendering if the viewport is too narrow to show Previous button
+    if (this.isMobileViewport) return null;


I flipped the logic on these new UI render functions. If a condition exists that means this piece of pagination should not be rendered, I returned early using guard clauses. This helped me focus the return statements on the exact markup we wanted.

1Copenut · 2025-02-10T20:07:41Z

I tested the change with NVDA, JAWS, and ZoomText on Win11, using Chrome, Firefox, and Edge. Also did basic testing with MS Voice Access to confirm Next, Previous, page numbers clicked as expected.

packages/web-components/src/components/va-pagination/va-pagination.tsx

jamigibbs · 2025-02-11T16:36:21Z

packages/web-components/src/components/va-pagination/va-pagination.scss

@@ -55,3 +56,9 @@ button {
  transition: all 0.3s ease-in-out;
  transition-property: color, background-color;
 }
+
+@container (max-width: 640px) { // Variables won't compile. Matching TSX file for now.


// Variables won't compile. Matching TSX file for now.

What does this mean?

I was having quite a time passing the USWDS $tablet variable into this container query. I tried var(--tablet) and $tablet and #${tablet} but they either wouldn't render the CSS rule at all, or failed during compilation. Happy to change it if there's something I'm missing.

That's really interesting 🤔 I wonder if that's a Stencil limitation? Thanks for explaining!

Do you mind just mentioning in the comment that the value is for the --tablet variable/property?

I think it's a limitation in Sass. I found this article Want CSS variables in media query declarations? Try this! that digs into the specifics of Sass variables in media and container queries. I'll update the comment explaining the issue.

jamigibbs · 2025-02-11T16:46:32Z

packages/web-components/src/components/va-pagination/va-pagination.tsx

+  /**
+   * =========================================
+   * End pagination render functions
+   * =========================================


Nit: I'm personally not a fan of adding these large comment blocks as waypoints for code sections (here and on line 301). Function names should already be identifying what they're for and it seems like they do. I don't think the design system team has code style guidelines yet but I don't see these types of comment blocks in any other components either.

Not a problem, I'll take them out in just a short.

…tion.tsx Co-authored-by: Andrew Steele <[email protected]>

jamigibbs

Can you double check the unbounded states behavior? If do the following steps for this unbounded middle example, it seems like I can get to a point where I can't click further than page 5. It doesn't seem like the current Storybook example does that.

Go to unbounded middle example
Click 1
Click 5 and then 6

1Copenut · 2025-02-11T19:50:36Z

Can you double check the unbounded states behavior?

Yes, that looks like a hole in the new logic I introduced. I'll look into it later this afternoon and into tomorrow morning.

1Copenut · 2025-03-05T22:31:19Z

@jamigibbs & @Andrew565 I'm finally back with an update to this PR. I added a significant amount of logic to the pageNumbers() method to account for more use cases and maxPagetListLength prop set to 6, 8, and 10. I also added logic to the resize observer to decide if we're on a small or slightly less small mobile screen. I was having trouble with the middle numbers and two ellipses at small screen size, so it felt like the best way forward.

I've been testing in Storybook for a couple of days and all of the examples do what I expected, and testing a bunch of variants too. Currently testing in vets-website locally as much as one can with mocked data.

LMK if the added logic needs split or refactored. Thank you!

1Copenut · 2025-03-06T16:40:01Z

Some screenshots from localhost testing on Your VA Payment History:

400% zoom at 1280px

300% zoom at 1280px

250% zoom at 1280px

jamigibbs

@1Copenut Thank you so much for this massive effort! I left a few super minor comments and all of the testing looks pretty good on my end too except one thing I want to check in about.

The USWDS behavior guidelines says:

The component features a maximum of seven slots.

But it looks like now there are more than that. Would that be fairly straight forward to get back in alignment in this PR?

jamigibbs · 2025-03-06T16:33:23Z

packages/web-components/src/components/va-pagination/va-pagination.tsx

+   * The number has been reduced from 7 to 6 to show all more consistently
+   * on small screens and zoomed in browser windows.
+   */
+  SHOW_ALL_PAGES: number = 6;


Will this comment make sense in the long run? Should this be reverted back to the original comment?

If the page total is less than or equal to this limit, show all pages.

jamigibbs · 2025-03-06T16:34:50Z

packages/web-components/src/components/va-pagination/va-pagination.tsx

+
+  /**
+   * Mobile viewport width chosen based on USWDS "mobile-lg" spacing unit.
+   * See https://designsystem.digital.gov/design-tokens/spacing-units/


I think we would prefer this to reference VADS which also uses the same named/value mobile-lg token: https://design.va.gov/foundation/breakpoints

This can be updated in a few different places.

jamigibbs · 2025-03-06T16:35:18Z

packages/web-components/src/components/va-pagination/va-pagination.tsx


-  private handlePageSelect = (page, eventID) => {
+  /**
+   * Tabllet viewport width chosen based on USWDS "tablet" spacing unit.


Typo: Tabllet

jamigibbs · 2025-03-06T16:44:20Z

packages/web-components/src/components/va-pagination/va-pagination.tsx

      return makeArray(1, totalPages);
-    }
+    } else if (SHOW_ALL_PAGES < totalPages && totalPages <= maxPageListLength) {
+      console.log('Use case 2');


cleanup console.logs in a few different places

1Copenut · 2025-03-06T16:56:23Z

@jamigibbs I appreciate the quick review and comments, thank you. I'll remove the errant console statements and mis-spellings in a quick push and focus on getting the total count back in line with production examples (7 or fewer). Will ping you after I have those updates in place.

1Copenut added 3 commits February 3, 2025 14:42

First commit to confirm ResizeObserver triggers.

e7ece77

Renamed state variables. Refactored magic numbers to instance constants.

2fcec36

Updated Storybook instances and e2e tests.

06efa84

* Updated Storybook instances to five as default maxPageListLength. * Added tests for mobile display and mobile axe check. * Added comment for mobile testing device.

1Copenut self-assigned this Feb 3, 2025

1Copenut added bug Something isn't working minor For a minor Semantic Version change labels Feb 3, 2025

1Copenut mentioned this pull request Feb 5, 2025

Research and document view states for va-pagination component department-of-veterans-affairs/va.gov-team#102556

Closed

1Copenut added 9 commits February 7, 2025 16:29

Refactored prev, next, first, last logic to private functions.

0821778

Moved renderPages to a private function outside render.

39ab503

Commented and refactored pageNumbers func for logic readability.

ff05f59

Added return types to new render UI functions.

68c8926

Updated stories to 6 as lower bound.

f6a8145

Adding a CSS override for ellipses at smallest breakpoint.

db09b81

Added a debounce method to utils.

aca4288

Added debounce to resizeObserver. Changed constant names for descript…

8b747eb

…iveness.

Added tests to check for ellipses on small screens.

5e57916

1Copenut commented Feb 7, 2025

View reviewed changes

Swapped conditional classname for container query.

014a83a

1Copenut marked this pull request as ready for review February 10, 2025 20:02

1Copenut requested a review from a team as a code owner February 10, 2025 20:02

Merge branch 'main' into tpierce-2199-bug-va-pagination

55e0362

jamigibbs removed the bug Something isn't working label Feb 11, 2025

jamigibbs changed the title ~~[Bug] Add resize listener to va-pagination to adapt to mobile devices and zoomed layouts~~ va-pagination: add resize listener to adapt to mobile devices and zoomed layouts Feb 11, 2025

Andrew565 approved these changes Feb 11, 2025

View reviewed changes

packages/web-components/src/components/va-pagination/va-pagination.tsx Outdated Show resolved Hide resolved

jamigibbs reviewed Feb 11, 2025

View reviewed changes

1Copenut and others added 2 commits February 11, 2025 11:18

Update packages/web-components/src/components/va-pagination/va-pagina…

02a20d3

…tion.tsx Co-authored-by: Andrew Steele <[email protected]>

Removing render function comment blocks.

abc397c

jamigibbs reviewed Feb 11, 2025

View reviewed changes

1Copenut added 14 commits February 12, 2025 09:08

WIP. Refactoring use case 2 to use switch statement.

5b51cff

WIP. Refactoring use case 3 to use switch statement.

8730cea

Adjusted logic for handing off from last with one ellipsis to middle.

009dfa3

Removing maxListLengthState. No longer needed with new logic tree.

4b4bc7a

Added logic for 6-9 pages. Removed console.log statements.

61b55e4

WIP. Added logic for middle page starts.

937c86f

Further improvements for use cases 3 and 4.

330beb4

Use case 1 confirmed correct.

7236bb7

Use case 3 confirmed correct.

3388b43

Use case 4 confirmed correct.

714a2a9

Use case 2 confirmed correct.

605599d

Use case 5 confirmed correct. Added isTabletViewport state.

186dabc

Final cleanup and comment removal.

8f5b4a2

Added e2e tests for mobile, small tablet viewport widths.

41cc266

1Copenut requested review from jamigibbs and Andrew565 March 5, 2025 22:27

1Copenut added 4 commits March 5, 2025 16:34

Updated the SCSS comment explaining magic number in container query.

67a6e5d

Refactoring high counts starting at 1 for mobile devices.

0aba699

Fixing two e2e tests for small viewport.

5ca3781

Merge branch 'main' into tpierce-2199-bug-va-pagination

19f2ee6

jamigibbs reviewed Mar 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

va-pagination: add resize listener to adapt to mobile devices and zoomed layouts #1476

va-pagination: add resize listener to adapt to mobile devices and zoomed layouts #1476

1Copenut commented Feb 3, 2025 •

edited by github-actions bot

Loading

1Copenut left a comment

1Copenut Feb 7, 2025

1Copenut Feb 7, 2025

1Copenut Feb 7, 2025

1Copenut commented Feb 10, 2025

jamigibbs Feb 11, 2025

1Copenut Feb 11, 2025

jamigibbs Feb 11, 2025

1Copenut Feb 11, 2025

jamigibbs Feb 11, 2025 •

edited

Loading

1Copenut Feb 11, 2025

jamigibbs left a comment •

edited

Loading

1Copenut commented Feb 11, 2025

1Copenut commented Mar 5, 2025

1Copenut commented Mar 6, 2025

jamigibbs left a comment •

edited

Loading

jamigibbs Mar 6, 2025

jamigibbs Mar 6, 2025

jamigibbs Mar 6, 2025

jamigibbs Mar 6, 2025

1Copenut commented Mar 6, 2025

va-pagination: add resize listener to adapt to mobile devices and zoomed layouts #1476

Are you sure you want to change the base?

va-pagination: add resize listener to adapt to mobile devices and zoomed layouts #1476

Conversation

1Copenut commented Feb 3, 2025 • edited by github-actions bot Loading

Chromatic

Configuring this pull request

Description

QA Checklist

Screenshots

Acceptance criteria

Definition of done

1Copenut left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1Copenut commented Feb 10, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamigibbs Feb 11, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamigibbs left a comment • edited Loading

Choose a reason for hiding this comment

1Copenut commented Feb 11, 2025

1Copenut commented Mar 5, 2025

1Copenut commented Mar 6, 2025

jamigibbs left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1Copenut commented Mar 6, 2025

1Copenut commented Feb 3, 2025 •

edited by github-actions bot

Loading

jamigibbs Feb 11, 2025 •

edited

Loading

jamigibbs left a comment •

edited

Loading

jamigibbs left a comment •

edited

Loading