Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Pagination] Responsive layout for specific XS layouts/dimensions #7856

Closed
2 of 4 tasks
geospatialem opened this issue Sep 20, 2023 · 10 comments
Closed
2 of 4 tasks

[Pagination] Responsive layout for specific XS layouts/dimensions #7856

geospatialem opened this issue Sep 20, 2023 · 10 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone low risk Issues with low risk for consideration in low risk milestones p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2023 November Pri...

Comments

@geospatialem
Copy link
Member

geospatialem commented Sep 20, 2023 •
edited
Loading

Check existing issues

Description

A follow-up issue to #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:
MicrosoftTeams-image (21)
Screen.Recording.2023-09-20.at.10.51.12.AM.mov

Relevant Info

Part of epic #6670, originated from #6687

Which Component

pagination

Example Use Case

No response

Priority impact

p2 - want for current milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. p - high Issue should be addressed in the current milestone, impacts component or core functionality 0 - new New issues that need assignment. Calcite (design) Issues logged by Calcite designers. estimate - 3 A day or two of work, likely requires updates to tests. ready for dev Issues ready for development implementation. labels Sep 20, 2023
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Sep 20, 2023
@github-actions
Copy link
Contributor

cc @geospatialem, @brittneytewks

@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Sep 20, 2023
@geospatialem geospatialem mentioned this issue Sep 20, 2023
Closed
27 tasks
@geospatialem geospatialem added the low risk Issues with low risk for consideration in low risk milestones label Sep 20, 2023
@driskull
Copy link
Member

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

@geospatialem
Copy link
Member Author

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
Copy link
Member

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

@geospatialem
Copy link
Member Author

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
Copy link

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
Copy link
Member

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

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Sep 28, 2023
@driskull
Copy link
Member

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

@geospatialem geospatialem added spike Issues that cannot be estimated well enough until the team has done further research and removed ready for dev Issues ready for development implementation. labels Sep 28, 2023
@alisonailea alisonailea mentioned this issue Oct 12, 2023
Merged
alisonailea added a commit that referenced this issue Oct 12, 2023
@alisonailea
feat: add xxs breakpoint to tokens (#7992)
05512b6 
**Related Issue:** #7856

## Summary

generates a new SCSS variable `$breakpoint-width-xxs: 320px;`
@jcfranco jcfranco mentioned this issue Oct 23, 2023
Merged
jcfranco added a commit that referenced this issue Oct 25, 2023
@jcfranco
chore(responsive): add xxs breakpoint prop (#8041)
f7ecc6c 
**Related Issue:** #7856

## Summary

Updates `breakpoints` lookup object to include `xxs` (added in
#7992).
driskull added a commit that referenced this issue Nov 9, 2023
@driskull
feat(pagination): Introduce responsive design for extra extra small b…
f8b3bbf 
…reakpoint. #7856
@driskull driskull mentioned this issue Nov 9, 2023
Merged
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. spike Issues that cannot be estimated well enough until the team has done further research labels Nov 9, 2023
driskull added a commit that referenced this issue Nov 14, 2023
@driskull
feat(pagination): Introduce responsive design for xxsmall breakpoint (#…
ab20eb0 
…8150)

**Related Issue:** #7856

## Summary

- Refactors & renames CSS to reduce common css classes and remove unused
classes.
- Adds message strings for First/Last buttons
- Supports xxs breakpoint design
- Refactors some logic into `@State()` variables
- Cleanup
- Cleanup tests
- Update storybook breakpoint util to handle screenshot test
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Nov 14, 2023
@github-actions github-actions bot assigned geospatialem and unassigned driskull Nov 14, 2023
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 15, 2023
@geospatialem
Copy link
Member Author

Verified in 1.11.0-next.2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone low risk Issues with low risk for consideration in low risk milestones p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2023 November Priorities
Development

No branches or pull requests
4 participants
@driskull @alisonailea @geospatialem @SkyeSeitz