feat(tabs): added hover and active styles #16523

soumyaraju · 2024-05-21T14:14:20Z

It adds the active and hover states to the line and contained scrollable icon buttons and also fixes the Background missing on left scroll button for line tabs.

Rest of the issues mentioned are handled in a different PR #16522

Changelog

New

Testing / Reviewing

github-actions · 2024-05-21T14:14:32Z

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

soumyaraju · 2024-05-21T14:15:54Z

I have read the DCO document and I hereby sign the DCO.

netlify · 2024-05-21T14:20:11Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`6e8c6e4`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/664cac3f9e4c5f0008268744
😎 Deploy Preview	https://deploy-preview-16523--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 · 2024-05-21T14:20:12Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`6e8c6e4`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/664cac3fc7b1230008bf62cb
😎 Deploy Preview	https://deploy-preview-16523--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.

netlify · 2024-05-21T14:25:11Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`e817c9f`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/670527e2f6bd48000834ff6c
😎 Deploy Preview	https://deploy-preview-16523--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 · 2024-05-21T14:26:08Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`e817c9f`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/670527e20b6f0e00082adac8
😎 Deploy Preview	https://deploy-preview-16523--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.

soumyaraju · 2024-05-21T14:31:44Z

recheck

soumyaraju · 2024-05-27T12:49:30Z

recheck

tay1orjones

Hover states look good. I see you added the active styling but for some reason the active styling is not applied when clicking down and holding the mouse down. You can see here I toggle the active styling on and it's correct, but when I click and hold to scroll it doesn't change from the hover styling:

CleanShot.2024-06-17.at.11.47.33.mp4

tay1orjones · 2024-06-17T16:54:07Z

The contained tabs have the same issue. There's something odd going on with the gradient. I'm not sure if it's related to your changes or not, but holding down the right arrow a second time after it's already scrolled all the way to the right makes it go backwards the other way.

CleanShot.2024-06-17.at.11.51.01.mp4

You might consider moving these changes into #16522 (review) or moving those changes into this PR so we can make sure it's fully correct with all these changes together.

tay1orjones · 2024-07-08T19:34:11Z

@soumyaraju any thoughts on my thoughts in my previous comment?

soumyaraju · 2024-07-13T13:53:40Z

Hover states look good. I see you added the active styling but for some reason the active styling is not applied when clicking down and holding the mouse down. You can see here I toggle the active styling on and it's correct, but when I click and hold to scroll it doesn't change from the hover styling:

CleanShot.2024-06-17.at.11.47.33.mp4

Hi @tay1orjones i have corrected the active style for the tabs, could you please check it. Thanks

tay1orjones · 2024-08-06T13:34:08Z

@soumyaraju active styles look good, the scroll is still not properly working at the rightmost end of the tab list. The final tab is obscured and can't be viewed.

2024-08-06.at.08.31.18-Components.Tabs.-.Default.Storybook-Google.Chrome.mp4

tay1orjones · 2024-08-06T15:45:00Z

@soumyaraju I redeployed the deploy preview with the latest from main, unfortunately the issue remains where the last tab is being partially hidden. I can't reproduce the issue in the production storybook at react.carbondesignsystem.com, so it must be related to something here. My guess is it's a result of the removing of position: absolute; on the buttons.

soumyaraju · 2024-09-23T13:31:46Z

@tay1orjones i have added the fix to the above issue, could you please re-check. Thanks

codecov · 2024-09-23T14:09:04Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 77.08%. Comparing base (9861873) to head (e817c9f).
Report is 23 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #16523   +/-   ##
=======================================
  Coverage   77.08%   77.08%           
=======================================
  Files         409      409           
  Lines       14024    14024           
  Branches     4355     4307   -48     
=======================================
  Hits        10810    10810           
  Misses       3044     3044           
  Partials      170      170

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

tay1orjones

Functionality looks great, thanks!

aagonzales

I'm seeing some issues with the left arrow on hover and active. The background is not a uniformed color.

soumyaraju · 2024-09-25T04:01:18Z

Hi @aagonzales, thank you for your review! The background color fade you mentioned has been addressed in another PR : #16522., which I added in the PR description.

aagonzales · 2024-09-25T13:36:53Z

@soumyaraju Ok without that fixed its hard to tell if this version is correct. Perhaps we need to wait until that PR is merged so we can see those changes here. I would not want to merge this glitch in as it is now. @tay1orjones thoughts on merge order?

soumyaraju · 2024-10-04T14:42:48Z

Hi @aagonzales @tay1orjones i have rebased and verified the background color fade you mentioned, its removed. Could you re-review this pr and approve my changes. Thanks.

alisonjoseph · 2024-10-08T12:39:55Z

