feat(theme-classic): allow className as option for type: "search" (#7357)

* feat(theme-classic): allow className as option for type: "search"

* fixup! feat(theme-classic): allow className as option for type: "search"

* refactor

Co-authored-by: Jan Peer Stoecklmair <jan.peer.stoecklmair@dynatrace.com>
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts

@@ -243,6 +243,12 @@ describe('themeConfig', () => {
             position: 'left',
             label: 'Current version',
           },
+          // Search with className
+          {
+            type: 'search',
+            position: 'right',
+            className: 'search-bar-wrapper',
+          },
         ],
       },
     };

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

@@ -777,6 +777,7 @@ declare module '@theme/Navbar/Search' {
 
   export interface Props {
     readonly children: ReactNode;
+    readonly className?: string;
   }
 
   export default function NavbarSearch(props: Props): JSX.Element;
@@ -834,6 +835,7 @@ declare module '@theme/NavbarItem/DropdownNavbarItem' {
 declare module '@theme/NavbarItem/SearchNavbarItem' {
   export interface Props {
     readonly mobile?: boolean;
+    readonly className?: string;
   }
 
   export default function SearchNavbarItem(props: Props): JSX.Element;

packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx

@@ -56,7 +56,7 @@ export default function NavbarContent(): JSX.Element {
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
 
-  const autoAddSearchBar = !items.some((item) => item.type === 'search');
+  const searchBarItem = items.find((item) => item.type === 'search');
 
   return (
     <NavbarContentLayout
@@ -74,7 +74,7 @@ export default function NavbarContent(): JSX.Element {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {autoAddSearchBar && (
+          {!searchBarItem && (
             <NavbarSearch>
               <SearchBar />
             </NavbarSearch>

packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx

@@ -6,10 +6,14 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import type {Props} from '@theme/Navbar/Search';
 
 import styles from './styles.module.css';
 
-export default function NavbarSearch({children}: Props): JSX.Element {
+export default function NavbarSearch({
-  return <div className={styles.searchBox}>{children}</div>;
+  children,
+  className,
+}: Props): JSX.Element {
+  return <div className={clsx(className, styles.searchBox)}>{children}</div>;
 }

packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx

@@ -10,13 +10,16 @@ import SearchBar from '@theme/SearchBar';
 import NavbarSearch from '@theme/Navbar/Search';
 import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
 
-export default function SearchNavbarItem({mobile}: Props): JSX.Element | null {
+export default function SearchNavbarItem({
+  mobile,
+  className,
+}: Props): JSX.Element | null {
   if (mobile) {
     return null;
   }
 
   return (
-    <NavbarSearch>
+    <NavbarSearch className={className}>
       <SearchBar />
     </NavbarSearch>
   );

packages/docusaurus-theme-classic/src/validateThemeConfig.ts

@@ -200,6 +200,7 @@ const LocaleDropdownNavbarItemSchema = NavbarItemBaseSchema.append({
 
 const SearchItemSchema = Joi.object({
   type: Joi.string().equal('search').required(),
+  className: Joi.string(),
 });
 
 const NavbarItemSchema = Joi.object({

website/docs/api/themes/theme-configuration.md

@@ -602,6 +602,7 @@ However, with this special navbar item type, you can change the default location
 | --- | --- | --- | --- |
 | `type` | `'search'` | **Required** | Sets the type of this item to a search bar. |
 | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
+| `className` | `string` | / | Custom CSS class for this navbar item. |
 
 </APITable>