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.

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

feat(carousel): Improve support for high item counts #10315

Merged

Conversation

macandcheese
Copy link
Contributor

@macandcheese macandcheese commented Sep 14, 2024

Related Issue: #9121

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

Screen.Recording.2024-09-14.at.5.48.32.PM.mov

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 the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 14, 2024
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Sep 14, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 14, 2024
@macandcheese macandcheese marked this pull request as ready for review September 15, 2024 01:00
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 15, 2024
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good @macandcheese. Just a couple things.

@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 17, 2024
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside from some comments, this LGTM! ✨🎠✨

@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 17, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 17, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 17, 2024
Copy link

@ashetland ashetland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@macandcheese macandcheese merged commit 6ad2612 into dev Sep 18, 2024
14 checks passed
@macandcheese macandcheese deleted the macandcheese/9121-carousel-support-limiting-pagination branch September 18, 2024 15:51
benelan added a commit that referenced this pull request Sep 19, 2024
* origin/dev:
  fix(shell): fix z-index of slotted popover elements (#10325)
  fix(dialog): only prevent default on escape key when escapeDisabled is true (#10336)
  chore: release next
  feat(carousel): Improve support for high item counts (#10315)
  feat: add content inline right (#10338)
  fix: correct non-standard filled icon names (#10309)
  fix(panel): initially closed panel should be hidden (#10308)
  chore(linting): automate tracking of custom Sass functions for stylelint (#10313)
  chore: tidy up demo pages (#10314)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants