From eec3eed1003710ff55e8a45356e1d83b2bc14e74 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Fri, 14 Mar 2025 15:11:21 +0100 Subject: [PATCH] Support `prominent` search bar style (#2936) Co-authored-by: Nolann Biron --- .changeset/empty-suns-agree.md | 5 ++ bun.lock | 4 +- package.json | 2 +- packages/gitbook/e2e/internal.spec.ts | 18 ++++++ packages/gitbook/e2e/util.ts | 7 +++ .../src/components/DocumentView/Block.tsx | 3 + .../gitbook/src/components/Footer/Footer.tsx | 35 +++++------- .../src/components/Header/Dropdown.tsx | 1 + .../gitbook/src/components/Header/Header.tsx | 57 +++++++++++++------ .../src/components/Header/HeaderLink.tsx | 6 +- .../src/components/Header/HeaderLinkMore.tsx | 8 ++- .../src/components/Header/HeaderLinks.tsx | 8 ++- .../components/Header/headerLinks.module.css | 14 +++-- .../src/components/Search/SearchButton.tsx | 27 ++++++--- .../SiteSections/SiteSectionTabs.tsx | 1 - 15 files changed, 134 insertions(+), 62 deletions(-) create mode 100644 .changeset/empty-suns-agree.md diff --git a/.changeset/empty-suns-agree.md b/.changeset/empty-suns-agree.md new file mode 100644 index 000000000..9c05a7596 --- /dev/null +++ b/.changeset/empty-suns-agree.md @@ -0,0 +1,5 @@ +--- +'gitbook': minor +--- + +Add styling for prominent search bar option diff --git a/bun.lock b/bun.lock index 925d74d21..6295345a1 100644 --- a/bun.lock +++ b/bun.lock @@ -254,7 +254,7 @@ }, "overrides": { "@codemirror/state": "6.4.1", - "@gitbook/api": "0.97.0", + "@gitbook/api": "0.99.0", "react": "18.3.1", "react-dom": "18.3.1", }, @@ -627,7 +627,7 @@ "@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@6.6.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="], - "@gitbook/api": ["@gitbook/api@0.97.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-bBTy7nprwlwTW/v8S6A9wGFWatU+F33232xF5Tt4GmSBTZSrAKha5wD205Hr+618va+/zipA8o4hdAGPyUNj0A=="], + "@gitbook/api": ["@gitbook/api@0.99.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-qaHNCKul6rp0wqKRQ/2/2+X8mNEmy5ZK4vWuZoI9eL306TTqFBWD4DSTHz0WV6X24FVe3HF7qy/mVRd4ja2I2A=="], "@gitbook/cache-do": ["@gitbook/cache-do@workspace:packages/cache-do"], diff --git a/package.json b/package.json index 0aa06b439..c330fbbf6 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@codemirror/state": "6.4.1", "react": "18.3.1", "react-dom": "18.3.1", - "@gitbook/api": "0.97.0" + "@gitbook/api": "0.99.0" }, "private": true, "scripts": { diff --git a/packages/gitbook/e2e/internal.spec.ts b/packages/gitbook/e2e/internal.spec.ts index 11fa477ea..ed9900f04 100644 --- a/packages/gitbook/e2e/internal.spec.ts +++ b/packages/gitbook/e2e/internal.spec.ts @@ -19,6 +19,7 @@ import { type TestsCase, allDeprecatedThemePresets, allLocales, + allSearchStyles, allSidebarBackgroundStyles, allThemeModes, allThemes, @@ -647,6 +648,23 @@ const testCases: TestsCase[] = [ run: waitForCookiesDialog, })), ]), + ...allSearchStyles.flatMap((searchStyle) => ({ + name: `Theme ${theme} – Search ${searchStyle} – Mode ${themeMode}`, + url: getCustomizationURL({ + styling: { + theme, + search: searchStyle, + }, + header: { + links: headerLinks, + }, + themes: { + default: themeMode, + toggeable: false, + }, + }), + run: waitForCookiesDialog, + })), ]), // Deprecated header themes ...allDeprecatedThemePresets.flatMap((preset) => [ diff --git a/packages/gitbook/e2e/util.ts b/packages/gitbook/e2e/util.ts index f90f20a94..69482ad1d 100644 --- a/packages/gitbook/e2e/util.ts +++ b/packages/gitbook/e2e/util.ts @@ -8,6 +8,7 @@ import { CustomizationIconsStyle, CustomizationLinksStyle, CustomizationLocale, + CustomizationSearchStyle, CustomizationSidebarBackgroundStyle, CustomizationSidebarListStyle, CustomizationTheme, @@ -109,6 +110,11 @@ export const allSidebarBackgroundStyles: CustomizationSidebarBackgroundStyle[] = CustomizationSidebarBackgroundStyle.Filled, ]; +export const allSearchStyles: CustomizationSearchStyle[] = [ + CustomizationSearchStyle.Prominent, + CustomizationSearchStyle.Subtle, +]; + // Common customization settings export const headerLinks: CustomizationHeaderItem[] = [ @@ -257,6 +263,7 @@ export function getCustomizationURL(partial: DeepPartial(props: BlockProps) { case 'swagger': case 'openapi-operation': return ; + case 'openapi-schemas': + return <>; case 'embed': return ; case 'blockquote': @@ -156,6 +158,7 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue } case 'table': case 'swagger': case 'openapi-operation': + case 'openapi-schemas': case 'math': case 'divider': case 'content-ref': diff --git a/packages/gitbook/src/components/Footer/Footer.tsx b/packages/gitbook/src/components/Footer/Footer.tsx index 3e2ee824c..a0f4459a0 100644 --- a/packages/gitbook/src/components/Footer/Footer.tsx +++ b/packages/gitbook/src/components/Footer/Footer.tsx @@ -16,25 +16,20 @@ export function Footer(props: { context: GitBookSiteContext }) { const { customization } = context; return ( - <> -
+
-
+
-
+
- +
); } diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx index e69f093c5..82432ea41 100644 --- a/packages/gitbook/src/components/Header/Dropdown.tsx +++ b/packages/gitbook/src/components/Header/Dropdown.tsx @@ -38,6 +38,7 @@ export function Dropdown(props: { aria-orientation="vertical" aria-labelledby={dropdownId} className={tcls( + 'w-52', 'max-h-80', 'flex', 'absolute', diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 85d1a965e..6db14d93b 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -55,11 +55,11 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo 'theme-bold:shadow-tint-12/2' )} > -
+
@@ -90,25 +90,28 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
- {customization.header.links.length > 0 && ( - - {customization.header.links.map((link, index) => { - return ; - })} - - - )}
@@ -137,6 +140,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo 'theme-bold:shadow-none', 'theme-bold:hover:shadow-none', + 'whitespace-nowrap', ]} > @@ -151,6 +155,25 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
+ + {customization.header.links.length > 0 && ( + + {customization.header.links.map((link) => { + return ( + + ); + })} + + + )}
diff --git a/packages/gitbook/src/components/Header/HeaderLink.tsx b/packages/gitbook/src/components/Header/HeaderLink.tsx index a9b9448d3..1a66e13b3 100644 --- a/packages/gitbook/src/components/Header/HeaderLink.tsx +++ b/packages/gitbook/src/components/Header/HeaderLink.tsx @@ -34,7 +34,7 @@ export async function HeaderLink(props: { if (link.links && link.links.length > 0) { return ( { if (!target || !link.to) { return ( @@ -151,8 +151,8 @@ function HeaderItemButton( function getHeaderLinkClassName(_props: { headerPreset: CustomizationHeaderPreset }) { return tcls( - 'flex items-center shrink', - 'min-w-0', + 'flex items-center', + 'shrink', 'contrast-more:underline', 'truncate', diff --git a/packages/gitbook/src/components/Header/HeaderLinkMore.tsx b/packages/gitbook/src/components/Header/HeaderLinkMore.tsx index ded51c399..5d27fc9a8 100644 --- a/packages/gitbook/src/components/Header/HeaderLinkMore.tsx +++ b/packages/gitbook/src/components/Header/HeaderLinkMore.tsx @@ -45,7 +45,13 @@ export function HeaderLinkMore(props: { return (
- + {links.map((link, index) => ( diff --git a/packages/gitbook/src/components/Header/HeaderLinks.tsx b/packages/gitbook/src/components/Header/HeaderLinks.tsx index 6bc4ea593..a96467c20 100644 --- a/packages/gitbook/src/components/Header/HeaderLinks.tsx +++ b/packages/gitbook/src/components/Header/HeaderLinks.tsx @@ -1,19 +1,21 @@ import type React from 'react'; -import { tcls } from '@/lib/tailwind'; +import { type ClassValue, tcls } from '@/lib/tailwind'; import styles from './headerLinks.module.css'; interface HeaderLinksProps { children: React.ReactNode; + style?: ClassValue; } -export async function HeaderLinks({ children }: HeaderLinksProps) { +export async function HeaderLinks({ children, style }: HeaderLinksProps) { return (
.button+.button]:-ml-2 z-20 flex min-w-9 shrink grow items-center justify-end gap-x-4 lg:gap-x-6' + 'lg:[&>.button+.button]:-ml-2 z-20 ml-auto flex min-w-9 shrink grow items-center justify-end gap-x-4 lg:gap-x-6 xl:grow-0', + style )} > {children} diff --git a/packages/gitbook/src/components/Header/headerLinks.module.css b/packages/gitbook/src/components/Header/headerLinks.module.css index 7c4e4aac1..2a5736b43 100644 --- a/packages/gitbook/src/components/Header/headerLinks.module.css +++ b/packages/gitbook/src/components/Header/headerLinks.module.css @@ -1,6 +1,8 @@ -.containerHeaderlinks { - container-type: inline-size; - container-name: headerlinks; +@media (max-width: 1279px) { + .containerHeaderlinks { + container-type: inline-size; + container-name: headerlinks; + } } .linkEllipsis { @@ -43,7 +45,7 @@ } } } -@container headerlinks (width < 600px) { +@container headerlinks (width < 550px) { .containerHeaderlinks > :nth-child(n + 4) { display: none; } @@ -54,7 +56,7 @@ } } } -@container headerlinks (width < 750px) { +@container headerlinks (width < 650px) { .containerHeaderlinks > :nth-child(n + 5) { display: none; } @@ -65,7 +67,7 @@ } } } -@container headerlinks (width < 850px) { +@container headerlinks (width < 750px) { .containerHeaderlinks > :nth-child(n + 6) { display: none; } diff --git a/packages/gitbook/src/components/Search/SearchButton.tsx b/packages/gitbook/src/components/Search/SearchButton.tsx index 78bbf026c..97c2544b0 100644 --- a/packages/gitbook/src/components/Search/SearchButton.tsx +++ b/packages/gitbook/src/components/Search/SearchButton.tsx @@ -43,8 +43,8 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV 'justify-center', 'items-center', 'w-full', - 'px-3', 'py-2', + 'px-3', 'gap-2', 'bg-tint-base', @@ -81,10 +81,11 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV 'contrast-more:focus:ring-tint-12', 'active:shadow-sm', - 'active:scale-98', + 'active:scale-100', 'md:justify-start', 'md:w-full', + 'text-sm', style )} > @@ -99,7 +100,7 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV } const Shortcut = () => { - const [operatingSystem, setOperatingSystem] = useState('win'); + const [operatingSystem, setOperatingSystem] = useState(null); useEffect(() => { function getOperatingSystem() { @@ -114,21 +115,31 @@ const Shortcut = () => { setOperatingSystem(getOperatingSystem()); }, []); - return ( + return operatingSystem ? (
- {operatingSystem === 'mac' ? '⌘' : 'Ctrl +'} K + + {operatingSystem === 'mac' ? '⌘' : 'Ctrl'} + + + K +
- ); + ) : null; }; diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx index 065afc4d6..5ba964158 100644 --- a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx +++ b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx @@ -6,7 +6,6 @@ import React from 'react'; import { Link } from '@/components/primitives'; import { tcls } from '@/lib/tailwind'; - import { SectionIcon } from './SectionIcon'; import type { ClientSiteSection, ClientSiteSections } from './encodeClientSiteSections';