Option-menu-v2-input (#11116)

Adding the possibility to change the view name and incon from the
Options menu dropdown

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil';
 import {
   IconApps,
   IconButton,
+  IconButtonSize,
   IconButtonVariant,
   IconComponent,
   LightIconButton,
@@ -21,8 +22,8 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { arrayToChunks } from '~/utils/array/arrayToChunks';
 
-import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
 import { t } from '@lingui/core/macro';
+import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
 
 export type IconPickerProps = {
   disabled?: boolean;
@@ -34,6 +35,7 @@ export type IconPickerProps = {
   onOpen?: () => void;
   variant?: IconButtonVariant;
   className?: string;
+  size?: IconButtonSize;
 };
 
 const StyledMenuIconItemsContainer = styled.div`
@@ -91,6 +93,7 @@ export const IconPicker = ({
   onOpen,
   variant = 'secondary',
   className,
+  size = 'medium',
 }: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
   const {
@@ -168,6 +171,7 @@ export const IconPicker = ({
             disabled={disabled}
             Icon={icon}
             variant={variant}
+            size={size}
           />
         }
         dropdownMenuWidth={176}

packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx

@@ -49,13 +49,25 @@ const StyledAdornmentContainer = styled.div<{
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   height: ${({ sizeVariant }) =>
-    sizeVariant === 'sm' ? '20px' : sizeVariant === 'md' ? '28px' : '32px'};
+    sizeVariant === 'xs'
+      ? '20px'
+      : sizeVariant === 'sm'
+        ? '24px'
+        : sizeVariant === 'md'
+          ? '28px'
+          : '32px'};
   justify-content: center;
   min-width: fit-content;
   padding: ${({ theme }) => theme.spacing(2)};
   width: auto;
   line-height: ${({ sizeVariant }) =>
-    sizeVariant === 'sm' ? '20px' : sizeVariant === 'md' ? '28px' : '32px'};
+    sizeVariant === 'xs'
+      ? '20px'
+      : sizeVariant === 'sm'
+        ? '24px'
+        : sizeVariant === 'md'
+          ? '28px'
+          : '32px'};
 
   ${({ position }) =>
     position === 'left' ? 'border-right: none;' : 'border-left: none;'}
@@ -97,14 +109,26 @@ const StyledInput = styled.input<
   font-weight: ${({ theme, inheritFontStyles }) =>
     inheritFontStyles ? 'inherit' : theme.font.weight.regular};
   height: ${({ sizeVariant }) =>
-    sizeVariant === 'sm' ? '20px' : sizeVariant === 'md' ? '28px' : '32px'};
+    sizeVariant === 'xs'
+      ? '20px'
+      : sizeVariant === 'sm'
+        ? '24px'
+        : sizeVariant === 'md'
+          ? '28px'
+          : '32px'};
   line-height: ${({ sizeVariant }) =>
-    sizeVariant === 'sm' ? '20px' : sizeVariant === 'md' ? '28px' : '32px'};
+    sizeVariant === 'xs'
+      ? '20px'
+      : sizeVariant === 'sm'
+        ? '24px'
+        : sizeVariant === 'md'
+          ? '28px'
+          : '32px'};
   outline: none;
   padding: ${({ theme, sizeVariant, autoGrow }) =>
     autoGrow
       ? theme.spacing(1)
-      : sizeVariant === 'sm'
+      : sizeVariant === 'xs'
         ? `${theme.spacing(2)} 0`
         : theme.spacing(2)};
   padding-left: ${({ theme, LeftIcon, autoGrow }) =>
@@ -152,9 +176,9 @@ const StyledLeftIconContainer = styled.div<{ sizeVariant: TextInputV2Size }>`
   display: flex;
   justify-content: center;
   padding-left: ${({ theme, sizeVariant }) =>
-    sizeVariant === 'sm'
+    sizeVariant === 'xs'
       ? theme.spacing(0.5)
-      : sizeVariant === 'md'
+      : sizeVariant === 'md' || sizeVariant === 'sm'
         ? theme.spacing(1)
         : theme.spacing(2)};
   position: absolute;
@@ -191,7 +215,7 @@ const StyledTrailingIcon = styled.div<{
 
 const INPUT_TYPE_PASSWORD = 'password';
 
-export type TextInputV2Size = 'sm' | 'md' | 'lg';
+export type TextInputV2Size = 'xs' | 'sm' | 'md' | 'lg';
 
 export type TextInputV2ComponentProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
@@ -378,7 +402,13 @@ const StyledAutogrowWrapper = styled(AutogrowWrapper)<{
 }>`
   border: 1px solid transparent;
   height: ${({ sizeVariant }) =>
-    sizeVariant === 'sm' ? '20px' : sizeVariant === 'md' ? '28px' : '32px'};
+    sizeVariant === 'xs'
+      ? '20px'
+      : sizeVariant === 'sm'
+        ? '24px'
+        : sizeVariant === 'md'
+          ? '28px'
+          : '32px'};
   padding: 0 ${({ theme }) => theme.spacing(1.25)};
   box-sizing: border-box;
 `;