[Pagination] Responsive layout for specific XS layouts/dimensions

[geospatialem]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

A follow-up issue to https://github.com/Esri/calcite-design-system/issues/6687 to address specific XS screen dimensions, where pagination should be sized to accommodate specific XS dimensions, as not all use cases fit the 475px breakpoint.

Note the start/end buttons are not yet in the Calcite UI icons, Skye added a high priority ticket for them to be added. The current button icons are local SVGs (currently noted in Figma).

cc @SkyeSeitz for design expertise, specifics with the breakpoint needed, and follow-up when working through the responsive update.

Acceptance Criteria

• The last responsive addition should be consulted with Skye
• Figma file
• Screenshot and GIF:

https://github.com/Esri/calcite-design-system/assets/5023024/751b0b3f-ec9e-475c-a76f-029227ff38d6

Relevant Info

Part of epic https://github.com/Esri/calcite-design-system/issues/6670, originated from https://github.com/Esri/calcite-design-system/issues/6687

Which Component

pagination

Example Use Case

No response

Priority impact

p2 - want for current milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-react
• [ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[driskull]

A blocker for this would be adding a new breakpoint for a smaller size.

[geospatialem]

A blocker for this would be adding a new breakpoint for a smaller size.

@driskull Should we migrate this issue to October to work out the new breakpoint?

[driskull]

@geospatialem Thats a good question for the design team, might be a good idea unless they can do it sooner.

[geospatialem]

A blocker for this would be adding a new breakpoint for a smaller size.

Should we migrate this issue to October to work out the new breakpoint?

Thats a good question for the design team, might be a good idea unless they can do it sooner.

cc @SkyeSeitz WDYT?

[SkyeSeitz]

Hey folks! Discussed considering adding an additional breakpoint at 320px with Matt, which is generally the smallest mobile size. This could work just for Pagination or across all components if needed, but would love insight from @jcfranco if you lean one way or the other.

Link to Pagination specs with additional breakpoint.

[driskull]

Either way, if we add the breakpoint as a global breakpiont or a component breakpoint, can we put the new breakpoint in a token?

[driskull]

@geospatialem this should be spiked/blocked until we have another breakpoint to use for this work.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified in 1.11.0-next.2.