admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor icon picker to use shared styled dropdown menu (#1998)

Browse Source
This commit is contained in:
Charles Bochet
2023-10-13 18:06:47 +02:00
committed by GitHub
parent cafcfdc95e
commit 3ef9132525
1 changed files with 3 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -6,6 +6,7 @@ import { LightIconButton } from '@/ui/button/components/LightIconButton';
import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu'; import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput';
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator'; import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { useDropdown } from '@/ui/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/dropdown/scopes/DropdownScope'; import { DropdownScope } from '@/ui/dropdown/scopes/DropdownScope';
@ -23,10 +24,6 @@ type IconPickerProps = {
onOpen?: () => void; onOpen?: () => void;
}; };
const StyledContainer = styled.div`
width: 176px;
`;
const StyledMenuIconItemsContainer = styled.div` const StyledMenuIconItemsContainer = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -89,7 +86,7 @@ export const IconPicker = ({
/> />
} }
dropdownComponents={ dropdownComponents={
<StyledContainer> <StyledDropdownMenu width={168}>
<DropdownMenuSearchInput <DropdownMenuSearchInput
placeholder="Search icon" placeholder="Search icon"
autoFocus autoFocus
@ -116,7 +113,7 @@ export const IconPicker = ({
</StyledMenuIconItemsContainer> </StyledMenuIconItemsContainer>
)} )}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
</StyledContainer> </StyledDropdownMenu>
} }
onClickOutside={onClickOutside} onClickOutside={onClickOutside}
onClose={() => { onClose={() => {