Replace usage of deprecated Button component in MobileForms with new Button component (#4559)

* Update mobile forms TapField to use the new Button component

* Release notes

* Fix typecheck error

* Cleanup

* Update VRT

* Dummy commit

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: joel-jeremy

packages/desktop-client/e2e/transactions.mobile.test.ts-snapshots/Mobile-Transactions-creates-a-transaction-from-accounts-id-page-1-chromium-linux.png

@@ -6,14 +6,13 @@ import React, {
   type CSSProperties,
 } from 'react';
 
+import { Button } from '@actual-app/components/button';
 import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
+import { theme } from '@actual-app/components/theme';
 import { Toggle } from '@actual-app/components/toggle';
-import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 
-import { theme } from '../../style';
-import { Button } from '../common/Button';
 import { Input } from '../common/Input';
 
 type FieldLabelProps = {
@@ -77,57 +76,59 @@ InputField.displayName = 'InputField';
 
 type TapFieldProps = ComponentPropsWithRef<typeof Button> & {
   rightContent?: ReactNode;
+  textStyle?: CSSProperties;
 };
 
+const defaultTapFieldStyle: ComponentPropsWithoutRef<
+  typeof Button
+>['style'] = ({ isDisabled, isPressed, isHovered }) => ({
+  ...valueStyle,
+  flexDirection: 'row',
+  alignItems: 'center',
+  backgroundColor: theme.tableBackground,
+  ...(isDisabled && {
+    backgroundColor: theme.formInputTextReadOnlySelection,
+  }),
+  ...(isPressed
+    ? {
+        opacity: 0.5,
+        boxShadow: 'none',
+      }
+    : {}),
+  ...(isHovered
+    ? {
+        boxShadow: 'none',
+      }
+    : {}),
+});
+
 export const TapField = forwardRef<HTMLButtonElement, TapFieldProps>(
-  (
-    {
-      value,
-      children,
-      disabled,
-      rightContent,
-      style,
-      textStyle,
-      onClick,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ value, children, rightContent, style, textStyle, ...props }, ref) => {
     return (
       <Button
-        // @ts-expect-error fix this later
-        as={View}
         ref={ref}
-        onClick={!disabled ? onClick : undefined}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          ...style,
-          ...valueStyle,
-          backgroundColor: theme.tableBackground,
-          ...(disabled && {
-            backgroundColor: theme.formInputTextReadOnlySelection,
-          }),
-        }}
         bounce={false}
-        activeStyle={{
-          opacity: 0.5,
-          boxShadow: 'none',
-        }}
-        hoveredStyle={{
-          boxShadow: 'none',
-        }}
-        // activeOpacity={0.05}
+        style={renderProps => ({
+          ...defaultTapFieldStyle(renderProps),
+          ...(typeof style === 'function' ? style(renderProps) : style),
+        })}
         {...props}
       >
         {children ? (
           children
         ) : (
-          <Text style={{ flex: 1, userSelect: 'none', ...textStyle }}>
+          <Text
+            style={{
+              flex: 1,
+              userSelect: 'none',
+              textAlign: 'left',
+              ...textStyle,
+            }}
+          >
             {value}
           </Text>
         )}
-        {!disabled && rightContent}
+        {!props.isDisabled && rightContent}
       </Button>
     );
   },

packages/desktop-client/e2e/transactions.mobile.test.ts-snapshots/Mobile-Transactions-creates-a-transaction-from-accounts-id-page-2-chromium-linux.png

@@ -320,12 +320,12 @@ const ChildTransactionEdit = forwardRef(
           <View style={{ flexBasis: '75%' }}>
             <FieldLabel title={t('Payee')} />
             <TapField
-              disabled={
+              isDisabled={
                 editingField &&
                 editingField !== getFieldName(transaction.id, 'payee')
               }
               value={prettyPayee}
-              onClick={() => onEditField(transaction.id, 'payee')}
+              onPress={() => onEditField(transaction.id, 'payee')}
               data-testid={`payee-field-${transaction.id}`}
             />
           </View>
@@ -376,13 +376,13 @@ const ChildTransactionEdit = forwardRef(
               }),
             }}
             value={getCategory(transaction, isOffBudget)}
-            disabled={
+            isDisabled={
               (editingField &&
                 editingField !== getFieldName(transaction.id, 'category')) ||
               isOffBudget ||
               isBudgetTransfer(transaction)
             }
-            onClick={() => onEditField(transaction.id, 'category')}
+            onPress={() => onEditField(transaction.id, 'category')}
             data-testid={`category-field-${transaction.id}`}
           />
         </View>
@@ -848,11 +848,11 @@ const TransactionEditInner = memo(function TransactionEditInner({
               }),
             }}
             value={title}
-            disabled={
+            isDisabled={
               editingField &&
               editingField !== getFieldName(transaction.id, 'payee')
             }
-            onClick={() => onEditFieldInner(transaction.id, 'payee')}
+            onPress={() => onEditFieldInner(transaction.id, 'payee')}
             data-testid="payee-field"
           />
         </View>
@@ -869,13 +869,13 @@ const TransactionEditInner = memo(function TransactionEditInner({
                 }),
               }}
               value={getCategory(transaction, isOffBudget)}
-              disabled={
+              isDisabled={
                 (editingField &&
                   editingField !== getFieldName(transaction.id, 'category')) ||
                 isOffBudget ||
                 isBudgetTransfer(transaction)
               }
-              onClick={() => onEditFieldInner(transaction.id, 'category')}
+              onPress={() => onEditFieldInner(transaction.id, 'category')}
               data-testid="category-field"
             />
           </View>
@@ -940,12 +940,12 @@ const TransactionEditInner = memo(function TransactionEditInner({
         <View>
           <FieldLabel title={t('Account')} />
           <TapField
-            disabled={
+            isDisabled={
               editingField &&
               editingField !== getFieldName(transaction.id, 'account')
             }
             value={account?.name}
-            onClick={() => onEditFieldInner(transaction.id, 'account')}
+            onPress={() => onEditFieldInner(transaction.id, 'account')}
             data-testid="account-field"
           />
         </View>

packages/desktop-client/e2e/transactions.mobile.test.ts-snapshots/Mobile-Transactions-creates-a-transaction-from-accounts-id-page-3-chromium-linux.png

@@ -83,7 +83,7 @@ export function CoverModal({
           />
           <View>
             <FieldLabel title={t('Cover from a category:')} />
-            <TapField value={fromCategory?.name} onClick={onCategoryClick} />
+            <TapField value={fromCategory?.name} onPress={onCategoryClick} />
           </View>
 
           <View

packages/desktop-client/e2e/transactions.mobile.test.ts-snapshots/Mobile-Transactions-creates-a-transaction-via-footer-button-4-chromium-linux.png

@@ -112,11 +112,7 @@ export function TransferModal({
             </View>
 
             <FieldLabel title="To:" />
-            <TapField
-              tabIndex={0}
-              value={toCategory?.name}
-              onClick={openCategoryModal}
-            />
+            <TapField value={toCategory?.name} onPress={openCategoryModal} />
 
             <View
               style={{