select height variant

ehconitin · Nov 14, 2024 · 36ddd6c · 36ddd6c
1 parent a3709f1
commit 36ddd6c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx
@@ -142,6 +142,7 @@ export const SettingsOptionCardContent = (
           value={props.value}
           onChange={props.onChange}
           options={props.options}
+          variant="small"
         />
       );
     }

diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@@ -24,6 +24,8 @@ type CallToActionButton = {
   Icon?: IconComponent;
 };
 
+export type SelectVariant = 'small' | 'default';
+
 export type SelectProps<Value extends string | number | null> = {
   className?: string;
   disabled?: boolean;
@@ -40,6 +42,7 @@ export type SelectProps<Value extends string | number | null> = {
   value?: Value;
   withSearchInput?: boolean;
   callToActionButton?: CallToActionButton;
+  variant?: SelectVariant;
 };
 
 const StyledContainer = styled.div<{ fullWidth?: boolean }>`
@@ -70,6 +73,7 @@ export const Select = <Value extends string | number | null>({
   value,
   withSearchInput,
   callToActionButton,
+  variant = 'default',
 }: SelectProps<Value>) => {
   const selectContainerRef = useRef<HTMLDivElement>(null);
 
@@ -115,6 +119,7 @@ export const Select = <Value extends string | number | null>({
         <SelectControl
           selectedOption={selectedOption}
           isDisabled={isDisabled}
+          variant={variant}
         />
       ) : (
         <Dropdown
@@ -125,6 +130,7 @@ export const Select = <Value extends string | number | null>({
             <SelectControl
               selectedOption={selectedOption}
               isDisabled={isDisabled}
+              variant={variant}
             />
           }
           disableBlur={disableBlur}

diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx
@@ -1,4 +1,4 @@
-import { SelectOption } from '@/ui/input/components/Select';
+import { SelectOption, SelectVariant } from '@/ui/input/components/Select';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
@@ -10,14 +10,16 @@ import {
 const StyledControlContainer = styled.div<{
   disabled?: boolean;
   hasIcon: boolean;
+  variant?: SelectVariant;
 }>`
   display: grid;
   grid-template-columns: ${({ hasIcon }) =>
     hasIcon ? 'auto 1fr auto' : '1fr auto'};
   align-items: center;
   gap: ${({ theme }) => theme.spacing(1)};
   box-sizing: border-box;
-  height: ${({ theme }) => theme.spacing(8)};
+  height: ${({ variant, theme }) =>
+    variant === 'small' ? theme.spacing(6) : theme.spacing(8)};
   max-width: 100%;
   padding: 0 ${({ theme }) => theme.spacing(2)};
   background-color: ${({ theme }) => theme.background.transparent.lighter};
@@ -39,18 +41,21 @@ const StyledIconChevronDown = styled(IconChevronDown)<{
 type SelectControlProps = {
   selectedOption: SelectOption<string | number | null>;
   isDisabled?: boolean;
+  variant?: SelectVariant;
 };
 
 export const SelectControl = ({
   selectedOption,
   isDisabled,
+  variant,
 }: SelectControlProps) => {
   const theme = useTheme();
 
   return (
     <StyledControlContainer
       disabled={isDisabled}
       hasIcon={isDefined(selectedOption.Icon)}
+      variant={variant}
     >
       {isDefined(selectedOption.Icon) ? (
         <selectedOption.Icon