From fd15ec8bd7d0b9b56405ea4ea783abd0b75e204e Mon Sep 17 00:00:00 2001 From: Joe Crawley Date: Wed, 20 Nov 2024 17:48:17 -0800 Subject: [PATCH] adding textfield state --- weave-js/src/components/Form/TextField.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/weave-js/src/components/Form/TextField.tsx b/weave-js/src/components/Form/TextField.tsx index b3d8f952ff5..c40f697ac85 100644 --- a/weave-js/src/components/Form/TextField.tsx +++ b/weave-js/src/components/Form/TextField.tsx @@ -36,10 +36,12 @@ type TextFieldProps = { autoComplete?: string; dataTest?: string; step?: number; + variant?: 'default' | 'ghost'; }; export const TextField = ({ size, + variant = 'default', placeholder, value, onChange, @@ -86,13 +88,17 @@ export const TextField = ({ textFieldSize === 'medium' ? 'h-32' : 'h-40', 'bg-white dark:bg-moon-900', 'text-moon-800 dark:text-moon-200', - 'outline outline-1 outline-moon-250 dark:outline-moon-700', + variant === 'default' && + 'outline outline-1 outline-moon-250 dark:outline-moon-700', + variant === 'ghost' && + 'outline outline-1 outline-transparent dark:outline-transparent', { 'hover:outline-2 [&:hover:not(:focus-within)]:outline-[#83E4EB] dark:[&:hover:not(:focus-within)]:outline-teal-650': - !errorState, + !errorState && variant === 'default', 'focus-within:outline-2 focus-within:outline-teal-400 dark:focus-within:outline-teal-600': - !errorState, - 'outline-2 outline-red-450 dark:outline-red-550': errorState, + !errorState && variant === 'default', + 'outline-2 outline-red-450 dark:outline-red-550': + errorState && variant === 'default', 'pointer-events-none opacity-50': disabled, } )}>