Settings Option Card component (#8456)

fixes - #8195

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2024-11-18 14:52:33 +05:30
committed by GitHub
parent ade1c57ff4
commit 2f5dc26545
56 changed files with 931 additions and 920 deletions

View File

@ -12,21 +12,24 @@ import { SelectControl } from '@/ui/input/components/SelectControl';
import { isDefined } from '~/utils/isDefined';
import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
export type SelectOption<Value extends string | number | null> = {
export type SelectOption<Value extends string | number | boolean | null> = {
value: Value;
label: string;
Icon?: IconComponent;
};
export type SelectSizeVariant = 'small' | 'default';
type CallToActionButton = {
text: string;
onClick: (event: MouseEvent<HTMLDivElement>) => void;
Icon?: IconComponent;
};
export type SelectProps<Value extends string | number | null> = {
export type SelectProps<Value extends string | number | boolean | null> = {
className?: string;
disabled?: boolean;
selectSizeVariant?: SelectSizeVariant;
disableBlur?: boolean;
dropdownId: string;
dropdownWidth?: `${string}px` | 'auto' | number;
@ -54,9 +57,10 @@ const StyledLabel = styled.span`
margin-bottom: ${({ theme }) => theme.spacing(1)};
`;
export const Select = <Value extends string | number | null>({
export const Select = <Value extends string | number | boolean | null>({
className,
disabled: disabledFromProps,
selectSizeVariant,
disableBlur = false,
dropdownId,
dropdownWidth = 176,
@ -115,6 +119,7 @@ export const Select = <Value extends string | number | null>({
<SelectControl
selectedOption={selectedOption}
isDisabled={isDisabled}
selectSizeVariant={selectSizeVariant}
/>
) : (
<Dropdown
@ -125,6 +130,7 @@ export const Select = <Value extends string | number | null>({
<SelectControl
selectedOption={selectedOption}
isDisabled={isDisabled}
selectSizeVariant={selectSizeVariant}
/>
}
disableBlur={disableBlur}
@ -144,7 +150,7 @@ export const Select = <Value extends string | number | null>({
<DropdownMenuItemsContainer hasMaxHeight>
{filteredOptions.map((option) => (
<MenuItem
key={option.value}
key={`${option.value}-${option.label}`}
LeftIcon={option.Icon}
text={option.label}
onClick={() => {