fix(theme): refactor Tabs, make groupId + queryString work fine toget…

…her (#8486)
facebook · Dec 29, 2022 · 9c860ce · 9c860ce
1 parent 949158d
commit 9c860ce
Show file tree

Hide file tree

Showing 12 changed files with 505 additions and 356 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -1232,39 +1232,17 @@ declare module '@theme/Mermaid' {
 }
 
 declare module '@theme/TabItem' {
-  import type {ReactNode} from 'react';
+  import type {TabItemProps} from '@docusaurus/theme-common/internal';
 
-  export interface Props {
-    readonly children: ReactNode;
-    readonly value: string;
-    readonly default?: boolean;
-    readonly label?: string;
-    readonly hidden?: boolean;
-    readonly className?: string;
-    readonly attributes?: {[key: string]: unknown};
-  }
+  export interface Props extends TabItemProps {}
 
   export default function TabItem(props: Props): JSX.Element;
 }
 
 declare module '@theme/Tabs' {
-  import type {ReactElement} from 'react';
-  import type {Props as TabItemProps} from '@theme/TabItem';
+  import type {TabsProps} from '@docusaurus/theme-common/internal';
 
-  export interface Props {
-    readonly lazy?: boolean;
-    readonly block?: boolean;
-    readonly children: readonly ReactElement<TabItemProps>[];
-    readonly defaultValue?: string | null;
-    readonly values?: readonly {
-      value: string;
-      label?: string;
-      attributes?: {[key: string]: unknown};
-    }[];
-    readonly groupId?: string;
-    readonly className?: string;
-    readonly queryString?: string | boolean;
-  }
+  export interface Props extends TabsProps {}
 
   export default function Tabs(props: Props): JSX.Element;
 }

diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/Provider/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/Provider/index.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import {composeProviders} from '@docusaurus/theme-common';
 import {
   ColorModeProvider,
-  TabGroupChoiceProvider,
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   ScrollControllerProvider,
@@ -21,7 +20,6 @@ import type {Props} from '@theme/Layout/Provider';
 const Provider = composeProviders([
   ColorModeProvider,
   AnnouncementBarProvider,
-  TabGroupChoiceProvider,
   ScrollControllerProvider,
   DocsPreferredVersionContextProvider,
   PluginHtmlClassNameProvider,

diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/__tests__/index.test.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/__tests__/index.test.tsx
@@ -7,10 +7,7 @@
 
 import React, {type ReactNode} from 'react';
 import renderer from 'react-test-renderer';
-import {
-  TabGroupChoiceProvider,
-  ScrollControllerProvider,
-} from '@docusaurus/theme-common/internal';
+import {ScrollControllerProvider} from '@docusaurus/theme-common/internal';
 import {StaticRouter} from 'react-router-dom';
 import Tabs from '../index';
 import TabItem from '../../TabItem';
@@ -24,9 +21,7 @@ function TestProviders({
 }) {
   return (
     <StaticRouter location={{pathname}}>
-      <ScrollControllerProvider>
-        <TabGroupChoiceProvider>{children}</TabGroupChoiceProvider>
-      </ScrollControllerProvider>
+      <ScrollControllerProvider>{children}</ScrollControllerProvider>
     </StaticRouter>
   );
 }