-
-
Notifications
You must be signed in to change notification settings - Fork 263
[scroll area] Add overflow presence state attributes and CSS variables #2478
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[scroll area] Add overflow presence state attributes and CSS variables #2478
Conversation
commit: |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Bundle size report
|
d267b68 to
0ab54c9
Compare
| "data-has-overflow-x": { | ||
| "description": "Present when the scroll area has horizontal overflow." | ||
| }, | ||
| "data-has-overflow-y": { | ||
| "description": "Present when the scroll area has vertical overflow." | ||
| }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Present when scrollWidth/Height > clientWidth/Height
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"Present when the Scroll Area's content is taller than the viewport" ?
| "data-overflow-x-end": { | ||
| "description": "Present when there is overflow on the inline end side for the horizontal axis." | ||
| }, | ||
| "data-overflow-x-start": { | ||
| "description": "Present when there is overflow on the inline start side for the horizontal axis." | ||
| }, | ||
| "data-overflow-y-end": { | ||
| "description": "Present when there is overflow on the block end (bottom) side." | ||
| }, | ||
| "data-overflow-y-start": { | ||
| "description": "Present when there is overflow on the block start (top) side." | ||
| } | ||
| }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Present when .scrollTop/Left > 0 for start
I'm curious if there should also be CSS variables for the scroll amount if you want to transition the strength of e.g. an overflow gradient by the amount. Maybe CSS scroll-driven animations already solve this, though
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm curious if there should also be CSS variables for the scroll amount if you want to transition the strength of e.g. an overflow gradient by the amount. Maybe CSS scroll-driven animations already solve this, though
I haven't needed such variable for my use case so far, but I agree that it would be interesting.
Here we could also decide to expose it only if/when needed?
532ec7c to
c2aa002
Compare
c2aa002 to
51392ce
Compare
In my experience / for my use case, a threshold wouldn't be needed. I think we can be "lazy" and expose the option only if/when needed. |
Signed-off-by: atomiks <[email protected]>
e4630b7 to
3940537
Compare
Bundle size report
|
6b744a7 to
6decd43
Compare
6decd43 to
b1effeb
Compare
9734c83 to
6aeb302
Compare
| "data-has-overflow-y": { | ||
| "description": "Present when the scroll area content is taller than the viewport." | ||
| }, | ||
| "data-overflow-x-end": { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's the advantage of having separate attributes for -start and -end?
We could use data-has-overflow-x="start end".
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Edge scroll gradients work better with boolean attrs.
Compare:
.fade-start[data-overflow-y-start],
.fade-end[data-overflow-y-end] {
opacity: 1;
}This breaks unless you use ~= token matchers which isn't intuitive:
.fade-start[data-has-overflow-y="start"],
.fade-end[data-has-overflow-y="end"] {
opacity: 1;
}4b49b9c to
35109fa
Compare
Closes #1100
Closes #2706
data-* attributes are applied to
Root,Viewport, andScrollbarCSS variables are added to
Root:In addition, there's a configuration prop to determine when the attrs should be added: