Cartodb: Unify Scrollbars

[josecruz]

Context

Original issue: https://github.com/CartoDB/design/issues/660
The design team found different versions of the scrollbars so basically we wanted to unify them all to keep the consistency between them and also enhance the usability of it.

We made changes and different behaviours to horizontal and vertical scrolls changing its position and, in vertical scrolls, the interaction:

Horizontal Scrolls (on carousels)

Behaviour changes

• When clicking on the arrows, items will pass one by one.
• Size will not change on hover (it's going to change only on vertical scrolls)
• Hovering the arrows will change its colors to a darker one.
  

Vertical Scrolls

Behaviour changes

• When hovering the scrollbar, it'll increase its size to 8px (this is to make it easily clickable)
• Sitcked on the borders.

(note: that's actually a horizontal scroll but will behave the same way as verticals does)

Components test:

We did a small test on few of our components, here you have how it will look like (let me know if you need anything more):

[xavijam]

First of all, agree to unify the scrollbars, superb idea. But I have to say that I'm not a good friend of the horizontal arrows, but it is true we can improve the thumbnails slider, could we try something @saleiva suggested (if someone scroll, horizontal or vertical, it moves the slider) instead of adding that?.

Another thing, I'm a really big fan of the new popup/infowindow scroll, it is super nice. Could we keep it? 😸

[noguerol]

Birras on me if you add a scroll wheel event on horizontal scrollbars.

[josecruz]

+1000 to scrolling vertically and move the slider horizontally. @CartoDB/design what do you think about keep the current scrollbars on the popups?

[urbanphes]

But instead of keeping the current horizontal scroll bars for the carousel we can test with the new design more square, removing the arrows. not¿? It would be the same behavior that the vertical scroll bars.

[noguerol]

@CartoDB/design is this design ready?

[josecruz]

@noguerol yes, as talked before the only change will be the arrows that will be removed on horizontal scroll (for now)

[Jesus89]

I take this one. What about the scrollbar on the popups?

[noguerol]

They're also included on the original mockups. What is concerning you?

[Jesus89]

Just the @xavijam comment about popup scroll

[josecruz]

@Jesus89 Yep, as talked yesterday with @piensaenpixel we agreed to change them as well due the goal of the ticket was to unify them (sooorry @xavijam)

[Jesus89]

I have seen that the cursors are different in each scroll. @CartoDB/design what is the proposal for that?

[josecruz]

@Jesus89 I'd use always the default one. Just as macOS does

[Jesus89]

Thanks @josecruz. Btw, what is the design for the scroll in the COLOR and IMAGE popups?

[Jesus89]

Please, check here the final result: https://github.com/CartoDB/cartodb/pull/12877

[Jesus89]

Deployed in ded10

[nobuti]

In production.