Skip to content

Commit eec3eed

Browse files
zenoachtignolannbiron
zenoachtig
and
nolannbiron
authored
Support prominent search bar style (#2936)
Co-authored-by: Nolann Biron <[email protected]>
1 parent 99da8df commit eec3eed

File tree

15 files changed

+134
-62
lines changed

15 files changed

+134
-62
lines changed

‎.changeset/empty-suns-agree.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'gitbook': minor
3+
---
4+
5+
Add styling for prominent search bar option

‎bun.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@
254254
},
255255
"overrides": {
256256
"@codemirror/state": "6.4.1",
257-
"@gitbook/api": "0.97.0",
257+
"@gitbook/api": "0.99.0",
258258
"react": "18.3.1",
259259
"react-dom": "18.3.1",
260260
},
@@ -627,7 +627,7 @@
627627

628628
"@fortawesome/fontawesome-svg-core": ["@fortawesome/[email protected]", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="],
629629

630-
"@gitbook/api": ["@gitbook/api@0.97.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-bBTy7nprwlwTW/v8S6A9wGFWatU+F33232xF5Tt4GmSBTZSrAKha5wD205Hr+618va+/zipA8o4hdAGPyUNj0A=="],
630+
"@gitbook/api": ["@gitbook/api@0.99.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-qaHNCKul6rp0wqKRQ/2/2+X8mNEmy5ZK4vWuZoI9eL306TTqFBWD4DSTHz0WV6X24FVe3HF7qy/mVRd4ja2I2A=="],
631631

632632
"@gitbook/cache-do": ["@gitbook/cache-do@workspace:packages/cache-do"],
633633

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"@codemirror/state": "6.4.1",
1313
"react": "18.3.1",
1414
"react-dom": "18.3.1",
15-
"@gitbook/api": "0.97.0"
15+
"@gitbook/api": "0.99.0"
1616
},
1717
"private": true,
1818
"scripts": {

‎packages/gitbook/e2e/internal.spec.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
type TestsCase,
2020
allDeprecatedThemePresets,
2121
allLocales,
22+
allSearchStyles,
2223
allSidebarBackgroundStyles,
2324
allThemeModes,
2425
allThemes,
@@ -647,6 +648,23 @@ const testCases: TestsCase[] = [
647648
run: waitForCookiesDialog,
648649
})),
649650
]),
651+
...allSearchStyles.flatMap((searchStyle) => ({
652+
name: `Theme ${theme} – Search ${searchStyle} – Mode ${themeMode}`,
653+
url: getCustomizationURL({
654+
styling: {
655+
theme,
656+
search: searchStyle,
657+
},
658+
header: {
659+
links: headerLinks,
660+
},
661+
themes: {
662+
default: themeMode,
663+
toggeable: false,
664+
},
665+
}),
666+
run: waitForCookiesDialog,
667+
})),
650668
]),
651669
// Deprecated header themes
652670
...allDeprecatedThemePresets.flatMap((preset) => [

‎packages/gitbook/e2e/util.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
CustomizationIconsStyle,
99
CustomizationLinksStyle,
1010
CustomizationLocale,
11+
CustomizationSearchStyle,
1112
CustomizationSidebarBackgroundStyle,
1213
CustomizationSidebarListStyle,
1314
CustomizationTheme,
@@ -109,6 +110,11 @@ export const allSidebarBackgroundStyles: CustomizationSidebarBackgroundStyle[] =
109110
CustomizationSidebarBackgroundStyle.Filled,
110111
];
111112

113+
export const allSearchStyles: CustomizationSearchStyle[] = [
114+
CustomizationSearchStyle.Prominent,
115+
CustomizationSearchStyle.Subtle,
116+
];
117+
112118
// Common customization settings
113119

114120
export const headerLinks: CustomizationHeaderItem[] = [
@@ -257,6 +263,7 @@ export function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettin
257263
background: CustomizationSidebarBackgroundStyle.Default,
258264
list: CustomizationSidebarListStyle.Default,
259265
},
266+
search: CustomizationSearchStyle.Subtle,
260267
},
261268
internationalization: {
262269
locale: CustomizationLocale.En,

‎packages/gitbook/src/components/DocumentView/Block.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
8383
case 'swagger':
8484
case 'openapi-operation':
8585
return <OpenAPI {...props} block={block} />;
86+
case 'openapi-schemas':
87+
return <></>;
8688
case 'embed':
8789
return <Embed {...props} block={block} />;
8890
case 'blockquote':
@@ -156,6 +158,7 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
156158
case 'table':
157159
case 'swagger':
158160
case 'openapi-operation':
161+
case 'openapi-schemas':
159162
case 'math':
160163
case 'divider':
161164
case 'content-ref':

‎packages/gitbook/src/components/Footer/Footer.tsx

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,20 @@ export function Footer(props: { context: GitBookSiteContext }) {
1616
const { customization } = context;
1717

1818
return (
19-
<>
20-
<hr className="border-tint-subtle border-t" />
19+
<footer
20+
className={tcls(
21+
'border-tint-subtle border-t',
22+
// If the footer only contains a mode toggle, we only show it on smaller screens
23+
customization.themes.toggeable &&
24+
!customization.footer.copyright &&
25+
!customization.footer.logo &&
26+
customization.footer.groups?.length === 0
27+
? 'xl:hidden'
28+
: null
29+
)}
30+
>
2131
<div className="scroll-nojump">
22-
<footer
23-
className={tcls(
24-
CONTAINER_STYLE,
25-
'px-4',
26-
'mx-auto',
27-
'flex',
28-
'gap-12',
29-
// If the footer only contains a mode toggle, we only show it on smaller screens
30-
customization.themes.toggeable &&
31-
!customization.footer.copyright &&
32-
!customization.footer.logo &&
33-
customization.footer.groups?.length === 0
34-
? 'xl:hidden'
35-
: null
36-
)}
37-
>
32+
<div className={tcls(CONTAINER_STYLE, 'px-4', 'mx-auto', 'flex', 'gap-12')}>
3833
<div className="hidden page-no-toc:hidden basis-72 lg:block" />
3934
<div
4035
className={tcls(
@@ -137,8 +132,8 @@ export function Footer(props: { context: GitBookSiteContext }) {
137132
</div>
138133
</div>
139134
<div className="hidden page-no-toc:hidden lg:block xl:basis-56" />
140-
</footer>
135+
</div>
141136
</div>
142-
</>
137+
</footer>
143138
);
144139
}

‎packages/gitbook/src/components/Header/Dropdown.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export function Dropdown<E extends HTMLElement>(props: {
3838
aria-orientation="vertical"
3939
aria-labelledby={dropdownId}
4040
className={tcls(
41+
'w-52',
4142
'max-h-80',
4243
'flex',
4344
'absolute',

‎packages/gitbook/src/components/Header/Header.tsx

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
5555
'theme-bold:shadow-tint-12/2'
5656
)}
5757
>
58-
<div className={tcls('scroll-nojump')}>
58+
<div className="scroll-nojump">
5959
<div
6060
className={tcls(
6161
'gap-4',
62-
'lg:gap-8',
62+
'lg:gap-6',
6363
'flex',
6464
'items-center',
6565
'justify-between',
@@ -72,7 +72,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
7272
>
7373
<div
7474
className={tcls(
75-
'flex max-w-full',
75+
'flex max-w-full lg:basis-72',
7676
'min-w-0 shrink items-center justify-start gap-2 lg:gap-4'
7777
)}
7878
>
@@ -90,25 +90,28 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
9090
<HeaderLogo context={context} />
9191
</div>
9292

93-
{customization.header.links.length > 0 && (
94-
<HeaderLinks>
95-
{customization.header.links.map((link, index) => {
96-
return <HeaderLink key={index} link={link} context={context} />;
97-
})}
98-
<HeaderLinkMore
99-
label={t(getSpaceLanguage(customization), 'more')}
100-
links={customization.header.links}
101-
context={context}
102-
/>
103-
</HeaderLinks>
104-
)}
10593
<div
10694
className={tcls(
10795
'flex',
108-
'md:min-w-56',
10996
'grow-0',
11097
'shrink-0',
111-
'justify-self-end'
98+
'md:basis-56',
99+
'justify-self-end',
100+
'search' in customization.styling &&
101+
customization.styling.search === 'prominent'
102+
? [
103+
'md:grow-[0.8]',
104+
'lg:basis-40',
105+
'max-w-lg',
106+
'lg:ml-[max(calc((100%-18rem-48rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - margin (3rem)
107+
'xl:ml-[max(calc((100%-18rem-48rem-14rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - outline (14rem) - margin (3rem)
108+
'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),0rem)]',
109+
'page-full-width:lg:ml-6',
110+
'lg:mr-auto',
111+
'order-last',
112+
'md:order-[unset]',
113+
]
114+
: ['order-last']
112115
)}
113116
>
114117
<Suspense fallback={null}>
@@ -137,6 +140,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
137140

138141
'theme-bold:shadow-none',
139142
'theme-bold:hover:shadow-none',
143+
'whitespace-nowrap',
140144
]}
141145
>
142146
<span className={tcls('flex-1')}>
@@ -151,6 +155,25 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
151155
</SearchButton>
152156
</Suspense>
153157
</div>
158+
159+
{customization.header.links.length > 0 && (
160+
<HeaderLinks>
161+
{customization.header.links.map((link) => {
162+
return (
163+
<HeaderLink
164+
key={link.title}
165+
link={link}
166+
context={context}
167+
/>
168+
);
169+
})}
170+
<HeaderLinkMore
171+
label={t(getSpaceLanguage(customization), 'more')}
172+
links={customization.header.links}
173+
context={context}
174+
/>
175+
</HeaderLinks>
176+
)}
154177
</div>
155178
</div>
156179
</div>

‎packages/gitbook/src/components/Header/HeaderLink.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export async function HeaderLink(props: {
3434
if (link.links && link.links.length > 0) {
3535
return (
3636
<Dropdown
37-
className="shrink"
37+
className={`shrink ${customization.styling.search === 'prominent' ? 'right-0 left-auto' : null}`}
3838
button={(buttonProps) => {
3939
if (!target || !link.to) {
4040
return (
@@ -151,8 +151,8 @@ function HeaderItemButton(
151151

152152
function getHeaderLinkClassName(_props: { headerPreset: CustomizationHeaderPreset }) {
153153
return tcls(
154-
'flex items-center shrink',
155-
'min-w-0',
154+
'flex items-center',
155+
'shrink',
156156
'contrast-more:underline',
157157
'truncate',
158158

0 commit comments

Comments
 (0)