admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix array and links display (#8671)

Browse Source 
## Before

![image](https://github.com/user-attachments/assets/ebecb45b-d3c1-4c80-9d90-726e37d2d417)

![image](https://github.com/user-attachments/assets/33e85593-9459-4790-9ae6-a79265f33b5a)

## After

![image](https://github.com/user-attachments/assets/a5174069-bed3-4e02-ae98-550a418243c5)

![image](https://github.com/user-attachments/assets/f2d0dd16-225c-4788-bb90-d47875d8b5f3)
This commit is contained in:
martmull
2024-11-22 12:06:31 +01:00
committed by GitHub
parent aa8b0ff04a
commit 76be1df66a
7 changed files with 25 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/twenty-front/src/modules/ui/field/display/components/ArrayDisplay.tsx
View File

@ -1,62 +1,18 @@
import {
BORDER_COMMON,
OverflowingTextWithTooltip,
THEME_COMMON,
} from 'twenty-ui';
import { Chip, ChipVariant } from 'twenty-ui';
import { FieldArrayValue } from '@/object-record/record-field/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import styled from '@emotion/styled';
type ArrayDisplayProps = {
value: FieldArrayValue;
isFocused?: boolean;
isInputDisplay?: boolean;
};
const themeSpacing = THEME_COMMON.spacingMultiplicator;
const StyledContainer = styled.div`
align-items: center;
display: flex;
gap: ${themeSpacing * 1}px;
justify-content: flex-start;
max-width: 100%;
overflow: hidden;
width: 100%;
`;
const StyledTag = styled.div<{ isInputDisplay?: boolean }>`
background-color: ${({ theme, isInputDisplay }) =>
isInputDisplay ? 'transparent' : theme.background.tertiary};
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
border-radius: ${BORDER_COMMON.radius.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
`;
export const ArrayDisplay = ({
value,
isFocused,
isInputDisplay = false,
}: ArrayDisplayProps) => {
return isFocused ? (
<ExpandableList isChipCountDisplayed>
{value?.map((item, index) => (
<StyledTag key={index}>
<OverflowingTextWithTooltip text={item} />
</StyledTag>
export const ArrayDisplay = ({ value }: ArrayDisplayProps) => {
return (
<ExpandableList>
{value?.map((item) => (
<Chip variant={ChipVariant.Highlighted} label={item} />
))}
</ExpandableList>
) : (
<StyledContainer>
{value?.map((item, index) => (
<StyledTag key={index} isInputDisplay={isInputDisplay}>
<OverflowingTextWithTooltip text={item} />
</StyledTag>
))}
</StyledContainer>
);
};