Tweaks

Author: zenoachtig

packages/gitbook/src/components/DocumentView/Integration/contentkit.css

@@ -156,8 +156,10 @@
 
 /** Text input */
 .contentkit-textinput {
-    @apply w-full rounded border border-tint text-tint-strong placeholder:text-tint flex resize-none flex-1 px-2 py-1.5 text-sm bg-transparent whitespace-pre-line;
-    @apply focus:outline-primary focus:border-primary;
+    @apply w-full circular-corners:rounded-3xl ring-primary-hover rounded-corners:rounded-lg border border-tint text-tint-strong transition-all placeholder:text-tint/8 flex resize-none flex-1 px-2 py-1.5 text-sm bg-tint-base whitespace-pre-line;
+    @apply shadow-tint/6 depth-subtle:focus-within:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg dark:shadow-tint-1;
+    @apply focus:border-primary-hover focus:shadow-primary-subtle focus:ring-2 hover:border-tint-hover focus:hover:border-primary-hover;
+    @apply disabled:cursor-not-allowed disabled:border-tint-subtle disabled:bg-tint-subtle;
 }
 
 /** Form */

packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx

@@ -7,8 +7,7 @@ import { useLanguage } from '@/intl/client';
 import { t, tString } from '@/intl/translate';
 import { tcls } from '@/lib/tailwind';
 import { useTrackEvent } from '../Insights';
-import { Button, ButtonGroup } from '../primitives';
-import { Input } from '../primitives/Input';
+import { Button, ButtonGroup, Input } from '../primitives';
 
 const MIN_COMMENT_LENGTH = 3;
 const MAX_COMMENT_LENGTH = 512;

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

@@ -2,7 +2,7 @@
 import React, { useEffect, useRef } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
-import { Input } from '../primitives/Input';
+import { Input } from '../primitives';
 import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
 
 interface SearchInputProps {
@@ -50,32 +50,34 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
         }, [isOpen, value]);
 
         return (
-            <Input
-                data-testid="search-input"
-                name="search-input"
-                ref={inputRef}
-                containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
-                sizing="small"
-                label={tString(language, withAI ? 'search_or_ask' : 'search')}
-                className="grow"
-                placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
-                onFocus={onFocus}
-                onKeyDown={onKeyDown}
-                leading="magnifying-glass"
-                onChange={(event) => {
-                    onChange(event.target.value);
-                }}
-                value={value}
-                maxLength={512}
-                autoComplete="off"
-                aria-autocomplete="list"
-                aria-haspopup="listbox"
-                aria-expanded={value && isOpen ? 'true' : 'false'}
-                clearButton
-                keyboardShortcut={<KeyboardShortcut keys={isOpen ? ['esc'] : ['mod', 'k']} />}
-                {...rest}
-                type="text"
-            />
+            <div className="relative flex @max-2xl:size-10 grow">
+                <Input
+                    data-testid="search-input"
+                    name="search-input"
+                    ref={inputRef}
+                    containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
+                    sizing="small"
+                    label={tString(language, withAI ? 'search_or_ask' : 'search')}
+                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-10 grow @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11"
+                    placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
+                    onFocus={onFocus}
+                    onKeyDown={onKeyDown}
+                    leading="magnifying-glass"
+                    onChange={(event) => {
+                        onChange(event.target.value);
+                    }}
+                    value={value}
+                    maxLength={512}
+                    autoComplete="off"
+                    aria-autocomplete="list"
+                    aria-haspopup="listbox"
+                    aria-expanded={value && isOpen ? 'true' : 'false'}
+                    clearButton
+                    keyboardShortcut={<KeyboardShortcut keys={isOpen ? ['esc'] : ['mod', 'k']} />}
+                    {...rest}
+                    type="text"
+                />
+            </div>
         );
     }
 );

packages/gitbook/src/components/primitives/Input.tsx

@@ -133,6 +133,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                 type="text"
                 ref={ref as React.Ref<HTMLInputElement>}
                 value={value}
+                size={1} // This will make the input have the smallest possible width (1 character) so we can grow it with flexbox
                 onKeyDown={(event) => {
                     if (event.key === 'Enter' && !event.shiftKey && value.toString().trim()) {
                         event.preventDefault();
@@ -206,7 +207,11 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                                 hasValue ? 'group-focus-within/input:flex' : ''
                             )}
                             onClick={() => {
-                                setValue('');
+                                handleChange({
+                                    target: {
+                                        value: '',
+                                    },
+                                } as React.ChangeEvent<HybridInputElement>);
                             }}
                         />
                     ) : null}
@@ -226,7 +231,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                     </div>
                 </div>
                 {trailing || submitButton || maxLength ? (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 empty:hidden">
                         {trailing ? trailing : null}
                         {maxLength && !submitted && value.toString().length > maxLength * 0.8 ? (
                             <span

packages/gitbook/src/components/primitives/index.ts

@@ -13,3 +13,4 @@ export * from './Popover';
 export * from './LoadingStateProvider';
 export * from './HoverCard';
 export * from './DropdownMenu';
+export * from './Input';