patternfly-design
patternfly-design copied to clipboard
patternfly
Scrollbar - transparent track
The corners of the scroll bar look odd beside the rounded corner of page sections.
It doesn't seem we are updating the color of the scrollbar in dark theme like we were in PF5. Were we using color-theme: dark or something similar before that we are no longer using?
We could update the track color of the scrollbar using css scrollbar-color. This issue is especially obvious in Fedora machines.
We should also check the browser compatibility of the scrollbar-color style.
We updated the dark theme scrollbar color, but we need to move the scrollbar to an element with a border radius to have the scrollbar round on the edges with the parent container. I wonder if this can be addressed in https://github.com/patternfly/patternfly/issues/6712? cc @evwilkin
Design refinements to improve scrollbar appearances in v6: Here are several [hopefully small] adjustments to our page/sidebar components that should help with the appearance of scrollbars in v6:
- [Transparent track as mentioned above if possible]
- Reduce the page border radius to border—radius—medium so the curve doesn't look as awkward cutting off the scrollbar. Placing within an element that can get a border radius might still help here @mcoker)
- Reduce the border around the content area to global—spacer—xs, 4px(it was 8px before)
- Adjust the nav scrollbar to have padding to its right so that it is centered between left nav and page body
With adjustments listed above:
Current state:
These adjustments should also help https://github.com/patternfly/patternfly/issues/6834
Wdyt @nicolethoen @andrew-ronaldson @mcoker @thatblindgeye?
@lboehling nice! Put those together along with the scrollbar thumb/track update in https://github.com/patternfly/patternfly/pull/7068.
I set the scrollbar thumb color to our border--color--default token, and set the track to transparent, and am only applying those styles to the main container and sidebar. Other things that scroll don't have that update, but could.
FWIW here's a screenshot without the scrollbar color updates, if you want to see what that looks like.
@lboehling with https://github.com/patternfly/patternfly/pull/7101, can we close this issue?
