From 5fcb742aa1a378833e83607f8ca7249db8fce261 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Peer=20St=C3=B6cklmair?= <jan.oster94@gmail.com>
Date: Wed, 25 May 2022 12:41:05 +0200
Subject: [PATCH] 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>
---
 .../src/__tests__/validateThemeConfig.test.ts             | 6 ++++++
 packages/docusaurus-theme-classic/src/theme-classic.d.ts  | 2 ++
 .../src/theme/Navbar/Content/index.tsx                    | 4 ++--
 .../src/theme/Navbar/Search/index.tsx                     | 8 ++++++--
 .../src/theme/NavbarItem/SearchNavbarItem.tsx             | 7 +++++--
 .../docusaurus-theme-classic/src/validateThemeConfig.ts   | 1 +
 website/docs/api/themes/theme-configuration.md            | 1 +
 7 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
index da76d5edd34e..850eeb044255 100644
--- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
+++ b/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',
+          },
         ],
       },
     };
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index bc9b9c9bbaf3..82ebfdf45d1b 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/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;
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx
index cf087e6cefd5..c81437a3fa8b 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx
+++ b/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>
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx
index 8d3fe1b19d2f..236d237aa082 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx
+++ b/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 {
-  return <div className={styles.searchBox}>{children}</div>;
+export default function NavbarSearch({
+  children,
+  className,
+}: Props): JSX.Element {
+  return <div className={clsx(className, styles.searchBox)}>{children}</div>;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx
index 9e95436025b2..f401f8f17621 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx
+++ b/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>
   );
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts
index d5bdb78e53e7..d64b671f0270 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts
+++ b/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({
diff --git a/website/docs/api/themes/theme-configuration.md b/website/docs/api/themes/theme-configuration.md
index 02e3c66db8f5..d1291bbc3cbc 100644
--- a/website/docs/api/themes/theme-configuration.md
+++ b/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>