gravitational / docs

Source code backing goteleport.com/docs
https://goteleport.com/docs
Apache License 2.0
11 stars 13 forks source link

Switch `TabItem`s with identical labels together #380

Closed ptgott closed 1 year ago

ptgott commented 1 year ago

Fixes #317

If multiple Tabs components include TabItems with identical labels, when a user switches to a particular TabItem within one of these Tabs components, switch the other Tabs components as well.

This saves a user from clicking the same tabs repeatedly when navigating through the docs site. It also captures most of the usefulness of the scope switcher while being far more visible for users, who tend not to realize that the scope switcher exists. This will make it easier to eventually deprecate the scope switcher.

This change adds a TabContextProvider high in the component tree (just below DocsContextProvider). Tabs components look up their currently selected tab from this context provider, rather than from component-local state. The TabContextProvider hashes the sorted label names of a Tabs component to get and set the value of the currently selected TabItem.

Tabs components with a dropdown menu, as well as Tabs components in dropDownView mode, also use this context provider to find the current value of dropdown menu items.

Note that the DocsContextProvider's scope value currently supersedes the values managed by the TabContextProvider. For example, if a Tabs component on one page has the "Enterprise" dropdown menu item selected, and the user has the oss scope selected, a Tabs component with the same dropdown menu on another page will show "Open Source" instead of "Enterprise". We can change this by deprecating the docs scopes.

vercel[bot] commented 1 year ago

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

Name Status Preview Comments Updated (UTC)
docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 22, 2023 5:49pm
ptgott commented 1 year ago

Demo video: https://www.loom.com/share/1b80e8dbef5c4e2180aff0eb7be74d47?sid=3352f664-429c-4f49-bf86-0fd864e76041