Pagination

[cindyebi]

We have the basic version of the pagination component:
https://latest.visual-framework.dev//components/vf-pagination/index.html?q=pagination

How could we improve this component for different use cases?
Ideas are to include or create new variants for:
• View per page
• Jump to a specific page
• Small or compact variant

@nitinja showed a good pagination reference yesterday: https://ant.design/components/pagination/

There're also some minor visual changes required on the current (basic) version: hover and active link colours are grey instead of interactive blue.

NNGroup's Pagination guidelines: https://www.nngroup.com/articles/item-list-view-all/

[khawkins98]

My concern with Ant's approach is that there are so many options: that's difficult to support technically and from a documentation approach.

I think we'd be able to deliver more value in having a smaller and more consistent variant set.

I also like IBM's Carbon pager as it resolves many RWD questions by compacting the page 1, 2, 3, 4, 5, 6, 7 readout into a select element.

We'll also should try to leverage some vf-form code for the select elements, and perhaps others.

[nikiforosk]

A couple of thoughts following a discussion with @prakashebi about the contrast issues with the way vf-pagination is implemented in the Training site, e.g. in the on-demand training listing:

Links such as "2" above use #707372 (i.e. --vf-color--neutral--600) which passes the contrast check at the AA level but not at the AAA level.

The problem with that is that we cannot use a lighter gray colour for "disabled" links such as "Previous" in the above example. This is because --vf-color--neutral--500 (which corresponds to #8d8f8e) completely fails the contrast checks for normal text at the AA level. Given that the text is 16px it would classify as normal text.

I couldn't figure out in the description of this component which colour is meant to be used for "disabled" links. On the training site we're using #808080 which isn't a vf-color and also fails the contrast check for normal text.

I think that in this context we could use the link colour #3B6FB6 for links and the Secondary Text Colour #373A36 for the disabled states. This is a quick mockup from changing the colours on the browser:

I feel that this better contrasts links with non links (i.e. text) using conventions that we already have:

Further to this, I think we could also get rid of the current mouseover effect, e.g. on page 3 (which is the same as the active state of page 1):

We can use the underline of normal vf-links for mouseover and signify the active state simply by using bold Primary Text Colour
#1a1c1a. The pagination of the google search results is very similar to this: