From 98475ee63e7814fe3a083c7538afb8e102f1560d Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 31 Mar 2025 10:24:52 +0200 Subject: [PATCH] Advanced filter UI fast follow-ups (#11272) This PR fixes the issue about the easy fast follow-up part on advanced filter. Fixes https://github.com/twentyhq/core-team-issues/issues/675 Changes : - Changed horizontal gap to spacing(1) for AdvancedFilterDropdownRow - Created a DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET for all sub-dropdowns in advanced filter dropdown with a y-offset of 2px. - Created a DropdownOffset type - Used a padding-left of spacing(2.25) in AdvancedFilterLogicalOperatorCell to allign the disabled text with the text in the Select component - Added IconTrash and accent danger on AdvancedFilterRecordFilterGroupOptionsDropdown and AdvancedFilterRecordFilterOptionsDropdown - Removed unnecessary CSS properties on AdvancedFilterRootRecordFilterGroup - Set dropdownMenuWith to 280 for AdvancedFilterValueInputDropdownButton - Fixed Dropdown generic clickable component container that was expanding - Set IconFilter instead of IconFilterCog in AdvancedFilterChip - Set AdvancedFilterDropdownButton dropdown content width to 650 instead of 800 - Refactored generic IconButton component so that it disambiguates secondary and tertiary variant for the color CSS props --- .../components/AdvancedFilterDropdownRow.tsx | 2 +- .../AdvancedFilterFieldSelectDropdownButton.tsx | 3 ++- .../AdvancedFilterLogicalOperatorCell.tsx | 2 ++ .../AdvancedFilterLogicalOperatorDropdown.tsx | 2 ++ ...vancedFilterRecordFilterGroupOptionsDropdown.tsx | 11 ++++++++--- .../AdvancedFilterRecordFilterOperandSelect.tsx | 5 +++-- .../AdvancedFilterRecordFilterOptionsDropdown.tsx | 12 +++++++++--- .../AdvancedFilterRootRecordFilterGroup.tsx | 4 ---- .../AdvancedFilterValueInputDropdownButton.tsx | 5 +++-- .../DefaultAdvancedFilterDropdownOffset.ts | 6 ++++++ .../src/modules/ui/input/components/Select.tsx | 4 ++++ .../ui/layout/dropdown/components/Dropdown.tsx | 13 +++++++++---- .../ui/layout/dropdown/types/DropdownOffset.ts | 4 ++++ .../modules/views/components/AdvancedFilterChip.tsx | 4 ++-- .../components/AdvancedFilterDropdownButton.tsx | 2 +- .../src/input/button/components/IconButton.tsx | 8 +++++--- 16 files changed, 61 insertions(+), 26 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset.ts create mode 100644 packages/twenty-front/src/modules/ui/layout/dropdown/types/DropdownOffset.ts diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx index 5bfc09163..5fb2b1e4e 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; const StyledRow = styled.div` display: flex; width: 100%; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${({ theme }) => theme.spacing(1)}; `; export const AdvancedFilterDropdownRow = StyledRow; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton.tsx index 647634ed9..bdb8fac66 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton.tsx @@ -1,4 +1,5 @@ import { AdvancedFilterFieldSelectDropdownContent } from '@/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownContent'; +import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset'; import { useAdvancedFilterFieldSelectDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterFieldSelectDropdown'; import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; @@ -49,7 +50,7 @@ export const AdvancedFilterFieldSelectDropdownButton = ({ /> } dropdownHotkeyScope={{ scope: advancedFilterFieldSelectDropdownId }} - dropdownOffset={{ y: 8, x: 0 }} + dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET} dropdownPlacement="bottom-start" /> diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx index 7e452d34f..8470671a3 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx @@ -8,6 +8,8 @@ const StyledText = styled.div` height: ${({ theme }) => theme.spacing(8)}; display: flex; align-items: center; + + padding-left: ${({ theme }) => theme.spacing(2.25)}; `; const StyledContainer = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx index e566b4446..54112cc12 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx @@ -1,4 +1,5 @@ import { ADVANCED_FILTER_LOGICAL_OPERATOR_OPTIONS } from '@/object-record/advanced-filter/constants/AdvancedFilterLogicalOperatorOptions'; +import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset'; import { useUpsertRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup'; import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup'; import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator'; @@ -30,6 +31,7 @@ export const AdvancedFilterLogicalOperatorDropdown = ({ value={recordFilterGroup.logicalOperator} onChange={handleChange} options={ADVANCED_FILTER_LOGICAL_OPERATOR_OPTIONS} + dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET} /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx index 36b15a8c7..530b8bcef 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx @@ -6,7 +6,7 @@ import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRe import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { IconButton, IconDotsVertical, MenuItem } from 'twenty-ui'; +import { IconButton, IconDotsVertical, IconTrash, MenuItem } from 'twenty-ui'; type AdvancedFilterRecordFilterGroupOptionsDropdownProps = { recordFilterGroupId: string; @@ -52,11 +52,16 @@ export const AdvancedFilterRecordFilterGroupOptionsDropdown = ({ } dropdownComponents={ - + } dropdownHotkeyScope={{ scope: dropdownId }} - dropdownOffset={{ y: 8, x: 0 }} + dropdownOffset={{ y: 2, x: 0 }} dropdownPlacement="bottom-start" /> ); diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx index 17a7074ca..1cba49729 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx @@ -1,5 +1,6 @@ import { useGetFieldMetadataItemById } from '@/object-metadata/hooks/useGetFieldMetadataItemById'; import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions'; +import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset'; import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue'; import { getOperandLabel } from '@/object-record/object-filter-dropdown/utils/getOperandLabel'; @@ -17,7 +18,7 @@ import { isDefined } from 'twenty-shared/utils'; import { MenuItem } from 'twenty-ui'; const StyledContainer = styled.div` - flex: 1; + width: 100px; `; type AdvancedFilterRecordFilterOperandSelectProps = { @@ -126,7 +127,7 @@ export const AdvancedFilterRecordFilterOperandSelect = ({ } dropdownHotkeyScope={{ scope: dropdownId }} - dropdownOffset={{ y: 8, x: 0 }} + dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET} dropdownPlacement="bottom-start" /> diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx index 3de5c3bba..e20932d47 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx @@ -5,12 +5,13 @@ import { useRemoveRootRecordFilterGroupIfEmpty } from '@/object-record/record-fi import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter'; import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; +import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { IconButton, IconDotsVertical, MenuItem } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { IconButton, IconDotsVertical, IconTrash, MenuItem } from 'twenty-ui'; type AdvancedFilterRecordFilterOptionsDropdownProps = { recordFilterId: string; @@ -71,11 +72,16 @@ export const AdvancedFilterRecordFilterOptionsDropdown = ({ } dropdownComponents={ - + } dropdownHotkeyScope={{ scope: dropdownId }} - dropdownOffset={{ y: 8, x: 0 }} + dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET} dropdownPlacement="bottom-start" /> ); diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx index b04eef915..7918834ab 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx @@ -11,10 +11,6 @@ import { isDefined } from 'twenty-shared/utils'; const StyledContainer = styled.div<{ isGrayBackground?: boolean }>` align-items: start; - background-color: ${({ theme, isGrayBackground }) => - isGrayBackground ? theme.background.transparent.lighter : 'transparent'}; - border: ${({ theme }) => `1px solid ${theme.border.color.medium}`}; - border-radius: ${({ theme }) => theme.border.radius.md}; display: flex; flex: 1; flex-direction: column; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButton.tsx index 2d21233fb..bdce7d9e3 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButton.tsx @@ -1,3 +1,4 @@ +import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset'; import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput'; import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState'; import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; @@ -81,9 +82,9 @@ export const AdvancedFilterValueInputDropdownButton = ({ } dropdownHotkeyScope={{ scope: dropdownId }} - dropdownOffset={{ y: 8, x: 0 }} + dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET} dropdownPlacement="bottom-start" - dropdownMenuWidth={200} + dropdownMenuWidth={280} /> )} diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset.ts b/packages/twenty-front/src/modules/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset.ts new file mode 100644 index 000000000..55f30ec9f --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset.ts @@ -0,0 +1,6 @@ +import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset'; + +export const DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET: DropdownOffset = { + y: 2, + x: 0, +}; diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx index 1ba6270f4..b06bdfc8e 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx @@ -14,6 +14,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { SelectControl } from '@/ui/input/components/SelectControl'; +import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset'; import { isDefined } from 'twenty-shared/utils'; import { SelectHotkeyScope } from '../types/SelectHotkeyScope'; @@ -44,6 +45,7 @@ export type SelectProps = { withSearchInput?: boolean; needIconCheck?: boolean; callToActionButton?: CallToActionButton; + dropdownOffset?: DropdownOffset; }; const StyledContainer = styled.div<{ fullWidth?: boolean }>` @@ -75,6 +77,7 @@ export const Select = ({ withSearchInput, needIconCheck, callToActionButton, + dropdownOffset, }: SelectProps) => { const selectContainerRef = useRef(null); @@ -127,6 +130,7 @@ export const Select = ({ dropdownId={dropdownId} dropdownMenuWidth={dropDownMenuWidth} dropdownPlacement="bottom-start" + dropdownOffset={dropdownOffset} clickableComponent={ void; onClose?: () => void; @@ -125,7 +130,7 @@ export const Dropdown = ({ <> {isDefined(clickableComponent) ? ( -
{clickableComponent} -
+ ) : ( )} diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/types/DropdownOffset.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/types/DropdownOffset.ts new file mode 100644 index 000000000..9a604c4a2 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/types/DropdownOffset.ts @@ -0,0 +1,4 @@ +export type DropdownOffset = { + x?: number; + y?: number; +}; diff --git a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx b/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx index 886c17276..6d27c0aff 100644 --- a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx +++ b/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx @@ -1,4 +1,4 @@ -import { IconFilterCog } from 'twenty-ui'; +import { IconFilter } from 'twenty-ui'; import { useRemoveRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup'; import { useRemoveRootRecordFilterGroupIfEmpty } from '@/object-record/record-filter-group/hooks/useRemoveRootRecordFilterGroupIfEmpty'; @@ -61,7 +61,7 @@ export const AdvancedFilterChip = () => { testId={ADVANCED_FILTER_DROPDOWN_ID} labelKey={chipLabel} labelValue="" - Icon={IconFilterCog} + Icon={IconFilter} onRemove={handleRemoveClick} /> ); diff --git a/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx index e823c327c..983f1d017 100644 --- a/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx +++ b/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx @@ -24,7 +24,7 @@ export const AdvancedFilterDropdownButton = () => { dropdownHotkeyScope={{ scope: ADVANCED_FILTER_DROPDOWN_ID }} dropdownOffset={{ y: 8, x: 0 }} dropdownPlacement="bottom-start" - dropdownMenuWidth={800} + dropdownMenuWidth={650} /> ); }; diff --git a/packages/twenty-ui/src/input/button/components/IconButton.tsx b/packages/twenty-ui/src/input/button/components/IconButton.tsx index 1501bc410..6f4425d54 100644 --- a/packages/twenty-ui/src/input/button/components/IconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/IconButton.tsx @@ -125,9 +125,11 @@ const StyledButton = styled.button< box-shadow: ${!disabled && focus ? `0 0 0 3px ${theme.accent.tertiary}` : 'none'}; - color: ${!disabled - ? theme.font.color.secondary - : theme.font.color.extraLight}; + color: ${disabled + ? theme.font.color.extraLight + : variant === 'secondary' + ? theme.font.color.secondary + : theme.font.color.tertiary}; &:hover { background: ${!disabled ? theme.background.transparent.light