fix: extra arrow in tab component on resize

[preetibansalui]

Closes #16484

Fix: Extra arrow is visible in Tab component on resize

Testing / Reviewing

1. Resize the screen to small size so that scroll is visible.
2. It should display the arrow in tabs.
3. Now resize it to normal size.
4. It should remove the arrow as well.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7fd88c6
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6667e7f9268ea500087e1629
😎 Deploy Preview	https://deploy-preview-16652--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	7fd88c6
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6667e7f963a7490008bfbc5a
😎 Deploy Preview	https://deploy-preview-16652--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alisonjoseph]

This looks great in Chrome, however is still broken in Firefox.

[tay1orjones]

Still seeing some issues in chrome with the left arrow. It's not overlaying the tabs properly and doesn't seem to be clickable in certain situations. Selecting the tabs themselves does cause it to update the scroll position but it doesn't appear the button is actually being clicked

CleanShot.2024-06-05.at.13.30.28-converted.mp4

[preetibansalui]

Still seeing some issues in chrome with the left arrow. It's not overlaying the tabs properly and doesn't seem to be clickable in certain situations. Selecting the tabs themselves does cause it to update the scroll position but it doesn't appear the button is actually being clicked

CleanShot.2024-06-05.at.13.30.28-converted.mp4

Thanks Taylor, I didn't checked that functionality bcs the issue was related to normal screen and arrow should not be visible. Let me check the functionality part.

[preetibansalui]

fixed the left arrow issue although I feel sometimes when we play with arrows, it remove the arrows bcs of some calculations when all tabs are visible (not fully), I will raise a separate issue for this.

[alisonjoseph]

Looks to be working correctly now, I did tag design for a visual review also.

[tay1orjones]

Just needs a visual review @alina-jacob

[Kritvi-bhatia17]

Hi @preetibansalui, nice work! 🔥
Just wanted to confirm one small thing with you: Is it okay if the arrow still shows up while I'm increasing the screen size (you can see that at 00:05 sec)? It disappears when the mouse is moved out, but I wanted to check if this is acceptable. Everything else looks good to me from a design perspective!

Screen.Recording.2024-06-10.at.4.17.08.PM.mov

[preetibansalui]

Hi @preetibansalui, nice work! 🔥 Just wanted to confirm one small thing with you: Is it okay if the arrow still shows up while I'm increasing the screen size (you can see that at 00:05 sec)? It disappears when the mouse is moved out, but I wanted to check if this is acceptable. Everything else looks good to me from a design perspective!

Screen.Recording.2024-06-10.at.4.17.08.PM.mov

Hi Kritvi, It should remove the arrow on a particular width, Here we have a debounce value before we apply changes on window's scroll event, Because of that it remove the arrow after you are done with resizing. I believe it should be acceptable bcs a user should not change window's width like this.

[alina-jacob]

Hi @preetibansalui, this looks neat! 🚀

Just noticed this one change between the current storybook and the preview that you've shared (please ignore if irrelevant)
The arrow button seems to be working fine for the 'default' version, but the 'contained' version now has a gradient fading from UI colour to 'white', earlier it was UI colour to 'transparent'

Sharing a screenshot for reference, left is current storybook and right is a screenshot from the preview link shared above:

[preetibansalui]

Hi @preetibansalui, this looks neat! 🚀

Just noticed this one change between the current storybook and the preview that you've shared (please ignore if irrelevant) The arrow button seems to be working fine for the 'default' version, but the 'contained' version now have a gradient fading from UI colour to 'white', earlier it was UI colour to 'transparent'

Sharing a screenshot for reference, left is current storybook and right is a screenshot from the preview link shared above:

Hi @preetibansalui, this looks neat! 🚀

Just noticed this one change between the current storybook and the preview that you've shared (please ignore if irrelevant) The arrow button seems to be working fine for the 'default' version, but the 'contained' version now have a gradient fading from UI colour to 'white', earlier it was UI colour to 'transparent'

Sharing a screenshot for reference, left is current storybook and right is a screenshot from the preview link shared above:

Hi Alina, It looks like an issue, let me look into it. Thanks for pointing this out.

[Kritvi-bhatia17]

ed.mp4

Thanks Taylor, I didn't checked that functionality bcs the issue was related to normal screen and arrow should not be visible. Let me check the functionality part.

In that case, it looks good to me after addressing the issue Alina mentioned!

[preetibansalui]

Hi @preetibansalui, this looks neat! 🚀
Just noticed this one change between the current storybook and the preview that you've shared (please ignore if irrelevant) The arrow button seems to be working fine for the 'default' version, but the 'contained' version now have a gradient fading from UI colour to 'white', earlier it was UI colour to 'transparent'
Sharing a screenshot for reference, left is current storybook and right is a screenshot from the preview link shared above:

Hi @preetibansalui, this looks neat! 🚀
Just noticed this one change between the current storybook and the preview that you've shared (please ignore if irrelevant) The arrow button seems to be working fine for the 'default' version, but the 'contained' version now have a gradient fading from UI colour to 'white', earlier it was UI colour to 'transparent'
Sharing a screenshot for reference, left is current storybook and right is a screenshot from the preview link shared above:

Hi Alina, It looks like an issue, let me look into it. Thanks for pointing this out.

Hi @alina-jacob, I have made the changes, can you please review it again.

[alina-jacob]

Looks good to go @preetibansalui! 🚀 💯