Tabs - Fix issues for query-params-based status, nested tabs, variable tabs widths

[didoo]

📌 Summary

This is a "reworking" #1654 to understand if there was a more idiomatic (to HDS code) approach to solve the issue of tab selection and persistence using query params, initially proposed by @MiniHeyd in #1654.

In the process, I have also tried to tackle other two known tabs-related issues: the fact that when there are nested tabs, the indicator for the tabs inside hidden panels doesn't get initialized correctly, and the fact that when the content of the tab button (in particular the badge) changes, the indicator doesn't update its width accordingly.

The intent of this PR is to drive the conversation with @MiniHeyd and see how we can have a synthesis of the two PRs in a single one. Once approved the approach, the PR will be opened to the HDS engineering team for full review.

Notice: the documentation update will be done in #1702 and then merged here.

🛠️ Detailed description

In this PR I have:

• refactored logic for Tabs component + Tab/Panel sub-components to support more complex use cases
• fixed an issue with scrollIntoView scrolling the page on page load
• introduced a way to notify nested tabs of updates on visibility and use it to fix issue with indicator not initialized for (hidden) nested tabs [not an elegant solution, but it works]
• improved the handling of out-of-bound this.selectedTabIndex
• added some more complex examples of tabs in showcase
• increased test coverage for Tabs adding more detailed tests and complex use cases

👉 👉 👉 Preview: https://hds-showcase-git-selected-tab-condition-proposal-hashicorp.vercel.app/components/tabs (in particular see "Examples of tabs implementation")

🔗 External links

Jira tickets:

• https://hashicorp.atlassian.net/browse/HDS-2397
• https://hashicorp.atlassian.net/browse/HDS-2448

---

👀 Component checklist

• Percy was checked for any visual regression
• A11y tests have been run locally (yarn test:a11y --filter="COMPONENT-NAME")
• A changelog entry was added via Changesets if needed

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-website	✅ Ready (Inspect)	Visit Preview	Oct 11, 2023 6:46am

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
hds-showcase	⬜️ Ignored (Inspect)	Visit Preview	Oct 11, 2023 6:46am

[didoo]

@MiniHeyd as discussed today, the PR is ready for an initial review (I still have to update the documentation, but I'll do it in a separate follow-up PR tomorrow)

@hashicorp/hds-engineering it would be great if you could start to look at this PR, is pretty meaty and it would be better to get it merged in main before the 3.0 release so we don't block the TFC consumers in their Tabs adoption PRs (already opened).

(There are a few tests failing. I suspected they would have been brittle/flaky, I'll look into them asap)

[MelSumner]

I'm not sure what's causing the test failures, but after that's resolved, I have no objections to this PR after today's group review.

[didoo]

@alex-ju this is ready for a second pass.

@MiniHeyd see my commit 8fd10b9 (added after your review)

[alex-ju]

Re-reviewed this one – had a more in-depth look at the functional aspects and checked the updated tests – and it's good to be merged. You'll likely want to get the documentation in first (which may require a rebase on this judging by the current diff no rebase required).