[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>
This commit is contained in:
53
packages/twenty-ui/src/display/chip/components/LinkChip.tsx
Normal file
53
packages/twenty-ui/src/display/chip/components/LinkChip.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import styled from '@emotion/styled';
|
||||
import {
|
||||
Chip,
|
||||
ChipAccent,
|
||||
ChipProps,
|
||||
ChipSize,
|
||||
ChipVariant,
|
||||
} from '@ui/display/chip/components/Chip';
|
||||
import { MouseEvent } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export type LinkChipProps = Omit<
|
||||
ChipProps,
|
||||
'onClick' | 'disabled' | 'clickable'
|
||||
> & {
|
||||
to: string;
|
||||
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
||||
};
|
||||
|
||||
// Ideally we would use the UndecoratedLink component from @ui/navigation
|
||||
// but it led to a bug probably linked to circular dependencies, which was hard to solve
|
||||
const StyledLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
export const LinkChip = ({
|
||||
to,
|
||||
size = ChipSize.Small,
|
||||
label,
|
||||
variant = ChipVariant.Regular,
|
||||
leftComponent = null,
|
||||
rightComponent = null,
|
||||
accent = ChipAccent.TextPrimary,
|
||||
className,
|
||||
maxWidth,
|
||||
onClick,
|
||||
}: LinkChipProps) => {
|
||||
return (
|
||||
<StyledLink to={to} onClick={onClick}>
|
||||
<Chip
|
||||
size={size}
|
||||
label={label}
|
||||
clickable={true}
|
||||
variant={variant}
|
||||
leftComponent={leftComponent}
|
||||
rightComponent={rightComponent}
|
||||
accent={accent}
|
||||
className={className}
|
||||
maxWidth={maxWidth}
|
||||
/>
|
||||
</StyledLink>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user