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
This commit is contained in:
Lucas Bordeau
2025-03-31 10:24:52 +02:00
committed by GitHub
parent eea30828a4
commit 98475ee63e
16 changed files with 61 additions and 26 deletions

View File

@ -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<Value extends SelectValue> = {
withSearchInput?: boolean;
needIconCheck?: boolean;
callToActionButton?: CallToActionButton;
dropdownOffset?: DropdownOffset;
};
const StyledContainer = styled.div<{ fullWidth?: boolean }>`
@ -75,6 +77,7 @@ export const Select = <Value extends SelectValue>({
withSearchInput,
needIconCheck,
callToActionButton,
dropdownOffset,
}: SelectProps<Value>) => {
const selectContainerRef = useRef<HTMLDivElement>(null);
@ -127,6 +130,7 @@ export const Select = <Value extends SelectValue>({
dropdownId={dropdownId}
dropdownMenuWidth={dropDownMenuWidth}
dropdownPlacement="bottom-start"
dropdownOffset={dropdownOffset}
clickableComponent={
<SelectControl
selectedOption={selectedOption}