Buttons accept HTMLButton props (#4221)

* Buttons accept HTMLButton props - make Button and some other components accept HTMLButton props - rename Button.props.type to styling so we don't conflict with <button type=""> * Styling reference fix
deltachat · Oct 22, 2024 · 48e755d · 48e755d
1 parent 7bc7a5f
commit 48e755d
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 55 deletions.
diff --git a/packages/frontend/src/components/Avatar/index.tsx b/packages/frontend/src/components/Avatar/index.tsx
@@ -5,7 +5,6 @@ import useDialog from '../../hooks/dialog/useDialog'
 import FullscreenAvatar from '../dialogs/FullscreenAvatar'
 
 import type { Type } from '../../backend-com'
-import type { PropsWithChildren } from 'react'
 import { get_first_emoji } from '@deltachat/message_parser_wasm'
 import { runtime } from '@deltachat-desktop/runtime-interface'
 
@@ -100,9 +99,9 @@ export function AvatarFromContact(
 }
 
 export function ClickForFullscreenAvatarWrapper(
-  props: PropsWithChildren<{
+  props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     filename?: string
-  }>
+  }
 ) {
   const { openDialog } = useDialog()
 
@@ -116,6 +115,7 @@ export function ClickForFullscreenAvatarWrapper(
           imagePath: filename!,
         })
       }}
+      {...props}
     >
       {children}
     </button>

diff --git a/packages/frontend/src/components/Button/index.tsx b/packages/frontend/src/components/Button/index.tsx
@@ -3,38 +3,27 @@ import classNames from 'classnames'
 
 import styles from './style.module.scss'
 
