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}
);