[Pagination] Fix Adjacent ellipses in PaginationNav

[thyhmdo]

Bug issue: #15830
Closes #15830

Tasks

Preview Give feedback

1. Create design specs for Pagination
2. Implement the specs for Pagination

Design Specs

[janhassel]

I already briefly shared this over in #15830 (comment) but I again wanna voice a concern that surfaced during user testing with the proposed design update: the number of total buttons would change depending on the location of the current page. This means that the entire component grows and shrinks in size and can cause misclicks by the user.

In the first scenario depicted in these specs:

If the user wants to reach page 4, they're likely not going through the OverflowMenu but just click on the right caret twice. After the first click, the position of the right caret changes though and the user would click on page 10.

This is a huge usability issue that users encountered during our testing of this design. That's why we opted to keep the number of buttons the same no matter what the current page is. I urge you to reconsider these specs.

[thyhmdo]

@janhassel thanks for the review. I'll take a look at it and update it soon.