mui / mui/base-ui

[tabs] Expose tablist scroll overflow state

Open
#2,103 3 comments 0 reactions 0 assignees View on GitHub
component: tabs
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# 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

![Image](https://github.com/user-attachments/assets/2ee7a62f-1c48-4b4a-92ee-7db49532021d)

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.