feat(select): scroll buttons

[canerakdas]

Description

We were using a custom scrollbar with the Select component. With this PR, we’re replacing the existing behavior with scroll buttons that offer a better user experience

Validation

Scroll buttons should be visible in the Select components in the preview

Related Issues

fixes #7468

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npm run format to ensure the code follows the style guide.
• I have run npm run test to check if all tests are passing.
• I have run npx turbo build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Apr 15, 2025 9:44pm

[Copilot]

Copilot reviewed 3 out of 5 changed files in this pull request and generated no comments.

Files not reviewed (2)

• packages/ui-components/Common/Select/index.module.css: Language not supported
• packages/ui-components/package.json: Language not supported

Comments suppressed due to low confidence (2)

packages/ui-components/Common/Select/index.tsx:170

• Replacing the ScrollPrimitive.Root wrapper with separate scroll buttons may affect the scroll context for the Viewport; please verify that the new structure maintains the intended scroll functionality.

<SelectPrimitive.ScrollUpButton>

apps/site/next.config.mjs:86

• Ensure that removing the '@radix-ui/react-scroll-area' dependency does not affect other parts of the codebase that might be relying on it.

      '@radix-ui/react-scroll-area',

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 99	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 97	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[github-actions]

Unit Test Coverage Report

Title	Lines	Statements	Branches	Functions
@node-core/ui-components		96.15% (175/182)	78.67% (107/136)	89.74% (35/39)
@nodejs/website		84.7% (493/582)	76.03% (165/217)	86.88% (106/122)

Title	Tests	Skipped	Failures	Errors	Time
@node-core/ui-components	31	0 💤	0 ❌	0 🔥	5.082s ⏱️
@nodejs/website	156	0 💤	0 ❌	0 🔥	6.613s ⏱️

[AugustinMauroy]

IMO scroll when over is too quick but I didn't fond anything about config of that on radix doc.
Also maybe make select's stories up to date by increasing the amount of possible value.

[avivkeller]

IMO scroll when over is too quick but I didn't fond anything about config of that on radix doc.

I disagree. I think it's fine.

Also maybe make select's stories up to date by increasing the amount of possible value.

https://64c7d71358830e9105808652-wqpavshimg.chromatic.com/?path=/story/common-select--without-label&globals=viewport:large has the ⬆️ Chevron, but ya, maybe adding a few more values just to be sure

[AugustinMauroy]

I disagree. I think it's fine.

I think we're going down too fast, all the way to the bottom, so we don't have time to see all the options. For example, if you go to the download page and select the version, you'll see that navigating with this new button is complicated.

[avivkeller]

I think the speed feels right. Hovering over the "down" arrow scrolls faster, while the scrollbar allows for more precise control.

[canerakdas]

IMO scroll when over is too quick but I didn't fond anything about config of that on radix doc.

IMO faster-than-normal scroll speed in these areas is a design choice. The goal seems to be helping users quickly navigate from the first item to the bottom of a long list. At the same time, users who prefer a slower pace can still scroll more gradually using standard scroll behavior. But, it would still be nice to have control over the scroll speed 😄

[AugustinMauroy]

LGTM !
It's true that on a long list as the story shows it goes. And there's always the arrow keys to move around the options.