Skip to content

Commit 4aeb81b

Browse files
zenoachtigzenoachtig
authored
Fix search input styling & text cutoff (#3491)
1 parent 955cebf commit 4aeb81b

File tree

5 files changed

+27
-18
lines changed

5 files changed

+27
-18
lines changed

‎.changeset/popular-rivers-bow.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"gitbook": patch
3+
---
4+
5+
Fix search input styling & text cutoff

‎packages/gitbook/src/components/AIChat/AIChatButton.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
'use client';
2+
import { useLanguage } from '@/intl/client';
3+
import { t } from '@/intl/translate';
24
import { tcls } from '@/lib/tailwind';
35
import { useAIChatController, useAIChatState } from '../AI/useAIChat';
46
import { Button } from '../primitives';
@@ -13,6 +15,7 @@ export function AIChatButton(props: { trademark: boolean }) {
1315
const { trademark } = props;
1416
const chatController = useAIChatController();
1517
const chat = useAIChatState();
18+
const language = useLanguage();
1619

1720
return (
1821
<Button
@@ -23,7 +26,7 @@ export function AIChatButton(props: { trademark: boolean }) {
2326
className={tcls('h-9 px-2.5')}
2427
label={
2528
<div className="flex items-center gap-2">
26-
{getAIChatName(trademark)}
29+
{t(language, 'ai_chat_ask', getAIChatName(trademark))}
2730
<KeyboardShortcut keys={['mod', 'j']} className="border-tint-11 text-tint-1" />
2831
</div>
2932
}

‎packages/gitbook/src/components/Search/SearchContainer.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ interface SearchContainerProps {
2727
*/
2828
export function SearchContainer(props: SearchContainerProps) {
2929
const { spaceTitle, isMultiVariants, aiMode, className } = props;
30-
const withAI =
31-
aiMode === CustomizationAIMode.Search || aiMode === CustomizationAIMode.Assistant;
3230

3331
const [state, setSearchState] = useSearch();
3432
const searchAsk = useSearchAskState();
@@ -122,7 +120,7 @@ export function SearchContainer(props: SearchContainerProps) {
122120
<Popover
123121
content={
124122
// Only show content if there's a query or Ask is enabled
125-
(state?.query || withAI) && open ? (
123+
(state?.query || aiMode !== CustomizationAIMode.None) && open ? (
126124
<React.Suspense fallback={null}>
127125
{isMultiVariants && !state?.ask ? (
128126
<SearchScopeToggle spaceTitle={spaceTitle} />
@@ -174,7 +172,7 @@ export function SearchContainer(props: SearchContainerProps) {
174172
onFocus={onOpen}
175173
onChange={onChange}
176174
onKeyDown={onKeyDown}
177-
withAI={withAI}
175+
aiMode={aiMode}
178176
isOpen={open}
179177
className={className}
180178
/>

‎packages/gitbook/src/components/Search/SearchInput.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
44

55
import { tString, useLanguage } from '@/intl/client';
66
import { tcls } from '@/lib/tailwind';
7+
import { CustomizationAIMode } from '@gitbook/api';
78
import { Icon } from '@gitbook/icons';
89
import { Button, variantClasses } from '../primitives';
910
import { useClassnames } from '../primitives/StyleProvider';
@@ -13,7 +14,7 @@ interface SearchInputProps {
1314
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
1415
onFocus: () => void;
1516
value: string;
16-
withAI?: boolean;
17+
aiMode: CustomizationAIMode;
1718
isOpen: boolean;
1819
className?: string;
1920
}
@@ -26,7 +27,7 @@ const sizeClasses = ['text-sm', 'px-3.5', 'py-1.5', 'md:circular-corners:px-4'];
2627
*/
2728
export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
2829
function SearchInput(props, ref) {
29-
const { onChange, onKeyDown, onFocus, value, withAI = false, isOpen, className } = props;
30+
const { onChange, onKeyDown, onFocus, value, aiMode, isOpen, className } = props;
3031
const inputRef = useRef<HTMLInputElement>(null);
3132

3233
const language = useLanguage();
@@ -59,7 +60,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
5960
sizeClasses,
6061
// Additional custom styles
6162
'has-[input:focus]:-translate-y-px h-9 grow cursor-pointer px-2.5 has-[input:focus]:bg-tint-base depth-subtle:has-[input:focus]:shadow-lg depth-subtle:has-[input:focus]:shadow-primary-subtle has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-primary-hover md:cursor-text',
62-
'theme-bold:has-[input:focus-visible]:border-header-link/6 theme-bold:has-[input:focus-visible]:bg-header-link/3',
63+
'theme-bold:border-header-link/3 theme-bold:has-[input:focus-visible]:border-header-link/5 theme-bold:has-[input:focus-visible]:bg-header-link/3 theme-bold:has-[input:focus-visible]:ring-header-link/5',
6364
'theme-bold:before:absolute theme-bold:before:inset-0 theme-bold:before:bg-header-background/7 theme-bold:before:backdrop-blur-xl ', // Special overlay to make the transparent colors of theme-bold visible.
6465
'relative z-30 shrink grow justify-start max-md:absolute max-md:right-0',
6566
isOpen ? 'max-md:w-56' : 'max-md:w-[38px]',
@@ -73,7 +74,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
7374
size="medium"
7475
iconOnly
7576
icon="circle-xmark"
76-
className="-ml-1.5 -mr-1 animate-scaleIn px-1.5 theme-bold:text-header-link theme-bold:hover:bg-header-link/3"
77+
className="-ml-1.5 -mr-1 animate-scaleIn px-1.5"
7778
onClick={() => {
7879
onChange('');
7980
inputRef.current?.focus();
@@ -89,15 +90,17 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
8990
onKeyDown={onKeyDown}
9091
onChange={(event) => onChange(event.target.value)}
9192
value={value}
92-
placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}...`}
93+
// We only show "search or ask" if the search input actually handles both search and ask.
94+
placeholder={`${tString(language, aiMode === CustomizationAIMode.Search ? 'search_or_ask' : 'search')}...`}
9395
maxLength={512}
96+
size={10}
9497
className={tcls(
9598
'peer z-10 min-w-0 grow bg-transparent py-0.5 text-tint-strong theme-bold:text-header-link outline-none transition-[width] duration-300 contain-paint placeholder:text-tint theme-bold:placeholder:text-current theme-bold:placeholder:opacity-7',
9699
isOpen ? '' : 'max-md:opacity-0'
97100
)}
98101
ref={inputRef}
99102
/>
100-
<Shortcut />
103+
{!isOpen ? <Shortcut /> : null}
101104
</div>
102105
</div>
103106
);
@@ -124,7 +127,7 @@ function Shortcut() {
124127
<div
125128
aria-busy={operatingSystem === null ? 'true' : undefined}
126129
className={tcls(
127-
`shortcut -mr-1 hidden justify-end gap-0.5 whitespace-nowrap text-xs [font-feature-settings:"calt",_"case"] contrast-more:text-tint-strong md:flex`,
130+
`shortcut -mr-1 relative z-10 hidden justify-end gap-0.5 whitespace-nowrap text-xs [font-feature-settings:"calt",_"case"] after:absolute after:right-full after:z-20 after:h-full after:w-8 after:bg-gradient-to-r after:from-transparent after:to-tint-base theme-bold:after:to-transparent after:content-[''] contrast-more:text-tint-strong md:flex`,
128131
operatingSystem
129132
? 'motion-safe:animate-fadeIn motion-reduce:opacity-11'
130133
: 'opacity-0'

‎packages/gitbook/src/components/primitives/Button.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,17 +65,17 @@ export const variantClasses = {
6565
'theme-bold:bg-header-link/2',
6666
'theme-bold:text-header-link',
6767
'theme-bold:!shadow-none',
68-
'theme-bold:ring-header-link/4',
68+
'theme-bold:border-header-link/4',
6969

7070
'theme-bold:hover:bg-header-link/3',
7171
'theme-bold:hover:text-header-link',
7272
'theme-bold:hover:shadow-none',
73-
'theme-bold:hover:ring-header-link/5',
73+
'theme-bold:hover:border-header-link/5',
7474

7575
'theme-bold:contrast-more:bg-header-background',
7676
'theme-bold:contrast-more:text-header-link',
77-
'theme-bold:contrast-more:ring-header-link',
78-
'theme-bold:contrast-more:hover:ring-header-link',
77+
'theme-bold:contrast-more:border-header-link',
78+
'theme-bold:contrast-more:hover:border-header-link',
7979
],
8080
};
8181

@@ -111,8 +111,8 @@ export const Button = React.forwardRef<
111111
ref
112112
) => {
113113
const sizes = {
114-
default: ['text-base', 'font-semibold', 'px-5', 'py-2', 'circular-corners:px-6'],
115-
medium: ['text-sm', iconOnly ? 'px-2' : 'px-3.5', 'py-1.5', 'circular-corners:px-4'],
114+
default: ['text-base', 'font-semibold', 'px-5', 'py-2'],
115+
medium: ['text-sm', iconOnly ? 'px-2' : 'px-3.5', 'py-1.5'],
116116
small: ['text-xs', 'py-2', iconOnly ? 'px-2' : 'px-3'],
117117
xsmall: ['text-xs', 'py-1', iconOnly ? 'px-1.5' : 'px-2'],
118118
};

0 commit comments

Comments
 (0)