starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-19 15:21:23 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix URL 2px grow on focus

Browse Source
This commit is contained in:
Gregory Schier
2024-01-19 21:49:51 -08:00
parent 7da01e21e2
commit 13fdf9d9e4
2 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src-web/components/UrlBar.tsx
View File

@@ -49,11 +49,12 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
}); });
return ( return (
<form onSubmit={handleSubmit} className={classNames('url-bar', className)}> <form onSubmit={handleSubmit} className={className}>
<Input <Input
autocompleteVariables autocompleteVariables
ref={inputRef} ref={inputRef}
size={isFocused ? 'auto' : 'sm'} size="sm"
wrapLines={isFocused}
hideLabel hideLabel
useTemplating useTemplating
contentType="url" contentType="url"

15
src-web/components/core/Input.tsx
View File

@@ -40,6 +40,7 @@ export type InputProps = Omit<
placeholder?: string; placeholder?: string;
validate?: (v: string) => boolean; validate?: (v: string) => boolean;
require?: boolean; require?: boolean;
wrapLines?: boolean;
}; };
export const Input = forwardRef<EditorView | undefined, InputProps>(function Input( export const Input = forwardRef<EditorView | undefined, InputProps>(function Input(
@@ -60,6 +61,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
placeholder, placeholder,
require, require,
rightSlot, rightSlot,
wrapLines,
size = 'md', size = 'md',
type = 'text', type = 'text',
validate, validate,
@@ -82,7 +84,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
}, [onBlur]); }, [onBlur]);
const id = `input-${name}`; const id = `input-${name}`;
const inputClassName = classNames( const editorClassName = classNames(
className, className,
'!bg-transparent min-w-0 h-auto w-full focus:outline-none placeholder:text-placeholder', '!bg-transparent min-w-0 h-auto w-full focus:outline-none placeholder:text-placeholder',
); );
@@ -144,10 +146,9 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
'border', 'border',
focused ? 'border-focus' : 'border-highlight', focused ? 'border-focus' : 'border-highlight',
!isValid && '!border-invalid', !isValid && '!border-invalid',
size === 'md' && 'h-md', size === 'md' && 'min-h-md',
size === 'sm' && 'h-sm', size === 'sm' && 'min-h-sm',
size === 'xs' && 'h-xs', size === 'xs' && 'min-h-xs',
size === 'auto' && 'min-h-sm',
)} )}
> >
{leftSlot} {leftSlot}
@@ -163,14 +164,14 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
ref={ref} ref={ref}
id={id} id={id}
singleLine singleLine
wrapLines={size === 'auto'} wrapLines={wrapLines}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
type={type === 'password' && !obscured ? 'text' : type} type={type === 'password' && !obscured ? 'text' : type}
defaultValue={defaultValue} defaultValue={defaultValue}
forceUpdateKey={forceUpdateKey} forceUpdateKey={forceUpdateKey}
placeholder={placeholder} placeholder={placeholder}
onChange={handleChange} onChange={handleChange}
className={inputClassName} className={editorClassName}
onFocus={handleFocus} onFocus={handleFocus}
onBlur={handleBlur} onBlur={handleBlur}
{...props} {...props}