@aagonzales the other PR (#16522) has been merged and both set of changes should be visible here for you to re-review.

aagonzales

Yup, everything looks good now! Thanks for fixing all of that.

soumyaraju · 2024-10-09T01:25:20Z

Thanks @aagonzales for the review, @alisonjoseph could you help me merge these changes. TIA

* feat(tabs): added hover and active styles * feat(tabs): revert test style * feat(tabs): active tab style order fix * feat(tabs): issue fix :last tab is being partially hidden * feat(tabs): issue fix :last tab is being partially hidden * feat(tabs): added to contributors list * feat(tabs): rebase --------- Co-authored-by: Soumya Raju <[email protected]> Co-authored-by: Alison Joseph <[email protected]>

soumyaraju marked this pull request as ready for review May 21, 2024 14:25

soumyaraju requested a review from a team as a code owner May 21, 2024 14:25

soumyaraju requested review from alisonjoseph and tay1orjones May 21, 2024 14:25

alisonjoseph added the status: visual review 🔍 label Jun 12, 2024

tay1orjones requested changes Jun 17, 2024

View reviewed changes

soumyaraju force-pushed the tab_styles branch from 32edd82 to c3b2425 Compare September 23, 2024 12:28

soumyaraju requested a review from tay1orjones September 23, 2024 13:38

tay1orjones approved these changes Sep 23, 2024

View reviewed changes

tay1orjones added the status: one more review 👀 label Sep 23, 2024

tay1orjones requested review from a team and aagonzales and removed request for a team September 23, 2024 19:55

aagonzales reviewed Sep 24, 2024

View reviewed changes

soumyaraju and others added 6 commits October 4, 2024 19:45

feat(tabs): added hover and active styles

09c642d

feat(tabs): revert test style

73a5223

feat(tabs): active tab style order fix

39af004

feat(tabs): issue fix :last tab is being partially hidden

5495dad

feat(tabs): issue fix :last tab is being partially hidden

91a8a62

feat(tabs): added to contributors list

3177936

soumyaraju force-pushed the tab_styles branch from 540d211 to 3177936 Compare October 4, 2024 14:21

feat(tabs): rebase

d6ea658

Merge branch 'main' into tab_styles

e817c9f

aagonzales approved these changes Oct 8, 2024

View reviewed changes

tay1orjones enabled auto-merge October 9, 2024 14:50

tay1orjones added status: ready to merge 🎉 and removed status: one more review 👀 status: visual review 🔍 labels Oct 9, 2024

tay1orjones added this pull request to the merge queue Oct 10, 2024

Merged via the queue into carbon-design-system:main with commit 37907de Oct 10, 2024
36 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tabs): added hover and active styles #16523

feat(tabs): added hover and active styles #16523

soumyaraju commented May 21, 2024 •

edited by tay1orjones

Loading

github-actions bot commented May 21, 2024 •

edited

Loading

soumyaraju commented May 21, 2024

netlify bot commented May 21, 2024

netlify bot commented May 21, 2024

netlify bot commented May 21, 2024 •

edited

Loading

netlify bot commented May 21, 2024 •

edited

Loading

soumyaraju commented May 21, 2024

soumyaraju commented May 27, 2024

tay1orjones left a comment

tay1orjones commented Jun 17, 2024

tay1orjones commented Jul 8, 2024

soumyaraju commented Jul 13, 2024

tay1orjones commented Aug 6, 2024

tay1orjones commented Aug 6, 2024

soumyaraju commented Sep 23, 2024

codecov bot commented Sep 23, 2024 •

edited

Loading

tay1orjones left a comment

aagonzales left a comment

soumyaraju commented Sep 25, 2024 •

edited

Loading

aagonzales commented Sep 25, 2024

soumyaraju commented Oct 4, 2024

alisonjoseph commented Oct 8, 2024

aagonzales left a comment

soumyaraju commented Oct 9, 2024

feat(tabs): added hover and active styles #16523

feat(tabs): added hover and active styles #16523

Conversation

soumyaraju commented May 21, 2024 • edited by tay1orjones Loading

Changelog

Testing / Reviewing

github-actions bot commented May 21, 2024 • edited Loading

soumyaraju commented May 21, 2024

netlify bot commented May 21, 2024

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented May 21, 2024

✅ Deploy Preview for carbon-elements ready!

netlify bot commented May 21, 2024 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented May 21, 2024 • edited Loading

✅ Deploy Preview for carbon-elements ready!

soumyaraju commented May 21, 2024

soumyaraju commented May 27, 2024

tay1orjones left a comment

Choose a reason for hiding this comment

tay1orjones commented Jun 17, 2024

tay1orjones commented Jul 8, 2024

soumyaraju commented Jul 13, 2024

tay1orjones commented Aug 6, 2024

tay1orjones commented Aug 6, 2024

soumyaraju commented Sep 23, 2024

codecov bot commented Sep 23, 2024 • edited Loading

Codecov Report

tay1orjones left a comment

Choose a reason for hiding this comment

aagonzales left a comment

Choose a reason for hiding this comment

soumyaraju commented Sep 25, 2024 • edited Loading

aagonzales commented Sep 25, 2024

soumyaraju commented Oct 4, 2024

alisonjoseph commented Oct 8, 2024

aagonzales left a comment

Choose a reason for hiding this comment

soumyaraju commented Oct 9, 2024

soumyaraju commented May 21, 2024 •

edited by tay1orjones

Loading

github-actions bot commented May 21, 2024 •

edited

Loading

netlify bot commented May 21, 2024 •

edited

Loading

netlify bot commented May 21, 2024 •

edited

Loading

codecov bot commented Sep 23, 2024 •

edited

Loading

soumyaraju commented Sep 25, 2024 •

edited

Loading