mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Adding className as a prop (#2847)

Browse Source 
* Adding className as a prop to use emotion

* Adding className to feedback and input components
This commit is contained in:
Matheus Sanchez
2023-12-07 14:48:37 -03:00
committed by GitHub
parent d70f8deeec
commit 590912b30f
21 changed files with 125 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,7 @@ type IconPickerProps = {
onClose?: () => void;
onOpen?: () => void;
variant?: IconButtonVariant;
className?: string;
};
const StyledMenuIconItemsContainer = styled.div`
@ -52,6 +53,7 @@ export const IconPicker = ({
onClose,
onOpen,
variant = 'secondary',
className,
}: IconPickerProps) => {
const [searchString, setSearchString] = useState('');
@ -79,55 +81,57 @@ export const IconPicker = ({
return (
<DropdownScope dropdownScopeId={dropdownScopeId}>
<Dropdown
dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
clickableComponent={
<IconButton
disabled={disabled}
Icon={selectedIconKey ? icons[selectedIconKey] : IconApps}
variant={variant}
/>
}
dropdownMenuWidth={176}
dropdownComponents={
<DropdownMenu width={176}>
<DropdownMenuSearchInput
placeholder="Search icon"
autoFocus
onChange={(event) => setSearchString(event.target.value)}
<div className={className}>
<Dropdown
dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
clickableComponent={
<IconButton
disabled={disabled}
Icon={selectedIconKey ? icons[selectedIconKey] : IconApps}
variant={variant}
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer>
{isLoading ? (
<DropdownMenuSkeletonItem />
) : (
<StyledMenuIconItemsContainer>
{iconKeys.map((iconKey) => (
<StyledLightIconButton
key={iconKey}
aria-label={convertIconKeyToLabel(iconKey)}
isSelected={selectedIconKey === iconKey}
size="medium"
title={iconKey}
Icon={icons[iconKey]}
onClick={() => {
onChange({ iconKey, Icon: icons[iconKey] });
closeDropdown();
}}
/>
))}
</StyledMenuIconItemsContainer>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
onClickOutside={onClickOutside}
onClose={() => {
onClose?.();
setSearchString('');
}}
onOpen={onOpen}
/>
}
dropdownMenuWidth={176}
dropdownComponents={
<DropdownMenu width={176}>
<DropdownMenuSearchInput
placeholder="Search icon"
autoFocus
onChange={(event) => setSearchString(event.target.value)}
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer>
{isLoading ? (
<DropdownMenuSkeletonItem />
) : (
<StyledMenuIconItemsContainer>
{iconKeys.map((iconKey) => (
<StyledLightIconButton
key={iconKey}
aria-label={convertIconKeyToLabel(iconKey)}
isSelected={selectedIconKey === iconKey}
size="medium"
title={iconKey}
Icon={icons[iconKey]}
onClick={() => {
onChange({ iconKey, Icon: icons[iconKey] });
closeDropdown();
}}
/>
))}
</StyledMenuIconItemsContainer>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
onClickOutside={onClickOutside}
onClose={() => {
onClose?.();
setSearchString('');
}}
onOpen={onOpen}
/>
</div>
</DropdownScope>
);
};