-type Props = React.PropsWithChildren<{
-  'aria-label'?: string
-  className?: string
-  disabled?: boolean
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   active?: boolean
-  id?: string
-  onClick: any
-  type?: 'primary' | 'secondary' | 'danger'
-}>
+  styling?: 'primary' | 'secondary' | 'danger'
+}
 
 export default function Button({
   children,
-  disabled = false,
   active = false,
-  id,
-  onClick,
-  type,
+  styling,
+  className,
   ...props
-}: Props) {
+}: ButtonProps) {
   return (
     <button
-      id={id}
-      disabled={disabled}
-      role='button'
       className={classNames(
         styles.button,
         active && styles.active,
-        type && styles[type],
-        props.className
+        styling && styles[styling],
+        className
       )}
-      onClick={onClick}
-      aria-label={props['aria-label']}
+      {...props}
     >
       {children}
     </button>

diff --git a/packages/frontend/src/components/Dialog/FooterActionButton.tsx b/packages/frontend/src/components/Dialog/FooterActionButton.tsx
@@ -2,29 +2,16 @@ import React from 'react'
 
 import Button from '../Button'
 
-import type { MouseEventHandler, PropsWithChildren } from 'react'
+import type { ButtonProps } from '../Button'
 
 import styles from './styles.module.scss'
 
-type Props = PropsWithChildren<{
-  onClick: MouseEventHandler<HTMLButtonElement>
-  disabled?: boolean
-  danger?: boolean
-}>
-
 export default function FooterActionButton({
   children,
-  onClick,
-  disabled = false,
-  danger = false,
-}: Props) {
+  ...props
+}: ButtonProps) {
   return (
-    <Button
-      className={styles.footerActionButton}
-      onClick={onClick}
-      type={danger ? 'danger' : undefined}
-      disabled={disabled}
-    >
+    <Button className={styles.footerActionButton} {...props}>
       {children}
     </Button>
   )

diff --git a/packages/frontend/src/components/LoginForm.tsx b/packages/frontend/src/components/LoginForm.tsx
@@ -443,7 +443,7 @@ export function ConfigureProgressDialog({
       </DialogBody>
       <DialogFooter>
         <FooterActions>
-          <FooterActionButton danger onClick={onCancel}>
+          <FooterActionButton styling='danger' onClick={onCancel}>
             {tx('cancel')}
           </FooterActionButton>
         </FooterActions>

diff --git a/packages/frontend/src/components/composer/EmojiAndStickerPicker.tsx b/packages/frontend/src/components/composer/EmojiAndStickerPicker.tsx
@@ -95,7 +95,7 @@ export const StickerPicker = ({
             ))}
           </div>
           <div className='sticker-actions-container'>
-            <Button type='secondary' onClick={onOpenStickerFolder}>
+            <Button styling='secondary' onClick={onOpenStickerFolder}>
               {tx('open_sticker_folder')}
             </Button>
           </div>

diff --git a/packages/frontend/src/components/dialogs/ConfirmationDialog.tsx b/packages/frontend/src/components/dialogs/ConfirmationDialog.tsx
@@ -57,7 +57,7 @@ export default function ConfirmationDialog({
             {cancelLabel || tx('cancel')}
           </FooterActionButton>
           <FooterActionButton
-            danger={isConfirmDanger}
+            styling={isConfirmDanger ? 'danger' : undefined}
             onClick={() => handleClick(true)}
           >
             {confirmLabel || tx('yes')}

diff --git a/packages/frontend/src/components/dialogs/ViewProfile/index.tsx b/packages/frontend/src/components/dialogs/ViewProfile/index.tsx
@@ -270,7 +270,7 @@ export function ViewProfileInner({
       >
         {!isDeviceChat && (
           <Button
-            type='primary'
+            styling='primary'
             aria-label={tx('send_message')}
             onClick={onSendMessage}
           >

diff --git a/packages/frontend/src/components/message/Message.tsx b/packages/frontend/src/components/message/Message.tsx
@@ -853,7 +853,7 @@ function WebxdcMessageContent({ message }: { message: T.Message }) {
       )}
       <Button
         className={styles.startWebxdcButton}
-        type='primary'
+        styling='primary'
         onClick={() => openWebxdc(message.id)}
       >
         {tx('start_app')}

diff --git a/packages/frontend/src/components/screens/AccountDeletionScreen/AccountDeletionScreen.tsx b/packages/frontend/src/components/screens/AccountDeletionScreen/AccountDeletionScreen.tsx
@@ -114,7 +114,7 @@ export default function AccountDeletionScreen({
                 {tx('cancel')}
               </FooterActionButton>
               <FooterActionButton
-                danger={true}
+                styling='danger'
                 onClick={async () => onDeleteAccount(selectedAccountId)}
               >
                 {tx('delete')}

diff --git a/packages/frontend/src/components/screens/WelcomeScreen/AlternativeSetupsDialog.tsx b/packages/frontend/src/components/screens/WelcomeScreen/AlternativeSetupsDialog.tsx
@@ -75,14 +75,14 @@ export default function AlternativeSetupsDialog({
       <DialogBody>
         <DialogContent>
           <Button
-            type='secondary'
+            styling='secondary'
             className={styles.welcomeScreenButton}
             onClick={onClickSecondDevice}
           >
             {tx('multidevice_receiver_title')}
           </Button>
           <Button
-            type='secondary'
+            styling='secondary'
             className={styles.welcomeScreenButton}
             onClick={onClickImportBackup}
           >

diff --git a/packages/frontend/src/components/screens/WelcomeScreen/InstantOnboardingScreen.tsx b/packages/frontend/src/components/screens/WelcomeScreen/InstantOnboardingScreen.tsx
@@ -162,7 +162,7 @@ export default function InstantOnboardingScreen({
             </div>
             <Button
               className={styles.welcomeScreenButton}
-              type='primary'
+              styling='primary'
               onClick={onConfirm}
             >
               {welcomeQr?.qr.kind === 'login'
@@ -171,7 +171,7 @@ export default function InstantOnboardingScreen({
             </Button>
             <Button
               className={styles.welcomeScreenButton}
-              type='secondary'
+              styling='secondary'
               onClick={showOtherOptions}
             >
               {tx('instant_onboarding_show_more_instances')}

diff --git a/packages/frontend/src/components/screens/WelcomeScreen/OnboardingScreen.tsx b/packages/frontend/src/components/screens/WelcomeScreen/OnboardingScreen.tsx
@@ -80,14 +80,14 @@ export default function OnboardingScreen(props: Props) {
           <div className={styles.welcomeScreenButtonGroup}>
             <Button
               className={styles.welcomeScreenButton}
-              type='primary'
+              styling='primary'
               onClick={props.onNextStep}
             >
               {tx('onboarding_create_instant_account')}
             </Button>
             <Button
               className={styles.welcomeScreenButton}
-              type='secondary'
+              styling='secondary'
               onClick={onAlreadyHaveAccount}
             >
               {tx('onboarding_alternative_logins')}

diff --git a/packages/frontend/src/components/screens/WelcomeScreen/UseOtherServerDialog.tsx b/packages/frontend/src/components/screens/WelcomeScreen/UseOtherServerDialog.tsx
@@ -45,7 +45,7 @@ export default function UseOtherServerDialog({ onClose }: DialogProps) {
       <DialogBody>
         <DialogContent>
           <Button
-            type='secondary'
+            styling='secondary'
             className={styles.welcomeScreenButton}
             onClick={onShowMoreInstances}
           >
@@ -54,14 +54,14 @@ export default function UseOtherServerDialog({ onClose }: DialogProps) {
           </Button>
 
           <Button
-            type='secondary'
+            styling='secondary'
             className={styles.welcomeScreenButton}
             onClick={onClickLogin}
           >
             {tx('manual_account_setup_option')}
           </Button>
           <Button
-            type='secondary'
+            styling='secondary'
             className={styles.welcomeScreenButton}
             onClick={onScanQRCode}
           >