[BUGFIX] Account owner should not be clickable & [Refactor] Chip.tsx links (#10359)

# Introduction closes #10196 Initially fixing the `Account Owner` record field value should not be clickable and redirects on current page bug. This has been fixed computing whereas the current filed is a workspace member dynamically rendering a stale Chip components instead of an interactive one ## Refactor Refactored the `AvatarChip` `to` props logic to be scoped to lower level scope `Chip`. Now we have `LinkChip` `Chip`, `LinkAvatarChip` and `AvatarChip` all exported from twenty-ui. The caller has to determine which one to call from the design system ## New rule regarding chip links As discussed with @charlesBochet and @FelixMalfait A chip link will now ***always*** have `to` defined. ( and optionally an `onClick` ). `ChipLinks` cannot be used as buttons anymore ## Factorization Deleted the `RecordIndexRecordChip.tsx` file ( aka `RecordIdentifierChip` component ) that was duplicating some logic, refactored the `RecordChip` in order to handle what was covered by `RecordIdentifierChip` ## Conclusion As always any suggestions are more than welcomed ! Took few opinionated decision/refactor regarding nested long ternaries rendering `ReactNode` elements ## Misc https://github.com/user-attachments/assets/8ef11fb2-7ba6-4e96-bd59-b0be5a425156 --------- Co-authored-by: Mohammed Razak <mohammedrazak2001@gmail.com> Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2025-02-25 15:36:17 +01:00
parent fc0e98b53e
commit 89e11b4626
24 changed files with 387 additions and 302 deletions
--- a/packages/twenty-ui/src/display/avatar-chip/components/AvatarChipLeftComponent.tsx
+++ b/packages/twenty-ui/src/display/avatar-chip/components/AvatarChipLeftComponent.tsx
@ -0,0 +1,74 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Avatar } from '@ui/display/avatar/components/Avatar';
+import { AvatarType } from '@ui/display/avatar/types/AvatarType';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { isDefined } from 'twenty-shared';
+import { Nullable } from 'vitest';
+
+const StyledInvertedIconContainer = styled.div<{ backgroundColor: string }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+`;
+
+export type AvatarChipsLeftComponentProps = {
+  name: string;
+  avatarUrl?: string;
+  avatarType?: Nullable<AvatarType>;
+  LeftIcon?: IconComponent;
+  LeftIconColor?: string;
+  isIconInverted?: boolean;
+  placeholderColorSeed?: string;
+};
+
+export const AvatarChipsLeftComponent: React.FC<
+  AvatarChipsLeftComponentProps
+> = ({
+  LeftIcon,
+  placeholderColorSeed,
+  avatarType,
+  avatarUrl,
+  name,
+  isIconInverted = false,
+  LeftIconColor,
+}) => {
+  const theme = useTheme();
+  if (!isDefined(LeftIcon)) {
+    return (
+      <Avatar
+        avatarUrl={avatarUrl}
+        placeholderColorSeed={placeholderColorSeed}
+        placeholder={name}
+        size="sm"
+        type={avatarType}
+      />
+    );
+  }
+
+  if (isIconInverted) {
+    return (
+      <StyledInvertedIconContainer
+        backgroundColor={theme.background.invertedSecondary}
+      >
+        <LeftIcon
+          color="white"
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
+        />
+      </StyledInvertedIconContainer>
+    );
+  }
+
+  return (
+    <LeftIcon
+      size={theme.icon.size.md}
+      stroke={theme.icon.stroke.sm}
+      color={LeftIconColor || 'currentColor'}
+    />
+  );
+};