diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx index 8e3c002055f7..dd746b8a74ba 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -30,6 +30,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { AnimatedEaseInOut, AvatarChipVariant, + ChipSize, IconEye, IconEyeOff, } from 'twenty-ui'; @@ -295,6 +296,7 @@ export const RecordBoardCard = ({ objectNameSingular={objectMetadataItem.nameSingular} record={record as ObjectRecord} variant={AvatarChipVariant.Transparent} + size={ChipSize.Large} /> )} diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx index 94360aa0f23e..851460f5d24d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx @@ -1,6 +1,7 @@ import { RecordChip } from '@/object-record/components/RecordChip'; import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay'; import { RecordIdentifierChip } from '@/object-record/record-index/components/RecordIndexRecordChip'; +import { ChipSize } from 'twenty-ui'; export const ChipFieldDisplay = () => { const { recordValue, objectNameSingular, isLabelIdentifier } = @@ -14,6 +15,7 @@ export const ChipFieldDisplay = () => { ) : ( diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx index 8e84fa83325d..d883ce55f530 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx @@ -3,18 +3,20 @@ import { useRecordChipData } from '@/object-record/hooks/useRecordChipData'; import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { useContext } from 'react'; -import { AvatarChip, AvatarChipVariant } from 'twenty-ui'; +import { AvatarChip, AvatarChipVariant, ChipSize } from 'twenty-ui'; export type RecordIdentifierChipProps = { objectNameSingular: string; record: ObjectRecord; variant?: AvatarChipVariant; + size?: ChipSize; }; export const RecordIdentifierChip = ({ objectNameSingular, record, variant, + size, }: RecordIdentifierChipProps) => { const { onIndexIdentifierClick } = useContext(RecordIndexRootPropsContext); const { recordChipData } = useRecordChipData({ @@ -38,6 +40,7 @@ export const RecordIdentifierChip = ({ variant={variant} LeftIcon={LeftIcon} LeftIconColor={LeftIconColor} + size={size} /> ); }; diff --git a/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx b/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx index 72b0253eed81..d71afa2f6053 100644 --- a/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx +++ b/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { Avatar } from '@ui/display/avatar/components/Avatar'; import { AvatarType } from '@ui/display/avatar/types/AvatarType'; -import { Chip, ChipVariant } from '@ui/display/chip/components/Chip'; +import { Chip, ChipSize, ChipVariant } from '@ui/display/chip/components/Chip'; import { IconComponent } from '@ui/display/icon/types/IconComponent'; import { ThemeContext } from '@ui/theme'; import { isDefined } from '@ui/utilities/isDefined'; @@ -13,6 +13,7 @@ export type AvatarChipProps = { avatarUrl?: string; avatarType?: Nullable; variant?: AvatarChipVariant; + size?: ChipSize; LeftIcon?: IconComponent; LeftIconColor?: string; isIconInverted?: boolean; @@ -47,6 +48,7 @@ export const AvatarChip = ({ className, placeholderColorSeed, onClick, + size = ChipSize.Small, }: AvatarChipProps) => { const { theme } = useContext(ThemeContext); @@ -60,6 +62,7 @@ export const AvatarChip = ({ : ChipVariant.Regular : ChipVariant.Transparent } + size={size} leftComponent={ isDefined(LeftIcon) ? ( isIconInverted === true ? ( diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index 3bf0cd9bb90d..42afc99b5168 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -66,7 +66,8 @@ const StyledContainer = withTheme(styled.div< display: inline-flex; justify-content: center; gap: ${({ theme }) => theme.spacing(1)}; - height: ${({ theme }) => theme.spacing(4)}; + height: ${({ theme, size }) => + size === ChipSize.Large ? theme.spacing(4) : theme.spacing(3)}; max-width: ${({ maxWidth }) => maxWidth ? `calc(${maxWidth}px - 2 * var(--chip-horizontal-padding))` @@ -141,10 +142,7 @@ export const Chip = ({ className={className} > {leftComponent} - + {rightComponent} );