feat(approval-domain): add UI for approval domains (#10480)

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

@@ -31,12 +31,42 @@ const StyledContainer = styled.div<
 `;
 
 const StyledInputContainer = styled.div`
+  align-items: center;
   background-color: inherit;
   display: flex;
   flex-direction: row;
   position: relative;
 `;
 
+const StyledAdornmentContainer = styled.div<{
+  sizeVariant: TextInputV2Size;
+  position: 'left' | 'right';
+}>`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme, position }) =>
+    position === 'left'
+      ? `${theme.border.radius.sm} 0 0 ${theme.border.radius.sm}`
+      : `0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0`};
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: ${({ sizeVariant }) =>
+    sizeVariant === 'sm' ? '20px' : 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'};
+
+  ${({ position }) =>
+    position === 'left' ? 'border-right: none;' : 'border-left: none;'}
+`;
+
 const StyledInput = styled.input<
   Pick<
     TextInputV2ComponentProps,
@@ -46,13 +76,21 @@ const StyledInput = styled.input<
     | 'width'
     | 'inheritFontStyles'
     | 'autoGrow'
+    | 'rightAdornment'
+    | 'leftAdornment'
   >
 >`
   background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border-radius: ${({ theme, leftAdornment, rightAdornment }) =>
+    leftAdornment
+      ? `0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0`
+      : rightAdornment
+        ? `${theme.border.radius.sm} 0 0 ${theme.border.radius.sm}`
+        : theme.border.radius.sm};
+
   border: 1px solid
     ${({ theme, error }) =>
       error ? theme.border.color.danger : theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
   box-sizing: border-box;
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
@@ -165,6 +203,8 @@ export type TextInputV2ComponentProps = Omit<
   sizeVariant?: TextInputV2Size;
   inheritFontStyles?: boolean;
   loading?: boolean;
+  rightAdornment?: string;
+  leftAdornment?: string;
 };
 
 type TextInputV2WithAutoGrowWrapperProps = TextInputV2ComponentProps;
@@ -201,6 +241,8 @@ const TextInputV2Component = forwardRef<
       dataTestId,
       autoGrow = false,
       loading = false,
+      rightAdornment,
+      leftAdornment,
     },
     ref,
   ) => {
@@ -235,6 +277,12 @@ const TextInputV2Component = forwardRef<
           </InputLabel>
         )}
         <StyledInputContainer>
+          {leftAdornment && (
+            <StyledAdornmentContainer sizeVariant={sizeVariant} position="left">
+              {leftAdornment}
+            </StyledAdornmentContainer>
+          )}
+
           {!!LeftIcon && (
             <StyledLeftIconContainer sizeVariant={sizeVariant}>
               <StyledTrailingIcon isFocused={isFocused}>
@@ -271,9 +319,18 @@ const TextInputV2Component = forwardRef<
               sizeVariant,
               inheritFontStyles,
               autoGrow,
+              leftAdornment,
+              rightAdornment,
             }}
           />
-
+          {rightAdornment && (
+            <StyledAdornmentContainer
+              sizeVariant={sizeVariant}
+              position="right"
+            >
+              {rightAdornment}
+            </StyledAdornmentContainer>
+          )}
           <StyledTrailingIconContainer {...{ error }}>
             {!error && type === INPUT_TYPE_PASSWORD && (
               <StyledTrailingIcon

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

@@ -56,3 +56,15 @@ export const Small: Story = {
 export const AutoGrowSmall: Story = {
   args: { autoGrow: true, sizeVariant: 'sm', value: 'Tim' },
 };
+
+export const WithLeftAdornment: Story = {
+  args: {
+    leftAdornment: 'https://',
+  },
+};
+
+export const WithRightAdornment: Story = {
+  args: {
+    rightAdornment: '@twenty.com',
+  },
+};