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

[Carousel] Improve support for high item counts #9121

Closed
2 of 6 tasks
ashetland opened this issue Apr 12, 2024 · 4 comments
Closed
2 of 6 tasks

[Carousel] Improve support for high item counts #9121

ashetland opened this issue Apr 12, 2024 · 4 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. c-carousel Issues that pertain to the calcite-carousel component 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 - 5 A few days of work, definitely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2024-09-30 - 2.13...

Comments

@ashetland
Copy link
Contributor

Check existing issues

Description

Carousel is currently best used with a small number of items. It could be worth supporting more items or "slides" that exceeds the page indicator display. A user could have 15 slides, but only has space for 5 page indicators.

Acceptance Criteria

A large number of Carousel Items could be supported via a maxPagesDisplayed property or this could be automatic based on width and space available. If there are more items than there are page indicators, there would need to be some kind of queuing-like visual affordance to inform the user that there are more pages than the currently visible indicators show. Would also need to explore what it would look like when the user reaches the last item and loops back to the beginning item.

Relevant Info

cc @macandcheese

Which Component

Carousel

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)
@ashetland ashetland added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Apr 12, 2024
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive calcite-components Issues specific to the @esri/calcite-components package. labels Apr 12, 2024
@macandcheese macandcheese added the c-carousel Issues that pertain to the calcite-carousel component label Apr 24, 2024
@asangma
Copy link
Contributor

asangma commented May 2, 2024

I think adding support for a CarouselMenu might also be a good solution.

@macandcheese
Copy link
Contributor

I think adding support for a CarouselMenu might also be a good solution.

I don't know if a Carousel's main purpose is to serve intention-based browsing like that ("show me slide 5 of 8").

I understand this makes sense in some cases (a gallery of known imagery, selected features, etc. - "I want to go to view feature abc") - but I'd expect a navigation experience like that to be built somewhere around the Carousel - in a Panel with associated UI, etc.

In the future, each "representative dot" might also not represent a single entity - but maybe representing 2/3 Carousel Items in view: #9104

Main intention with this is to resolve the following:

Screenshot 2024-07-02 at 12 05 55 PM Screenshot 2024-07-02 at 12 16 13 PM

I'd propose something like the following:

Add a max-displayed-items property that when set:

  • Reduces the number of displayed "representative dots" to the value of the property.
  • When "more slides exist in a direction" - represent the "last shown" with some combination of a different icon size / icon color. This is a pretty common affordance for this behavior - if a user is "at the end" this icon change is not used. (Note - this behavior could be affected by future properties to allow / disallow "wraparound scrolling" - but that doesn't exist currently)
  • Ensuring the "play / pause" and arrows (if using "inline" display mode) are always visible.

Thoughts:

  • This could be useful at all viewport widths - so while we can / maybe should do this automatically when the Carousel becomes "too narrow" - I think the property might also make sense for other use cases. We could decide "which wins" in some cases if needed and we wanted to implement the "auto collapsing".

@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. needs triage Planning workflow - pending design/dev review. labels Jul 6, 2024
@geospatialem geospatialem added this to the 2024-08-27 - Aug Release milestone Jul 6, 2024
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. labels Jul 6, 2024
@macandcheese macandcheese 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. labels Aug 5, 2024
@macandcheese macandcheese added estimate - 5 A few days of work, definitely requires updates to tests. and removed estimate - 3 A day or two of work, likely requires updates to tests. labels Aug 26, 2024
@macandcheese macandcheese mentioned this issue Sep 14, 2024
Merged
macandcheese added a commit that referenced this issue Sep 18, 2024
@macandcheese
feat(carousel): Improve support for high item counts (#10315)
6ad2612 
**Related Issue:** #9121 

Adds support for better display of high Carousel Item counts by
automatically adjusting the number shown as container width changes.


https://github.com/user-attachments/assets/0d682f21-ac2e-4a4a-830c-e15b6a5faf1d



## Summary

This follows the pattern found in Pagination, as the behavior is quite
similar, but there are a few differences in Carousel to support the
"rotation effect" of the "dots".

- Uses existing breakpoints to determine when to reduce displayed
"dots".
- Uses a "represents more" styling when the first / last visible "dot"
has more siblings before / after.
- When in the "start or end range" - the first / last visible "dot" will
not have a style treatment as it represents the start / end.
- Updates stories, tests, and local demos with new feature.
@macandcheese macandcheese 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 Sep 18, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned macandcheese Sep 18, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Sep 18, 2024

🍠 Verified locally on dev

Screen.Recording.2024-09-18.at.2.32.21.PM.mov

@DitwanP DitwanP closed this as completed Sep 18, 2024
@DitwanP DitwanP 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 Sep 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. c-carousel Issues that pertain to the calcite-carousel component 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 - 5 A few days of work, definitely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2024-09-30 - 2.13.0 Sep Main release
Development

No branches or pull requests
5 participants
@macandcheese @geospatialem @asangma @DitwanP @ashetland