Switched current Sort Button with same used for filters and options ones (#5764)

I changed the Sort button used in the Header using
StyledHeaderDropdownButton component (the same used for Filter and
Options') instead of LightButton.
This PR aims to fix the issue: #5743

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
RobertoSimonini1 2024-06-07 11:23:33 +02:00 committed by GitHub
parent c76bc4729d
commit e478c68734
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 6 deletions

1
.gitignore vendored
View File

@ -2,6 +2,7 @@
.DS_Store .DS_Store
/.idea /.idea
**/**/node_modules/ **/**/node_modules/
.cache
# yarn is the recommended package manager across the project # yarn is the recommended package manager across the project
**/**/.package-lock.json **/**/.package-lock.json

View File

@ -5,10 +5,11 @@ import { IconChevronDown, useIcons } from 'twenty-ui';
import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId'; import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown'; import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope'; import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
import { LightButton } from '@/ui/input/button/components/LightButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@ -54,7 +55,6 @@ export const ObjectSortDropdownButton = ({
setSelectedSortDirection, setSelectedSortDirection,
toggleSortDropdown, toggleSortDropdown,
resetState, resetState,
isSortSelected,
availableSortDefinitions, availableSortDefinitions,
handleAddSort, handleAddSort,
objectSortDropdownSearchInputState, objectSortDropdownSearchInputState,
@ -62,6 +62,8 @@ export const ObjectSortDropdownButton = ({
resetSearchInput, resetSearchInput,
} = useObjectSortDropdown(); } = useObjectSortDropdown();
const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
const handleButtonClick = () => { const handleButtonClick = () => {
toggleSortDropdown(); toggleSortDropdown();
}; };
@ -84,11 +86,12 @@ export const ObjectSortDropdownButton = ({
dropdownHotkeyScope={hotkeyScope} dropdownHotkeyScope={hotkeyScope}
dropdownOffset={{ y: 8 }} dropdownOffset={{ y: 8 }}
clickableComponent={ clickableComponent={
<LightButton <StyledHeaderDropdownButton
title="Sort" isUnfolded={isDropdownOpen}
active={isSortSelected}
onClick={handleButtonClick} onClick={handleButtonClick}
/> >
Sort
</StyledHeaderDropdownButton>
} }
dropdownComponents={ dropdownComponents={
<> <>