Skip to content

Edm/vel 7101#642

Open
Elodie-DeMatteis-Upf wants to merge 3 commits intomasterfrom
edm/vel-7101
Open

Edm/vel 7101#642
Elodie-DeMatteis-Upf wants to merge 3 commits intomasterfrom
edm/vel-7101

Conversation

@Elodie-DeMatteis-Upf
Copy link
Contributor

@Elodie-DeMatteis-Upf Elodie-DeMatteis-Upf commented Feb 16, 2026

What does this PR do?

This PR implements a new OSS::ScrollableBar component.
This new component displays a scrollable row of items given in its content named block. Buttons are displayed on the far right and left depending on the scroll state.
This new component also supports two different designs, thanks to a buttonStyle arg, defaulting to "button" style.

Additional information about the scroll performed when clicking on the buttons: the amount of scroll depends directly on the container size. The scroll step width is currently 33% of the scrollable container.

Related tests, documentation, and examples, have been added.

Related to: #

What are the observable changes?

Enregistrement.de.l.ecran.2026-02-16.a.14.24.53.mov

Good PR checklist

  • Title makes sense
  • Is against the correct branch
  • Only addresses one issue
  • Properly assigned
  • Added/updated tests
  • Added/updated documentation
  • Migrated touched components to Glimmer Components
  • Properly labeled

@Elodie-DeMatteis-Upf Elodie-DeMatteis-Upf self-assigned this Feb 16, 2026
@linear
Copy link

linear bot commented Feb 16, 2026

}

get buttonStyle(): string {
return this.args.buttonStyle === 'icon' ? 'icon' : 'button';
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
return this.args.buttonStyle === 'icon' ? 'icon' : 'button';
return this.args.buttonStyle ?? 'button';

}

get containerElement(): HTMLElement {
return document.querySelector(`#${this.scrollableBarId} .inner-container`) as HTMLElement;
Copy link
Contributor

Choose a reason for hiding this comment

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

If for any reason this.containerElement is undefined, this.scrollWith will break, I'm not sure about as HTMLElement

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants