feat(#3346): add horizontal scrolling to Scroll Panel#4000
Closed
bdfranck wants to merge 0 commit into
Closed
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a direction prop to the Scroll Panel web component (and Angular/React wrappers) to support horizontal scrolling, including updated scroll-edge detection and updated shadow/border styling for left/right edges.
Changes:
- Added
direction: "vertical" | "horizontal"to the Scroll Panel web component and wrapper components. - Updated scroll state calculation to support horizontal edge states (
at-left/at-right) and apply appropriate shadows/borders. - Added/updated tests and demo routes to exercise the new horizontal scrolling behavior.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| libs/web-components/src/components/scroll-panel/ScrollPanelWrapper.test.svelte | Passes direction through the Svelte test wrapper into <goa-scroll-panel>. |
| libs/web-components/src/components/scroll-panel/ScrollPanel.svelte | Implements the direction prop, horizontal scroll state detection, and horizontal styling (layout + shadows). |
| libs/web-components/src/components/scroll-panel/ScrollPanel.spec.ts | Adds a spec asserting direction is passed to the custom element. |
| libs/react-components/src/lib/scroll-panel/scroll-panel.tsx | Adds direction to the React wrapper prop types and forwards it to the web component. |
| libs/react-components/src/lib/scroll-panel/scroll-panel.spec.tsx | Adds a React wrapper test asserting the direction attribute is set. |
| libs/angular-components/src/lib/components/scroll-panel/scroll-panel.ts | Adds direction input and binds it as an attribute on the web component. |
| libs/angular-components/src/lib/components/scroll-panel/scroll-panel.spec.ts | Adds an Angular wrapper test asserting the direction attribute is set. |
| apps/prs/react/src/routes/features/feat3347.tsx | Adds a React demo section showcasing horizontal scrolling in the scroll panel. |
| apps/prs/angular/src/routes/features/feat3347/feat3347.component.ts | Adds demo data (columns/rows) for the Angular horizontal scrolling example. |
| apps/prs/angular/src/routes/features/feat3347/feat3347.component.html | Adds an Angular demo section showcasing horizontal scrolling in the scroll panel. |
| apps/prs/angular/src/routes/features/feat3347/feat3347.component.css | Adds CSS for the Angular horizontal scrolling demo grid. |
Comments suppressed due to low confidence (1)
libs/web-components/src/components/scroll-panel/ScrollPanel.svelte:38
_scrollStatecan now be "at-left"/"at-right", but the relayed event payload is typed asScrollPanelStateChangeRelayDetailwhosestateunion (inlibs/web-components/src/types/relay-types.ts) still only allows "no-scroll" | "at-top" | "middle" | "at-bottom". This makesrelay<ScrollPanelStateChangeRelayDetail>(..., { state: _scrollState, ... })a type mismatch and will fail TypeScript compilation (and consumers can’t type-narrow horizontal states). Update the shared relay detail type (and any dependent logic, if needed) to include the new horizontal states.
type ScrollState = "no-scroll" | "at-top" | "middle" | "at-bottom" | "at-left" | "at-right";
let _hostEl: HTMLElement | null = null;
let _scrollEl: HTMLElement | null = null;
let _scrollState: ScrollState = "no-scroll";
Comment on lines
+121
to
+125
| function updateScrollState() { | ||
| if (!_scrollEl) return; | ||
| const { scrollTop, scrollHeight, clientHeight } = _scrollEl; | ||
| const isVertical = direction === "vertical"; | ||
| const scrollValue = isVertical ? _scrollEl.scrollTop : _scrollEl.scrollLeft; | ||
| const scrollSize = isVertical ? _scrollEl.scrollHeight : _scrollEl.scrollWidth; |
twjeffery
reviewed
Jun 8, 2026
bdfranck
force-pushed
the
benji/horizontal-scroll-panel
branch
from
3ca34a9 to
d42b4dd
Compare
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
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.
This PR adds a
directionproperty to the Scroll Panel to allow for horizontal scrolling. This PR was branched off of #3933 and will need to be updated as that work evolves.