[BD-46] fix: fixed odd trapezoid-like underline on active tab in Tabs component

[PKulkoRaccoonGang]

Description

Issues:

• Odd trapezoid-like underline on active tab in Tabs component #2370
• The button outline in the Tabs component is displayed incorrectly #2368

Deploy Preview

Tabs component

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	d4fa62e
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/64b8ed0a5e1ed60008364a3d
😎 Deploy Preview	https://deploy-preview-2377--paragon-openedx.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.

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (9373f93) 91.38% compared to head (6f96ce6) 91.38%.

❗ Current head 6f96ce6 differs from pull request most recent head d4fa62e. Consider uploading reports for the commit d4fa62e to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2377   +/-   ##
=======================================
  Coverage   91.38%   91.38%           
=======================================
  Files         234      234           
  Lines        4157     4157           
  Branches     1001     1001           
=======================================
  Hits         3799     3799           
  Misses        351      351           
  Partials        7        7           

see 1 file with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[viktorrusakov]

@PKulkoRaccoonGang I think dropdown's bottom border got a little broken when focused

it should be the same height as a regular tab's underline.

Also when you select an item in the dropdown and then select a regular tab, the underline of the whole nav jumps a little bit (this does not happen on the prod).

[adamstankiewicz]

Looks like the hover styles for non-active tabs may have been removed?

Figma

In deploy preview

Hovering over active tab has gray background:

However, hovering over non-active tab, has no background change:

[viktorrusakov]

LGTM. I'll let @adamstankiewicz double-check and merge, it's easy to miss bugs with this one 🙂

@PKulkoRaccoonGang also, don't forget to add new design tokens to alpha branch after this merges 😁

[adamstankiewicz]

LGTM!

[openedx-webhooks]

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-semantic-release]

🎉 This PR is included in version 20.45.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