[ScrollArea] Create new ScrollArea component

[atomiks]

• I have followed (at least) the PR section of the contributing guide.

Closes #649

Preview: https://deploy-preview-665--base-ui.netlify.app/components/react-scroll-area/

[mui-bot]

Netlify deploy preview

https://deploy-preview-665--base-ui.netlify.app/

Generated by 🚫 dangerJS against 38d38fb

[oliviertassinari]

It's about mui/mui-x#510, right? I have added the reference so developers can find a clear cross-link:

---

We could envision this component under the Base UI X brand umbrella in the future because most applications don't have a custom scrollbar. It seems more niche relative to nailing a menu, or combo box use case. Now, it's doesn't match with the criteria for Base UI X we defined (>=4 pages, >=1-2 person full time), still, I find it interesting that it shows the potential opportunity cost of having it in the core, or even open-source.

[colmtuite]

@oliviertassinari

It's about mui/mui-x#510, right?

No we didn't see this issue prior to planning this work. It's just a basic building block of high-quality web dev, so I had planned to add it from the beginning.

most applications don't have a custom scrollbar

Very many web apps (Slack, Linear, Radix docs etc. etc.) have custom scrollbars. It's not possible to build a high-quality web UI without them.

We could envision this component under the Base UI X brand umbrella

Do you think this belongs under the premium components? We need it for our new docs (for the sidebar and code blocks). It's not a huge investment, and Radix provides one for free.

[oliviertassinari]

No we didn't see this issue prior to planning this work. It's just a basic building block of high-quality web dev, so I had planned to add it from the beginning.

@colmtuite In any way, I mostly wanted to create a backlink between these two so it's easier to discover the link.

Very many web apps (Slack, Linear, Radix docs etc. etc.) have custom scrollbars. It's not possible to build a high-quality web UI without them.

For peak execution, I very much agree.
For the average UIs, I don't think it's a big need, it's common to not see it used in average UIs, e.g. I personally never implemented a custom scrollbar 😄.

I think to be careful about the opportunity cost: downloads https://npm-stat.com/charts.html?package=overlayscrollbars&package=react-dropzone&from=2018-10-05&to=2024-10-05 vs. effort to do it right: https://github.com/KingSora/OverlayScrollbars/issues?q=is%3Aissue+is%3Aclosed.

The platform exposes some primitives to customize this, e.g. https://codepen.io/oliviertassinari/pen/PoMzdJa

Screen.Recording.2024-10-06.at.22.37.01.mov

but until they fix w3c/csswg-drafts#9826, w3c/csswg-drafts#10591, it doesn't feel like a viable option, far from it.

Do you think this belongs under the premium components? We need it for our new docs (for the sidebar and code blocks). It's not a huge investment, and Radix provides one for free.

Premium plan: no. Pro plan: maybe for the styled layer it would make sense? It might be pushing it too far to have this as a pro feature in Base UI.

I get the feeling that 3 years from now, this component is no longer needed, built-in into the platform.

[oliviertassinari]

@romgrk implemented a custom scroll container for the data grid https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx. Maybe this can be of any help. For example, can be seen in https://mui.com/x/react-data-grid/#pro-plan.

[oliviertassinari]

Built-in inline style? Not sure this will fly with CSP.

[oliviertassinari]

Great. In the visual regression, we do the opposite, so a great way to ensure that our style works with both models:

base-ui/test/regressions/TestViewer.js

Line 52 in d29192a

box-sizing: content-box;

Edit: oh, wait, it's broken, fixed: #707.

[michaldudak]

The CSB version of the intro demo (https://codesandbox.io/p/sandbox/pydrhc?file=%2Fsrc%2Findex.tsx) looks slightly broken:

Likely a box-sizing issue?

---

As for the implementation, I couldn't spot any issues. Good work!