Chip right height according to view (#7976)

twentyhq · Oct 23, 2024 · a35d888 · a35d888
1 parent d9429b1
commit a35d888
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/...t/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/...t/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/...src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx b/...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 = () => {
     <RecordIdentifierChip
       objectNameSingular={objectNameSingular}
       record={recordValue}
+      size={ChipSize.Small}
     />
   ) : (
     <RecordChip objectNameSingular={objectNameSingular} record={recordValue} />

diff --git a/.../twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx b/.../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
@@ -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<AvatarType>;
   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
@@ -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}
-      <OverflowingTextWithTooltip
-        size={size === ChipSize.Large ? 'large' : 'small'}
-        text={label}
-      />
+      <OverflowingTextWithTooltip size={size} text={label} />
       {rightComponent}
     </StyledContainer>
   );