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:
@ -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}
|
||||
|
||||
Reference in New Issue
Block a user