✨(front) add SmartScroller component#263
Open
NathanVss wants to merge 3 commits into
Open
Conversation
Add a horizontally scrollable container that overlays an arrow button on each edge where content is hidden by overflow. Clicking an arrow scrolls the viewport by a configurable fraction of its visible width (default 50%), smoothly. Arrows show only on the side(s) with hidden content and are recomputed on scroll and on container/content resize. The native scrollbar is hidden so the arrows are the primary affordance, and a gradient fade hints at the partially-cut content. The arrows are a pointer-only affordance: they are aria-hidden and out of the tab order, since assistive-tech and keyboard users reach the content directly.
Document the component with a Docs page and Overflowing, NoOverflow and Resizable stories so the overflow/resize behaviour can be explored interactively. The argTypes drive the Props table shown in the docs.
Cover the core behaviour with Playwright component tests: arrow visibility per overflow side, the ~50% (and full-width) scroll amount, recomputation on container resize, and the a11y contract that the arrows stay hidden from assistive technology and the tab order.
PanchoutNathan
approved these changes
Jun 26, 2026
Comment on lines
+71
to
+74
| viewport.scrollBy({ | ||
| left: direction * viewport.clientWidth * scrollRatio, | ||
| behavior: "smooth", | ||
| }); |
Collaborator
There was a problem hiding this comment.
scrollBy hardcodes behavior: "smooth", which overrides the CSS scroll-behavior property (the CSS value is only consulted when behavior is "auto"). As a result the SCSS prefers-reduced-motion media query is ignored on arrow clicks — contradicting the docs, which claim it is respected. Dropping the behavior option makes the programmatic scroll follow the CSS (smooth by default, auto under reduced-motion).
Suggested change
| viewport.scrollBy({ | |
| left: direction * viewport.clientWidth * scrollRatio, | |
| behavior: "smooth", | |
| }); | |
| viewport.scrollBy({ | |
| left: direction * viewport.clientWidth * scrollRatio, | |
| }); |
Comment on lines
+85
to
+87
| // Pointer-only affordance: assistive-tech and keyboard users reach | ||
| // the content directly (focusing a child scrolls it into view), so | ||
| // the arrows are hidden from the a11y tree and the tab order. |
Collaborator
There was a problem hiding this comment.
not very sur about this
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds
SmartScroller: a horizontally scrollable container that overlays an arrow on each edge where content overflows. Clicking scrolls the viewport byscrollRatioof its visible width (default 50%), smoothly.From
https://www.figma.com/design/hPwxE24MEaX3mBQ0KXNTSY/UI-kit?node-id=14537-7383&m=dev