[WIP] feat(scrollbars): introduce the @zendeskgarden/react-scrollbars package #163
Conversation
| to view all of the available customization props and methods. | ||
|
|
||
| ```jsx | ||
| const StyledSection = styled.div` |
There was a problem hiding this comment.
It would be preferable to use the MD Typography component here (and throughout).
|
|
||
| ```jsx | ||
| const StyledSection = styled.div` | ||
| margin-bottom: 16px; |
There was a problem hiding this comment.
Use the zdSpacing (20px) variable here (and throughout).
packages/scrollbars/src/Scrollbar.js
Outdated
| {...this.removeInvalidStyling(props)} | ||
| className={classNames( | ||
| ScrollbarStyles['c-scrollbar__thumb'], | ||
| ScrollbarStyles['c-scrollbar__thumb--horizontal'] |
There was a problem hiding this comment.
This is not a real class (incorrect CSS documentation). Style is determined by the orientation of the parent (.c-scrollbar__track--horizontal).
packages/scrollbars/src/Scrollbar.js
Outdated
| {...this.removeInvalidStyling(props)} | ||
| className={classNames( | ||
| ScrollbarStyles['c-scrollbar__thumb'], | ||
| ScrollbarStyles['c-scrollbar__thumb--vertical'] |
There was a problem hiding this comment.
This is not a real class (incorrect CSS documentation). Style is determined by the orientation of the parent (.c-scrollbar__track--vertical).
packages/scrollbars/src/Scrollbar.js
Outdated
| data-garden-id={COMPONENT_ID} | ||
| data-garden-version={PACKAGE_VERSION} | ||
| className={classNames(ScrollbarStyles['c-scrollbar'], { | ||
| [ScrollbarStyles['c-scrollbar--dark']]: dark, |
There was a problem hiding this comment.
doesn't appear to be working in demo.
There was a problem hiding this comment.
This seems to be working. Can we do another walkthrough?
packages/scrollbars/src/Scrollbar.js
Outdated
| return ( | ||
| <Scrollbars | ||
| hideTracksWhenNotNeeded | ||
| thumbMinSize={52} |
There was a problem hiding this comment.
Does the underlying component provide a reasonable thumbMinSize default?
packages/scrollbars/src/Scrollbar.js
Outdated
| {...this.removeInvalidStyling(props)} | ||
| className={classNames( | ||
| ScrollbarStyles['c-scrollbar__track'], | ||
| ScrollbarStyles['c-scrollbar__track--vertical'], |
There was a problem hiding this comment.
Garden's track styling doesn't appear to be coming through.
austingreendev
force-pushed
the
agreen/scrollbars
branch
from
1174277 to
298a601
Compare
|
@jzempel and @ryanseddon I just refactored this to move to the |
| import classNames from 'classnames'; | ||
| import styled from 'styled-components'; | ||
| import PerfectScrollbar from 'perfect-scrollbar'; | ||
| import { isRtl, retrieveTheme } from '@zendeskgarden/react-theming'; |
There was a problem hiding this comment.
Horizontal scrolling for (not so)PerfectScrollbar is completely broken for RTL. Vertical isn't great, either.
There was a problem hiding this comment.
Yeah I'm seeing some weird behaviour with rtl mode on
|
This PR has gotten stale. Lets close until it's time to revisit this experiment. |
🚧 This PR doesn't have any testing yet 🚧
Description
This is an intro PR for the new
react-scrollbarspackage. The API ofreact-custom-scrollbarsis very restrictive, so there are some weird rendering flows and utility methods in this one.Pre-published at: https://garden.zendesk.com/react-components/scrollbars for some 👀
Checklist
designer as a reviewer)
component
yarn start)src/index.jsexport