Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
May 25, 2022
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e89d49
feat(theme-classic): allow className as option for type: "search"
KuerbiskernJan May 6, 2022
b42d3fc
fixup! feat(theme-classic): allow className as option for type: "search"
KuerbiskernJan May 6, 2022
54253da
refactor
Josh-Cena May 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,12 @@ describe('themeConfig', () => {
position: 'left',
label: 'Current version',
},
// Search with className
{
type: 'search',
position: 'right',
className: 'search-bar-wrapper',
},
],
},
};
Expand Down
2 changes: 2 additions & 0 deletions packages/docusaurus-theme-classic/src/theme-classic.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -775,6 +775,7 @@ declare module '@theme/Navbar/Search' {

export interface Props {
readonly children: ReactNode;
readonly className?: string;
}

export default function NavbarSearch(props: Props): JSX.Element;
Expand Down Expand Up @@ -833,6 +834,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;
Expand Down
4 changes: 2 additions & 2 deletions packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -74,7 +74,7 @@ export default function NavbarContent(): JSX.Element {
<>
<NavbarItems items={rightItems} />
<NavbarColorModeToggle className={styles.colorModeToggle} />
{autoAddSearchBar && (
{!searchBarItem && (
<NavbarSearch>
<SearchBar />
</NavbarSearch>
Expand Down
8 changes: 6 additions & 2 deletions packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
7 changes: 5 additions & 2 deletions packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@ import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
import SearchBar from '@theme/SearchBar';
import NavbarSearch from '@theme/Navbar/Search';

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>
);
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/src/validateThemeConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,7 @@ const LocaleDropdownNavbarItemSchema = NavbarItemBaseSchema.append({

const SearchItemSchema = Joi.object({
type: Joi.string().equal('search').required(),
className: Joi.string().default(''),
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
});

const NavbarItemSchema = Joi.object({
Expand Down
1 change: 1 addition & 0 deletions website/docs/api/themes/theme-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down