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.
Fixes #317
If multiple
Tabs
components includeTabItem
s with identical labels, when a user switches to a particularTabItem
within one of theseTabs
components, switch the otherTabs
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 belowDocsContextProvider
).Tabs
components look up their currently selected tab from this context provider, rather than from component-local state. TheTabContextProvider
hashes the sorted label names of aTabs
component to get and set the value of the currently selectedTabItem
.Tabs
components with a dropdown menu, as well asTabs
components indropDownView
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 theTabContextProvider
. For example, if aTabs
component on one page has the "Enterprise" dropdown menu item selected, and the user has theoss
scope selected, aTabs
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.