From 9f07966e368d38ed5f62c013931d5d5ee360936a Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Thu, 23 May 2024 15:57:40 -0400 Subject: [PATCH] Extend size and variant prop types --- src/elements/Button/Button.tsx | 4 ++-- src/elements/Button/ButtonTheme.ts | 2 ++ src/elements/Chip/Chip.tsx | 4 ++-- src/elements/Chip/ChipTheme.ts | 3 +++ src/elements/Loader/DotsLoader.tsx | 2 +- src/elements/Loader/DotsLoaderTheme.ts | 1 + src/form/Checkbox/Checkbox.tsx | 2 +- src/form/Checkbox/CheckboxTheme.ts | 2 ++ src/form/Input/Input.tsx | 2 +- src/form/Input/InputTheme.ts | 1 + src/form/Radio/Radio.tsx | 2 +- src/form/Radio/RadioTheme.ts | 2 ++ src/form/Textarea/Textarea.tsx | 2 +- src/form/Textarea/TextareaTheme.ts | 1 + src/form/Toggle/Toggle.tsx | 2 +- src/form/Toggle/ToggleTheme.ts | 2 ++ src/layout/Tabs/Tab.tsx | 2 +- src/layout/Tabs/TabList.tsx | 2 +- src/layout/Tabs/Tabs.tsx | 2 +- src/layout/Tabs/TabsTheme.ts | 2 ++ src/layout/VerticalSpacer/VerticalSpacer.tsx | 9 ++++++++- src/layout/VerticalSpacer/VerticalSpacerTheme.ts | 1 + 22 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/elements/Button/Button.tsx b/src/elements/Button/Button.tsx index 5ab0d4f5..b34e9e9c 100644 --- a/src/elements/Button/Button.tsx +++ b/src/elements/Button/Button.tsx @@ -25,12 +25,12 @@ export interface ButtonProps /** * Style variant of the button. */ - variant?: 'filled' | 'outline' | 'text'; + variant?: 'filled' | 'outline' | 'text' | string; /** * The size variation of the button. */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * If true, the button will take up the full width of its container. diff --git a/src/elements/Button/ButtonTheme.ts b/src/elements/Button/ButtonTheme.ts index e063c727..aeac42c4 100644 --- a/src/elements/Button/ButtonTheme.ts +++ b/src/elements/Button/ButtonTheme.ts @@ -12,12 +12,14 @@ export interface ButtonTheme { small: string; medium: string; large: string; + [key: string]: string; }; }; variants: { filled: string; outline: string; text: string; + [key: string]: string; }; colors: { default: { diff --git a/src/elements/Chip/Chip.tsx b/src/elements/Chip/Chip.tsx index 49157da8..65537331 100644 --- a/src/elements/Chip/Chip.tsx +++ b/src/elements/Chip/Chip.tsx @@ -20,12 +20,12 @@ export interface ChipProps extends React.HTMLAttributes { /** * Size variant for the chip. */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * Style variant for the chip. */ - variant?: 'filled' | 'outline'; + variant?: 'filled' | 'outline' | string; /** * Whether the chip is selected. diff --git a/src/elements/Chip/ChipTheme.ts b/src/elements/Chip/ChipTheme.ts index 9ff1f572..13f75e58 100644 --- a/src/elements/Chip/ChipTheme.ts +++ b/src/elements/Chip/ChipTheme.ts @@ -29,6 +29,7 @@ export interface ChipTheme { small: string; medium: string; large: string; + [key: string]: string; }; }; variants: { @@ -49,6 +50,7 @@ export interface ChipTheme { small: string; medium: string; large: string; + [key: string]: string; }; focus: string; deleteButton: { @@ -57,6 +59,7 @@ export interface ChipTheme { small: string; medium: string; large: string; + [key: string]: string; }; }; disabled: string; diff --git a/src/elements/Loader/DotsLoader.tsx b/src/elements/Loader/DotsLoader.tsx index 5a01cd7b..c9ca6b40 100644 --- a/src/elements/Loader/DotsLoader.tsx +++ b/src/elements/Loader/DotsLoader.tsx @@ -18,7 +18,7 @@ export interface DotsLoaderProps { /** * The size of the loader. */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * Theme for the DotsLoader. diff --git a/src/elements/Loader/DotsLoaderTheme.ts b/src/elements/Loader/DotsLoaderTheme.ts index 4a98b68f..cc0261c3 100644 --- a/src/elements/Loader/DotsLoaderTheme.ts +++ b/src/elements/Loader/DotsLoaderTheme.ts @@ -5,6 +5,7 @@ export interface DotsLoaderTheme { small: string; medium: string; large: string; + [key: string]: string; }; } diff --git a/src/form/Checkbox/Checkbox.tsx b/src/form/Checkbox/Checkbox.tsx index 3c470221..89d48716 100644 --- a/src/form/Checkbox/Checkbox.tsx +++ b/src/form/Checkbox/Checkbox.tsx @@ -28,7 +28,7 @@ export interface CheckboxProps { /** * Size of the checkbox. */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * Additional class names to apply to the checkbox. diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts index 2e9ca70f..300795da 100644 --- a/src/form/Checkbox/CheckboxTheme.ts +++ b/src/form/Checkbox/CheckboxTheme.ts @@ -9,6 +9,7 @@ export interface CheckboxTheme { small: string; medium: string; large: string; + [key: string]: string; }; }; border: string; @@ -19,6 +20,7 @@ export interface CheckboxTheme { small: string; medium: string; large: string; + [key: string]: string; }; boxVariants: { hover: { diff --git a/src/form/Input/Input.tsx b/src/form/Input/Input.tsx index 830fce19..b16c5675 100644 --- a/src/form/Input/Input.tsx +++ b/src/form/Input/Input.tsx @@ -36,7 +36,7 @@ export interface InputProps /** * Size of the input. */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * Content to display before the input. diff --git a/src/form/Input/InputTheme.ts b/src/form/Input/InputTheme.ts index c3c6880c..9c09eb73 100644 --- a/src/form/Input/InputTheme.ts +++ b/src/form/Input/InputTheme.ts @@ -10,6 +10,7 @@ export interface InputTheme { small: string; medium: string; large: string; + [key: string]: string; }; adornment: { base: string; diff --git a/src/form/Radio/Radio.tsx b/src/form/Radio/Radio.tsx index 9e6b7103..d8566f1d 100644 --- a/src/form/Radio/Radio.tsx +++ b/src/form/Radio/Radio.tsx @@ -37,7 +37,7 @@ export interface RadioProps { /** * Size of the radio. */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * Event handler for when the radio is changed. diff --git a/src/form/Radio/RadioTheme.ts b/src/form/Radio/RadioTheme.ts index 13800020..ee670f88 100644 --- a/src/form/Radio/RadioTheme.ts +++ b/src/form/Radio/RadioTheme.ts @@ -12,6 +12,7 @@ export interface RadioTheme { small: string; medium: string; large: string; + [key: string]: string; }; }; label: { @@ -24,6 +25,7 @@ export interface RadioTheme { small: string; medium: string; large: string; + [key: string]: string; }; } diff --git a/src/form/Textarea/Textarea.tsx b/src/form/Textarea/Textarea.tsx index 3d9ea138..a3e4c8a8 100644 --- a/src/form/Textarea/Textarea.tsx +++ b/src/form/Textarea/Textarea.tsx @@ -31,7 +31,7 @@ export interface TextareaProps extends TextareaAutosizeProps { /** * Size of the field. */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * Theme for the Textarea. diff --git a/src/form/Textarea/TextareaTheme.ts b/src/form/Textarea/TextareaTheme.ts index 5db93fba..18ba5874 100644 --- a/src/form/Textarea/TextareaTheme.ts +++ b/src/form/Textarea/TextareaTheme.ts @@ -10,6 +10,7 @@ export interface TextareaTheme { small: string; medium: string; large: string; + [key: string]: string; }; } diff --git a/src/form/Toggle/Toggle.tsx b/src/form/Toggle/Toggle.tsx index 27f3d64c..e5d51154 100644 --- a/src/form/Toggle/Toggle.tsx +++ b/src/form/Toggle/Toggle.tsx @@ -22,7 +22,7 @@ export interface ToggleProps { /** * The size of the toggle. */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * When the toggle is changed. diff --git a/src/form/Toggle/ToggleTheme.ts b/src/form/Toggle/ToggleTheme.ts index bc040766..0cde12f3 100644 --- a/src/form/Toggle/ToggleTheme.ts +++ b/src/form/Toggle/ToggleTheme.ts @@ -9,6 +9,7 @@ export interface ToggleTheme { small: string; medium: string; large: string; + [key: string]: string; }; disabled: string; disabledAndChecked: string; @@ -17,6 +18,7 @@ export interface ToggleTheme { small: string; medium: string; large: string; + [key: string]: string; }; } diff --git a/src/layout/Tabs/Tab.tsx b/src/layout/Tabs/Tab.tsx index 26d43b0f..cc351fcc 100644 --- a/src/layout/Tabs/Tab.tsx +++ b/src/layout/Tabs/Tab.tsx @@ -47,7 +47,7 @@ export interface TabProps extends PropsWithChildren { * * @private */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * Theme for the Tabs. diff --git a/src/layout/Tabs/TabList.tsx b/src/layout/Tabs/TabList.tsx index d131c608..5b1fd458 100644 --- a/src/layout/Tabs/TabList.tsx +++ b/src/layout/Tabs/TabList.tsx @@ -45,7 +45,7 @@ export interface TabListProps extends PropsWithChildren { * The size of the tabs. * @private */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * Theme for the Tabs. diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx index b59e3916..adbe5f2c 100644 --- a/src/layout/Tabs/Tabs.tsx +++ b/src/layout/Tabs/Tabs.tsx @@ -49,7 +49,7 @@ export interface TabsProps extends PropsWithChildren { /** * The size of the tabs. */ - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium' | 'large' | string; /** * The callback to be called when a tab is selected. diff --git a/src/layout/Tabs/TabsTheme.ts b/src/layout/Tabs/TabsTheme.ts index 6daf90b3..0a0ad500 100644 --- a/src/layout/Tabs/TabsTheme.ts +++ b/src/layout/Tabs/TabsTheme.ts @@ -8,6 +8,7 @@ export interface TabsTheme { small: string; medium: string; large: string; + [key: string]: string; }; }; divider: string; @@ -28,6 +29,7 @@ export interface TabsTheme { small: string; medium: string; large: string; + [key: string]: string; }; }; }; diff --git a/src/layout/VerticalSpacer/VerticalSpacer.tsx b/src/layout/VerticalSpacer/VerticalSpacer.tsx index 0e5b099f..4c99d175 100644 --- a/src/layout/VerticalSpacer/VerticalSpacer.tsx +++ b/src/layout/VerticalSpacer/VerticalSpacer.tsx @@ -15,7 +15,14 @@ export interface VerticalSpacerProps extends HTMLAttributes { theme?: VerticalSpacerTheme; } -export type VerticalSpaceType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; +export type VerticalSpaceType = + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxl' + | string; export interface VerticalSpacerRef { /** diff --git a/src/layout/VerticalSpacer/VerticalSpacerTheme.ts b/src/layout/VerticalSpacer/VerticalSpacerTheme.ts index a40a3bb9..38308747 100644 --- a/src/layout/VerticalSpacer/VerticalSpacerTheme.ts +++ b/src/layout/VerticalSpacer/VerticalSpacerTheme.ts @@ -7,6 +7,7 @@ export interface VerticalSpacerTheme { lg: string; xl: string; xxl: string; + [key: string]: string; }; }