diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterContainer.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterContainer.tsx
index 93d70a261..31db0c718 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterContainer.tsx
@@ -35,6 +35,7 @@ export const ConfigVariableFilterContainer = ({
onRemove={chip.onRemove}
labelValue={chip.source ?? ''}
variant={chip.variant}
+ type="filter"
/>
))}
diff --git a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx b/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
index 8dd1557a7..83aaded8d 100644
--- a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
@@ -113,6 +113,7 @@ export const AdvancedFilterChip = () => {
Icon={IconFilter}
onRemove={handleRemoveClick}
variant={hasAnyDeletedAtFilterInAdvancedFilters ? 'danger' : 'default'}
+ type="filter"
/>
);
};
diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
index f7a12a38c..68670cded 100644
--- a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
@@ -50,8 +50,8 @@ export const EditableFilterChip = ({
const recordFilterIsEmpty = isRecordFilterConsideredEmpty(recordFilter);
- const labelKey = `${fieldNameLabel}${!operandIsEmptiness && !recordFilterIsEmpty ? operandLabelShort : operandIsEmptiness ? ` ${operandLabelShort}` : ''}`;
- const labelValue = operandIsEmptiness ? '' : recordFilter.displayValue;
+ const labelKey = `${fieldNameLabel}`;
+ const labelValue = `${!operandIsEmptiness && !recordFilterIsEmpty ? operandLabelShort : operandIsEmptiness ? ` ${operandLabelShort}` : ''} ${operandIsEmptiness ? '' : recordFilter.displayValue}`;
return (
);
};
diff --git a/packages/twenty-front/src/modules/views/components/EditableSortChip.tsx b/packages/twenty-front/src/modules/views/components/EditableSortChip.tsx
index d8e6e6212..ea4f02571 100644
--- a/packages/twenty-front/src/modules/views/components/EditableSortChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableSortChip.tsx
@@ -39,6 +39,7 @@ export const EditableSortChip = ({ recordSort }: EditableSortChipProps) => {
Icon={recordSort.direction === 'desc' ? IconArrowDown : IconArrowUp}
onRemove={handleRemoveClick}
onClick={handleClick}
+ type="sort"
/>
);
};
diff --git a/packages/twenty-front/src/modules/views/components/SoftDeleteFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SoftDeleteFilterChip.tsx
index e82400beb..52bf1d729 100644
--- a/packages/twenty-front/src/modules/views/components/SoftDeleteFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/SoftDeleteFilterChip.tsx
@@ -38,6 +38,7 @@ export const SoftDeleteFilterChip = ({
labelValue={recordFilter.label ?? ''}
Icon={ChipIcon}
onRemove={handleRemoveClick}
+ type="filter"
/>
);
};
diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
index 10ee989d8..6e38cdac5 100644
--- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
@@ -33,7 +33,7 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>`
return theme.color.blue;
}
}};
- height: 26px;
+ height: 24px;
box-sizing: border-box;
cursor: pointer;
display: flex;
@@ -87,8 +87,18 @@ const StyledLabelKey = styled.div`
font-weight: ${({ theme }) => theme.font.weight.medium};
`;
+const StyledFilterValue = styled.span`
+ font-weight: ${({ theme }) => theme.font.weight.regular};
+`;
+
+const StyledSortValue = styled.span`
+ font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
export type SortOrFilterChipVariant = 'default' | 'danger';
+export type SortOrFilterChipType = 'sort' | 'filter';
+
type SortOrFilterChipProps = {
labelKey?: string;
labelValue: string;
@@ -97,6 +107,7 @@ type SortOrFilterChipProps = {
onRemove: () => void;
onClick?: () => void;
testId?: string;
+ type: SortOrFilterChipType;
};
export const SortOrFilterChip = ({
@@ -107,6 +118,7 @@ export const SortOrFilterChip = ({
onRemove,
testId,
onClick,
+ type,
}: SortOrFilterChipProps) => {
const theme = useTheme();
@@ -123,7 +135,11 @@ export const SortOrFilterChip = ({
)}
{labelKey && {labelKey}}
- {labelValue}
+ {type === 'sort' ? (
+ {labelValue}
+ ) : (
+ {labelValue}
+ )}