Fix visible scrollbar in SideNav when collapsed #1786
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
alex-ju
force-pushed
the
alex-ju/sidenav-scroll
branch
from
803d57c
to
c3d0cf0
Compare
There was a problem hiding this comment.
OK for me.
One thing I noticed is that in the demo app the scroll bar doesn't jump when re-opening the sidenav (from minimized to expanded) while in the video recording attached to the PR description, in Cloud UI, it jumps (vertically, it seems the content is resized while expanding). Something we should be worried about?
| "@hashicorp/design-system-components": patch | ||
| --- | ||
|
|
||
| `SideNav` - Fixed visible scrollbar in collapsed SideNav when scroll bar is set to be always visible |
There was a problem hiding this comment.
Sure thing – added in 4a4a3e3
| @@ -16,6 +16,11 @@ | |||
| // we use this trick (increasing the container size here, and reducing it at single panel level) | |||
| // to have the panels width match the sidebar extended width (it's used in the animated sliding of the panels) | |||
| margin: 0 calc(var(--token-side-nav-wrapper-padding-horizontal) * -1); | |||
|
|
|||
| .hds-side-nav--is-minimized & { | |||
There was a problem hiding this comment.
I would add a comment here, explaining what is going on and why we need this "hack"
It can happen in the demo app as well, it's related to the size of content in |
alex-ju
force-pushed
the
alex-ju/sidenav-scroll
branch
from
db23c3d
to
734b5b9
Compare
packages/components/app/styles/components/side-nav/content.scss
Outdated
Show resolved
Hide resolved
packages/components/app/styles/components/side-nav/content.scss
Outdated
Show resolved
Hide resolved
alex-ju
force-pushed
the
alex-ju/sidenav-scroll
branch
from
734b5b9
to
19bc91f
Compare
📌 Summary
Fix visible scrollbar in
SideNavwhen collapsed and the scroll bar is set to be always visible.🛠️ Detailed description
When set to be always visible at the OS level or an external mouse or trackpad is used, the scroll bars are always displayed. This is aesthetically unpleasant so we prevent this scroll from being visible by hiding the
hds-side-nav__contentwhen the SideBar is minimized. This change was tested locally incloud-uiandatlas.Note: the demo app commit was added to ease the review, the commit will be removed before merging.
📸 Screenshots
In demo app, with scrollbar set to always be visible
In
cloud-uiwith slowed down animation and scrollbar set to always be visiblesidenav-scroll-before.mp4
sidenav-scroll-after.mp4
🔗 External links
Jira ticket: HDS-2853
Slack thread
👀 Component checklist
yarn test:a11y --filter="COMPONENT-NAME")a11yAudithas been added💬 Please consider using conventional comments when reviewing this PR.