[Pagination] Responsive layout

[brittneytewks]

Description

Responsiveness across Calcite Design System, focused on web (traditionally desktop sized web browser), tablet, phone screen sizes, and large monitors.

Acceptance Criteria

1. Consider breaking changes for folks. Consultation should occur on both the design and development teams.
2. Components need to be designed for the following breakpoints:

• Small (s), 476px
• Medium (m), 768px
• Large (l), 1152px
• Extra larger (xl), 1440px

Relevant Info

Part of epic #6670

Which Component

pagination

Example Use Case

No response

Priority impact

p4 - not time sensitive

Esri team

Calcite (design)

[SkyeSeitz]

Update from team discussion today:
@rmstinson presented iterations for a Pagination on smaller screen sizes and mobile devices. Below is the solution we landed on, which Mike will refine before our final design proposal.

Additional action items for the team: Look at how this could also be used on desktop size viewports.

[rmstinson]

Added another section with final revisions! Figma link here: https://www.figma.com/file/zBGnAOEOxqKGocUjqiYbed/Responsive-Layout?node-id=13257%3A304540&t=sQkUqpbjmja9kXmQ-1

Here are the screenshots of the three options for screen widths ranging from 320px-479px. Full designs in the Figma link above :)

[macandcheese]

Some feedback - I like A in the screen above the best. It keeps the touch area for back and forth close together and anchors the controls to the sides - B and C don't seem to be visually as well spaced.

I would be interested to see a combination of the location of the < > in A with another text treatment.

Not a huge fan of the caret or the blue color, I wonder if we can look at some other styles for that button? Maybe treating the "100" differently than the "of 199" like the B example (we could treat the entire area as a larger hit area).

[ashetland]

I lean most toward [A] as I look at these more. I through together a couple quick riffs based on [A] to add to the mix. I flipped the element order here as an exploration, but could go with the original order as well.

Also, I thought this would be some good food for thought since we talked about "items per page at one point" (may be out of scope here). I found what the Carbon team chooses to display at different widths interesting:

[SkyeSeitz]

I lean towards the flipped order with chevron back/forward controls. Explored a slightly different caret+txt treatment with spacing overrides. Could totally use calcite-select component as we discussed:

[macandcheese]

(or C) - I think that alignment is the strongest. I think some font weight / underline approaches could be looked at but those two seem like the best visual choices, IMO.

[driskull]

I'm not sure the Popover+list is the best way to go about a selection of pages. Why not the calcite-select component?

The Popover+list is essentially a role of dialog and a role of treegrid inside of it. Its also focus trapping. I would expect a single component here that can be operated with just arrow keys once tabbed into.

@SkyeSeitz @rmstinson @geospatialem can you comment on the above?

[driskull]

I think it would also be good if we have an option to turn off the pagination menu. What do you think?

[macandcheese]

Agreed - I think that complex of an interaction is outside the scope of a Calcite Components pagination component. I'd expect Pagination to be limited to (at the most), page selection, "page size / items per page" selection, and direct page selection.

Launching a "rich detail" list of Pagination options like in the above widget is valid UI, but I think it's something you could build separately, as the content could be drastically different depending on need. Like @driskull mentioned, I think that particular UI could probably use a dropdown, having an entire Panel header UI there in a List seems kind of heavy.

[driskull]

Do we want to kick this issue back to design? its slotted for the current responsive milestone. cc @brittneytewks

[macandcheese]

Will defer to @SkyeSeitz but I think the plan is to add additional display modes and the responsive behavior will be to collapse the number of visible "page steps" as container size shrinks.

I don't think this component needs to consider having UI of "launch a list or dropdown or other component to have a rich selection". That IMO is not really part of pagination.

Really those are more like Carousel since only one item is being displayed at a time.

[driskull]

Maybe a user could just slot in something that displays at the xs size? Then they could add a menu/button/whatever?

[macandcheese]

Yeah. I think at any size really, just place that adjacent to the pagination, pagination’s responsive adjustment could just be reduce number of pages shown as needed. The other view modes are good to have as an option at any viewport.

[SkyeSeitz]

Thanks for the thoughts above, folks. I am in agreement the first question is regarding scope of what we consider responsive- I would consider the following behavior a responsive Calcite Pagination component.

responsive-pagination-mockup.mov

[SkyeSeitz]

Updated Figma link for responsive feature.

Sounds like non-responsive features that are valuable at any viewport size, such as items per page or additional display modes, can be logged separate from this issue 👍🏽

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in next for all but very specific smaller XS dimensions (under 485px). A follow-up issue was created for the specific size, anticipated for September/October.