Merge pull request #213 from reaviz/Extend-sizes-and-variants-prop-types

Extend size and variant prop types
reaviz · May 24, 2024 · 4b71ad8 · 4b71ad8
2 parents 404e894 + 9f07966
commit 4b71ad8
Show file tree

Hide file tree

Showing 22 changed files with 38 additions and 14 deletions.
diff --git 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
@@ -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
@@ -20,12 +20,12 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
  * 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,7 +15,14 @@ export interface VerticalSpacerProps extends HTMLAttributes<HTMLDivElement> {
  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
@@ -7,6 +7,7 @@ export interface VerticalSpacerTheme {
  lg: string;
  xl: string;
  xxl: string;
+ [key: string]: string;
  };
 }