feat: extend button html attributes

Author: eshankvaish

src/Shared/Components/Button/Button.component.tsx

@@ -7,7 +7,6 @@ import { getButtonDerivedClass } from './utils'
 import './button.scss'
 
 const Button = ({
-    buttonProps = {},
     variant = ButtonVariantType.primary,
     size = ComponentSizeType.large,
     style = ButtonStyleType.default,
@@ -18,6 +17,8 @@ const Button = ({
     isLoading,
     showTippy,
     tippyContent,
+    type = 'button',
+    ...props
 }: ButtonProps) => {
     const isDisabled = disabled || isLoading
     const iconClass = `dc__no-shrink flex dc__fill-available-space ${BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]}`
@@ -26,11 +27,11 @@ const Button = ({
         <Tooltip content={tippyContent} alwaysShowTippyOnHover={showTippy && !!tippyContent}>
             <div>
                 <button
-                    {...buttonProps}
+                    {...props}
                     disabled={isDisabled}
                     // eslint-disable-next-line react/button-has-type
-                    type={buttonProps.type || 'button'}
-                    className={`br-4 flex cursor dc__mnw-100 dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading })} ${isDisabled ? 'dc__disabled' : ''} ${buttonProps.className || ''}`}
+                    type={type}
+                    className={`br-4 flex cursor dc__mnw-100 dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading })} ${isDisabled ? 'dc__disabled' : ''}`}
                 >
                     {startIcon && <span className={iconClass}>{startIcon}</span>}
                     <span className="dc__mxw-150 dc__align-left dc__truncate">{text}</span>

src/Shared/Components/Button/types.ts

@@ -17,23 +17,21 @@ export enum ButtonStyleType {
     neutral = 'neutral',
 }
 
-export type ButtonProps = {
-    buttonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'styles' | 'className'> & {
     variant?: ButtonVariantType
     size?: ComponentSizeType
     style?: ButtonStyleType
     text: string
     startIcon?: ReactElement
     endIcon?: ReactElement
-    disabled?: boolean
     isLoading?: boolean
 } & (
-    | {
-          showTippy: boolean
-          tippyContent: TooltipProps['content']
-      }
-    | {
-          showTippy?: never
-          tippyContent?: never
-      }
-)
+        | {
+              showTippy: boolean
+              tippyContent: TooltipProps['content']
+          }
+        | {
+              showTippy?: never
+              tippyContent?: never
+          }
+    )

src/Shared/Components/ButtonWithLoader/ButtonWithLoader.tsx

@@ -29,6 +29,9 @@ export interface ButtonWithLoaderProps {
     type?: 'submit' | 'reset' | 'button'
 }
 
+/**
+ * @deprecated use Button instead
+ */
 export class ButtonWithLoader extends Component<ButtonWithLoaderProps> {
     constructor(props) {
         super(props)