From 4edbb1370622de51221d8abc7c95f012167e381b Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Thu, 30 Jan 2025 00:14:25 +0530 Subject: [PATCH] Fix - Input box shadow, left icon focus and new size variant (#9902) Favorite folder input needs to be 28px --- added a new sizeVariant Removed box shadow completely -- checked with @Bonapara The left icon used to be of color light on focus -- added a state to check if input is focused --------- Co-authored-by: Charles Bochet --- .../ui/input/components/TextInputV2.tsx | 48 +++++++++++++------ .../components/EditableBreadcrumbItem.tsx | 1 - .../components/NavigationDrawerInput.tsx | 1 + 3 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx index 08af32b50..2f0150589 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx @@ -16,7 +16,6 @@ import { IconComponent, IconEye, IconEyeOff, - RGBA, } from 'twenty-ui'; import { useCombinedRefs } from '~/hooks/useCombinedRefs'; import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly'; @@ -54,12 +53,13 @@ const StyledInput = styled.input< flex-grow: 1; font-family: ${({ theme }) => theme.font.family}; font-weight: ${({ theme }) => theme.font.weight.regular}; - height: ${({ sizeVariant }) => (sizeVariant === 'sm' ? '20px' : '32px')}; + height: ${({ sizeVariant }) => + sizeVariant === 'sm' ? '20px' : sizeVariant === 'md' ? '28px' : '32px'}; outline: none; padding: ${({ theme, sizeVariant }) => sizeVariant === 'sm' ? `${theme.spacing(2)} 0` : theme.spacing(2)}; padding-left: ${({ theme, LeftIcon }) => - LeftIcon ? `calc(${theme.spacing(4)} + 16px)` : theme.spacing(2)}; + LeftIcon ? `calc(${theme.spacing(3)} + 16px)` : theme.spacing(2)}; width: ${({ theme, width }) => width ? `calc(${width}px + ${theme.spacing(5)})` : '100%'}; @@ -76,8 +76,9 @@ const StyledInput = styled.input< &:focus { ${({ theme }) => { - return `box-shadow: 0px 0px 0px 3px ${RGBA(theme.color.blue, 0.1)}; - border-color: ${theme.color.blue};`; + return ` + border-color: ${theme.color.blue}; + `; }}; } `; @@ -88,11 +89,16 @@ const StyledErrorHelper = styled.div` padding: ${({ theme }) => theme.spacing(1)}; `; -const StyledLeftIconContainer = styled.div` +const StyledLeftIconContainer = styled.div<{ sizeVariant: TextInputV2Size }>` align-items: center; display: flex; justify-content: center; - padding-left: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme, sizeVariant }) => + sizeVariant === 'sm' + ? theme.spacing(0.5) + : sizeVariant === 'md' + ? theme.spacing(1) + : theme.spacing(2)}; position: absolute; top: 0; bottom: 0; @@ -113,9 +119,10 @@ const StyledTrailingIconContainer = styled.div< margin: auto 0; `; -const StyledTrailingIcon = styled.div` +const StyledTrailingIcon = styled.div<{ isFocused?: boolean }>` align-items: center; - color: ${({ theme }) => theme.font.color.light}; + color: ${({ theme, isFocused }) => + isFocused ? theme.font.color.secondary : theme.font.color.light}; cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')}; display: flex; justify-content: center; @@ -123,7 +130,7 @@ const StyledTrailingIcon = styled.div` const INPUT_TYPE_PASSWORD = 'password'; -export type TextInputV2Size = 'sm' | 'md'; +export type TextInputV2Size = 'sm' | 'md' | 'lg'; export type TextInputV2ComponentProps = Omit< InputHTMLAttributes, @@ -169,7 +176,7 @@ const TextInputV2Component = ( LeftIcon, autoComplete, maxLength, - sizeVariant = 'md', + sizeVariant = 'lg', dataTestId, }: TextInputV2ComponentProps, // eslint-disable-next-line @nx/workspace-component-props-naming @@ -181,11 +188,22 @@ const TextInputV2Component = ( const combinedRef = useCombinedRefs(ref, inputRef); const [passwordVisible, setPasswordVisible] = useState(false); + const [isFocused, setIsFocused] = useState(false); const handleTogglePasswordVisibility = () => { setPasswordVisible(!passwordVisible); }; + const handleFocus: FocusEventHandler = (event) => { + setIsFocused(true); + onFocus?.(event); + }; + + const handleBlur: FocusEventHandler = (event) => { + setIsFocused(false); + onBlur?.(event); + }; + const inputId = useId(); return ( @@ -197,8 +215,8 @@ const TextInputV2Component = ( )} {!!LeftIcon && ( - - + + @@ -211,8 +229,8 @@ const TextInputV2Component = ( autoComplete={autoComplete || 'off'} ref={combinedRef} tabIndex={tabIndex ?? 0} - onFocus={onFocus} - onBlur={onBlur} + onFocus={handleFocus} + onBlur={handleBlur} type={passwordVisible ? 'text' : type} onChange={(event: ChangeEvent) => { onChange?.( diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/EditableBreadcrumbItem.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/EditableBreadcrumbItem.tsx index b3956a044..d7d3e8702 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/EditableBreadcrumbItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/EditableBreadcrumbItem.tsx @@ -36,7 +36,6 @@ const StyledButton = styled('button')` text-decoration: none; text-overflow: ellipsis; white-space: nowrap; - :hover { background: ${({ theme }) => theme.background.transparent.light}; } diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerInput.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerInput.tsx index 0266bb39b..5a7231242 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerInput.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerInput.tsx @@ -78,6 +78,7 @@ export const NavigationDrawerInput = ({ onChange={onChange} placeholder={placeholder} onFocus={handleFocus} + sizeVariant="md" fullWidth autoFocus />