mui
[tabs] Expose tablist scroll overflow state
Feature request
Summary
Consumers of tablist don't currently have a way to know whether the list has overflowing content to either ends.
Examples in other libraries
In @wordpress/components we are able to access ariakit's internal state and calculate that information ourselves, and we use it to show a mask gradient
Related code: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/tabs/tablist.tsx#L97-L100
Motivation
Consumers should know whether the tablist has overflowing content in any direction, which could be useful to add visual indication to the user about the overflowing content — for example
- gradient masks to suggest there is more content to scroll
- scroll buttons that could be enabled / disabled
This information could be made available via CSS variables / data attributes on the tablist.
Although I'm not sure how it could be exposed in case it was needed for disabling buttons.
Potentially, we could expose one "variable" per side: inline start, inline end, block start, block end.
I’m trying this out locally. If no one’s taken it yet, I’d love to open a PR. @StephanieJoly4
