feat(v2): allow to define custom CSS class for Tabs component (#3580)

* feat(v2): allow to define custom CSS class for Tabs component

* Update website/docs/markdown-features.mdx

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>

packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx

@@ -20,7 +20,7 @@ const keys = {
 };
 
 function Tabs(props: Props): JSX.Element {
-  const {block, children, defaultValue, values, groupId} = props;
+  const {block, children, defaultValue, values, groupId, className} = props;
   const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const [keyboardPress, setKeyboardPress] = useState(false);
@@ -100,9 +100,13 @@ function Tabs(props: Props): JSX.Element {
       <ul
         role="tablist"
         aria-orientation="horizontal"
-        className={clsx('tabs', {
+        className={clsx(
-          'tabs--block': block,
+          'tabs',
-        })}>
+          {
+            'tabs--block': block,
+          },
+          className,
+        )}>
         {values.map(({value, label}) => (
           <li
             role="tab"

packages/docusaurus-theme-classic/src/types.d.ts

@@ -377,6 +377,7 @@ declare module '@theme/Tabs' {
     readonly defaultValue?: string;
     readonly values: readonly {value: string; label: string}[];
     readonly groupId?: string;
+    readonly className?: string;
   };
 
   const Tabs: () => JSX.Element;

website/docs/markdown-features.mdx

@@ -430,6 +430,41 @@ Tab choices with different `groupId`s will not interfere with each other:
   <TabItem value="unix">Unix is unix.</TabItem>
 </Tabs>
 
+### Customizing tabs
+
+You might want to customize the appearance of certain set of tabs. To do that you can pass the string in `className` prop and the specified CSS class will be added to the `Tabs` component:
+
+```jsx {5}
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  className="unique-tabs"
+  defaultValue="apple"
+  values={[
+    {label: 'Apple', value: 'apple'},
+    {label: 'Orange', value: 'orange'},
+    {label: 'Banana', value: 'banana'},
+  ]}>
+  <TabItem value="apple">This is an apple 🍎</TabItem>
+  <TabItem value="orange">This is an orange 🍊</TabItem>
+  <TabItem value="banana">This is a banana 🍌</TabItem>
+</Tabs>;
+```
+
+<Tabs
+  className="unique-tabs"
+  defaultValue="apple"
+  values={[
+    {label: 'Apple', value: 'apple'},
+    {label: 'Orange', value: 'orange'},
+    {label: 'Banana', value: 'banana'},
+  ]}>
+  <TabItem value="apple">This is an apple 🍎</TabItem>
+  <TabItem value="orange">This is an orange 🍊</TabItem>
+  <TabItem value="banana">This is a banana 🍌</TabItem>
+</Tabs>
+
 ## Callouts/admonitions
 
 In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions. Admonitions are wrapped by a set of 3 colons.

website/src/css/custom.css

@@ -49,6 +49,19 @@ html[data-theme='dark'] .header-github-link:before {
     no-repeat;
 }
 
+.unique-tabs .tabs__item {
+  height: 18px;
+  line-height: 16px;
+  margin-right: 8px;
+}
+
+.unique-tabs .tabs__item--active {
+  border: 0;
+  color: #fff;
+  border-radius: var(--ifm-global-radius);
+  background-color: var(--ifm-tabs-color-active);
+}
+
 /*
 TODO temporary, should be handled by infima next release
 https://github.com/facebookincubator/infima/commit/7820399af53c182b1879aa6d7fceb4d296f78ce0