search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.76k stars 1.8k forks source link

Tabs on narrow width may skip some tabs on arrow click #7121

Closed gracelo closed 3 years ago

gracelo commented 3 years ago

If I resize the browser that includes Tabs component implementation to show say 4 tabs wide, pressing on the > arrow may skip some tabs in between.

I have tried both Chrome and FF.

Make the screen narrow to show 4 tabs only. After clearing cache and refresh the page, then

  1. Select the first tab. Press > to the next page. Curl - Java - Node - Python > image

  2. The first time it worked (shows < Python - Go - .Net >) image

  3. Press more to the end (shows < Ruby - Swift - Unity > ) image

  4. Click back to the first few tabs and select Curl again. Then repeat step 1. Click the > arrow once. This time it jumps directly to further away and bypass the Go and .Net tabs image

I do not know if there is a minimum width required on each tab and do they need to be of the same width always.

Movie: scrollTabsBug

emyarod commented 3 years ago

for reference, it seems the screenshots and GIF are taken from https://dev.console.test.cloud.ibm.com/apidocs/visual-recognition/visual-recognition-v3

the tabs aren't going missing, it's just that the arrow buttons are scrolling through the list quickly. @aagonzales should we reduce the scroll speed a bit? although the scrolling is entirely dependent on how long the user clicks and holds down the arrow button

gracelo commented 3 years ago

Seems using a regular mouse is better but still need to make sure the clicking is short.

gptt916 commented 3 years ago

@emyarod I did some testing with a mac trackpad: if I am clicking (haptic feedback), the time between mousedown and up is anywhere between 50 - 150ms. If I am tapping instead, it's consistently 5ms - assuming this is controlled by the OS.

I think the click hold to scroll function could implement a delay between mouse down and scroll start to account for user click durations, anything lower than the delay is registered as a click.

emyarod commented 3 years ago

right, I believe this is a ux enhancement rather than a component bug and I have reached out to our designers about potential scrolling speed delays and/or modifications

aagonzales commented 3 years ago

I think the click hold to scroll function could implement a delay between mouse down and scroll start to account for user click durations, anything lower than the delay is registered as a click.

Oh this makes total sense. That's why the scroll is appearing faster. There should be a good distinction between an ordinary click and a click+hold. Is that doable @emyarod ?