Merge pull request #76 from thisyahlen-deriv/thisyahlen/button_props

thisyahlen/chore: expose all props to button
deriv-com · Feb 15, 2024 · 1948b58 · 1948b58
2 parents f0cf1b1 + d8f45d1
commit 1948b58
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 17 deletions.
diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
@@ -8,37 +8,28 @@ import './Button.scss';
 type TVariant = 'contained' | 'ghost' | 'outlined';
 type TColor = 'black' | 'primary-light' | 'primary' | 'white';
 
-interface ButtonProps {
-    ariaLabel?: ComponentProps<'button'>['aria-label'];
+interface ButtonProps extends ComponentProps<'button'> {
     color?: TColor;
-    disabled?: ComponentProps<'button'>['disabled'];
     icon?: ReactElement;
     isFullWidth?: boolean;
     isLoading?: boolean;
-    onClick?: ComponentProps<'button'>['onClick'];
     rounded?: Extract<TGenericSizes, 'md' | 'sm'>;
     size?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
     textSize?: ComponentProps<typeof Text>['size'];
-    type?: ComponentProps<'button'>['type'];
     variant?: TVariant;
-    className?: string;
 }
 
 export const Button = ({
-    ariaLabel,
     children,
     color = 'primary',
-    disabled = false,
     icon,
     isFullWidth = false,
     isLoading = false,
-    onClick,
     rounded = 'sm',
     size = 'md',
     textSize,
-    type,
     variant = 'contained',
-    className
+    ...props
 }: PropsWithChildren<ButtonProps>) => {
     const isContained = variant === 'contained';
 
@@ -49,7 +40,7 @@ export const Button = ({
         `derivs-button__rounded--${rounded}`,
         isContained && `derivs-button__color--${color}`,
         isFullWidth && 'derivs-button__full-width',
-        className
+        props.className
     );
 
     type TButtonFontColor = {
@@ -94,11 +85,9 @@ export const Button = ({
 
     return (
         <button
-            aria-label={ariaLabel}
             className={buttonClassNames}
-            disabled={disabled || isLoading}
-            onClick={onClick}
-            type={type}
+            disabled={props.disabled || isLoading}
+            {...props}
         >
             {isLoading && (
                 <div className='derivs-button__loader'>

diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
@@ -31,7 +31,7 @@ const meta = {
       options: ['contained', 'outlined', 'ghost'],
       control: { type: 'radio' },
     },
-    ariaLabel: {
+    'aria-label': {
       table: {
         disable: true,
       }