hubmapconsortium / hra-ui

HRA UIs Monorepo (includes HRA Portal, EUI, RUI, ASCT+B Reporter, and more)
https://hubmapconsortium.github.io/hra-ui/
MIT License
3 stars 2 forks source link

New component for all apps: Scrollbar appearing on hover #521

Open LibbyUX opened 4 days ago

LibbyUX commented 4 days ago

New component for all apps: Scrollbar appearing on hover

@axdanbol and I caught up yesterday on scrollbars. In the spirit of improving the density of our interfaces, I have an ask for development: Can we please implement a scrollbar that appears on hover of certain modules/containers? This is only for certain containers, not the overall scrollbar of the web page.

This component would work wonders instantly in FTU Explorer components (FTU Library, Matrix Component, and Source Data Section) and Cell Distance Explorer components (Cell Type list & Histogram Legend).

Eventually, we will need this component for the EUI, RUI, the new Digital Object Database in the HRA Portal, and ASCT+B Reporter. There's probably more UIs that will need this, too!

This component pattern is intuitive, clean, and it maximizes what we can show in our UIs.

You can see this functionality in several web browser apps, like Slack and Figma.

FD47B1AC-3FE2-4FB2-8302-E211146F8E6F

Figma

I have specified this scrollbar in the Design System Repo. It has two variants, 12px & 8px.

This design has been implemented in components in the redesigned CDE (Cell Types list & Histogram legend).