Improvements to pagination

[al-bakalova]

Pattern to amend

Table controls

Visual

MAAS

LXD

Context

MAAS has recently introduced a table control bar. It consists of the following three elements:

• Items count
• Pagination (new look and feel)
• Items per page selection

To meet our user's needs, as well as to keep the experience across products consistent, the LDX team has decided to adopt the pattern.

To meet the needs of the MAAS user, the table control bar is positioned above the table. To meet the needs of the LXD users, the table control bar is positioned below the table, as a sticky table footer. (see mockups in Zeplin)

Links to the GitHub tasks (MAAS) Page size select Pagination

We believe other products can benefit from this pattern.

[bartaz]

Thanks @al-bakalova, could you add some screenshots to the description? It makes it easier to understand what it's about without clicking on all the links.

[amylily1011]

@dgtlntv Can you add some interaction images for the pagination in the description here as well? 😃

[dgtlntv]

[dgtlntv]

FYI: @ndv99 Worked on the implementation for MAAS!

[ndv99]

Not sure how much help this might be but here's the SCSS I wrote for it:

.p-pagination--items {

  padding-bottom: $spv--small;

  .p-button {
    margin: 0;
    border: 0;
  }

  .p-pagination__link--next {
    margin-right: $spv--large * 2;
  }

  .p-pagination__input {
    margin: 0 $spv--small;
    appearance: none;
    width: 3rem;
    min-width: 0;
    text-align: center;
  }

  // required to get rid of buttons/arrows while keeping number-only input
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    appearance: none;
  }

  input[type=number] {
    appearance: textfield;
  }
}

[lyubomir-popov]

@al-bakalova and @juanruitina to do some benchmarking, and propose a mini spec explaining when to use which version and which exact versions are being proposed.

[lyubomir-popov]

@AnnSoMuller to link to an example spec here

[AnnSoMuller]

Sure. here is the Google drive folder for specs and here the one for pagination specs

[bartaz]

Not sure if still relevant, but we used to have a minimal pagination proposal like that before (via #3649):

Visual

Context

This new style of next and previous pagination is being placed at the top of tables in MAAS.

Not sure if it's still being used, should it be considered as variant, or is it replaced by other styles of pagination already.

[bartaz]

Another pagination related discussion about positioning of pagination: https://github.com/canonical/vanilla-framework/issues/3208

[bartaz]

Table Pagination has been recently added to React components: https://github.com/canonical/react-components/pull/1013 See example and docs: https://canonical.github.io/react-components/?path=/docs/tablepagination--docs

Are we ready to build this into Vanilla, does it need any more design work? @danielmutis @juanruitina ?

[juanruitina]

Alex and I did some benchmarking around this.

The React implementation seems to work good enough for tables, although I'd suggest one change: I'd rather have a clear label for the "Items per page" selector: having "/page" as part of each option feels awkward and would result in weird output from screen readers. Something like this (quick mockup, selector as compact as possible):

On Sites we tend to mention the number of search results at the top, then have the standard pagination at the bottom left and results per page at the bottom right. I understand this could still be an option, am I right?

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15225.

This message was autogenerated

[apollo13]

Following up on the comment @juanruitina made, this is how it looks in patternfly (https://staging-v6.patternfly.org/components/pagination):

I find this takes up less space than "Items per page: " as label and exposes more information.