89e11b4626
# 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>
38 lines
995 B
TypeScript
38 lines
995 B
TypeScript
import { AvatarChipsLeftComponent } from '@ui/display/avatar-chip/components/AvatarChipLeftComponent';
|
|
import { AvatarChipsCommonProps } from '@ui/display/avatar-chip/types/AvatarChipsCommonProps.type';
|
|
import { Chip, ChipVariant } from '@ui/display/chip/components/Chip';
|
|
|
|
export type AvatarChipProps = AvatarChipsCommonProps;
|
|
export const AvatarChip = ({
|
|
name,
|
|
LeftIcon,
|
|
LeftIconColor,
|
|
avatarType,
|
|
avatarUrl,
|
|
className,
|
|
isIconInverted,
|
|
maxWidth,
|
|
placeholderColorSeed,
|
|
size,
|
|
}: AvatarChipProps) => (
|
|
<Chip
|
|
label={name}
|
|
variant={ChipVariant.Transparent}
|
|
size={size}
|
|
leftComponent={() => (
|
|
<AvatarChipsLeftComponent
|
|
name={name}
|
|
LeftIcon={LeftIcon}
|
|
LeftIconColor={LeftIconColor}
|
|
avatarType={avatarType}
|
|
avatarUrl={avatarUrl}
|
|
isIconInverted={isIconInverted}
|
|
placeholderColorSeed={placeholderColorSeed}
|
|
/>
|
|
)}
|
|
clickable={false}
|
|
className={className}
|
|
maxWidth={maxWidth}
|
|
/>
|
|
);
|