Refacto form select input (#11426)

- small fixes on form design
- refacto form select input to use the existing select component

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

@@ -10,10 +10,10 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectControl } from '@/ui/input/components/SelectControl';
 import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { isDefined } from 'twenty-shared/utils';
-import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
 import { IconComponent } from 'twenty-ui/display';
-import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
 import { SelectOption } from 'twenty-ui/input';
+import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
+import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
 
 export type SelectSizeVariant = 'small' | 'default';
 
@@ -43,6 +43,7 @@ export type SelectProps<Value extends SelectValue> = {
   needIconCheck?: boolean;
   callToActionButton?: CallToActionButton;
   dropdownOffset?: DropdownOffset;
+  hasRightElement?: boolean;
 };
 
 const StyledContainer = styled.div<{ fullWidth?: boolean }>`
@@ -75,6 +76,7 @@ export const Select = <Value extends SelectValue>({
   needIconCheck,
   callToActionButton,
   dropdownOffset,
+  hasRightElement,
 }: SelectProps<Value>) => {
   const selectContainerRef = useRef<HTMLDivElement>(null);
 
@@ -121,6 +123,7 @@ export const Select = <Value extends SelectValue>({
           selectedOption={selectedOption}
           isDisabled={isDisabled}
           selectSizeVariant={selectSizeVariant}
+          hasRightElement={hasRightElement}
         />
       ) : (
         <Dropdown
@@ -133,6 +136,7 @@ export const Select = <Value extends SelectValue>({
               selectedOption={selectedOption}
               isDisabled={isDisabled}
               selectSizeVariant={selectSizeVariant}
+              hasRightElement={hasRightElement}
             />
           }
           dropdownComponents={

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

@@ -1,5 +1,5 @@
 import { SelectSizeVariant } from '@/ui/input/components/Select';
-import { useTheme } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown, OverflowingTextWithTooltip } from 'twenty-ui/display';
@@ -13,6 +13,7 @@ const StyledControlContainer = styled.div<{
   hasIcon: boolean;
   selectSizeVariant?: SelectSizeVariant;
   textAccent: SelectControlTextAccent;
+  hasRightElement?: boolean;
 }>`
   display: grid;
   grid-template-columns: ${({ hasIcon }) =>
@@ -26,7 +27,22 @@ const StyledControlContainer = styled.div<{
   padding: 0 ${({ theme }) => theme.spacing(2)};
   background-color: ${({ theme }) => theme.background.transparent.lighter};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
+
+  ${({ hasRightElement, theme }) =>
+    !hasRightElement
+      ? css`
+          border-right: auto;
+          border-bottom-right-radius: ${theme.border.radius.sm};
+          border-top-right-radius: ${theme.border.radius.sm};
+        `
+      : css`
+          border-right: none;
+          border-bottom-right-radius: none;
+          border-top-right-radius: none;
+        `}
+
   color: ${({ disabled, theme, textAccent }) =>
     disabled
       ? theme.font.color.tertiary
@@ -49,6 +65,7 @@ type SelectControlProps = {
   isDisabled?: boolean;
   selectSizeVariant?: SelectSizeVariant;
   textAccent?: SelectControlTextAccent;
+  hasRightElement?: boolean;
 };
 
 export const SelectControl = ({
@@ -56,6 +73,7 @@ export const SelectControl = ({
   isDisabled,
   selectSizeVariant,
   textAccent = 'default',
+  hasRightElement,
 }: SelectControlProps) => {
   const theme = useTheme();
 
@@ -65,6 +83,7 @@ export const SelectControl = ({
       hasIcon={isDefined(selectedOption.Icon)}
       selectSizeVariant={selectSizeVariant}
       textAccent={textAccent}
+      hasRightElement={hasRightElement}
     >
       {isDefined(selectedOption.Icon) ? (
         <selectedOption.Icon