React Aria Button on Settings and Rules Page (#2913)

* React Aria Button on rules and settings page

* Release notes

* VRT

packages/desktop-client/src/components/rules/RuleRow.tsx

@@ -9,11 +9,11 @@ import { type RuleEntity } from 'loot-core/src/types/models';
 import { useSelectedDispatch } from '../../hooks/useSelected';
 import { SvgRightArrow2 } from '../../icons/v0';
 import { styles, theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Stack } from '../common/Stack';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
-import { SelectCell, Row, Field, Cell, CellButton } from '../table';
+import { SelectCell, Row, Field, Cell } from '../table';
 
 import { ActionExpression } from './ActionExpression';
 import { ConditionExpression } from './ConditionExpression';
@@ -162,10 +162,7 @@ export const RuleRow = memo(
         </Field>
 
         <Cell name="edit" plain style={{ padding: '0 15px', paddingLeft: 5 }}>
-          {/* @ts-expect-error fix this later */}
-          <Button as={CellButton} onSelect={() => onEditRule(rule)}>
-            Edit
-          </Button>
+          <Button onPress={() => onEditRule(rule)}>Edit</Button>
         </Cell>
       </Row>
     );

packages/desktop-client/src/components/settings/Encryption.tsx

 // @ts-strict-ignore
 import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import { pushModal } from 'loot-core/client/actions';
 
-import { useActions } from '../../hooks/useActions';
 import { useLocalPref } from '../../hooks/useLocalPref';
 import { theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Link } from '../common/Link';
 import { Text } from '../common/Text';
 import { useServerURL } from '../ServerContext';
@@ -12,19 +14,19 @@ import { useServerURL } from '../ServerContext';
 import { Setting } from './UI';
 
 export function EncryptionSettings() {
-  const { pushModal } = useActions();
+  const dispatch = useDispatch();
   const serverURL = useServerURL();
   const [encryptKeyId] = useLocalPref('encryptKeyId');
 
   const missingCryptoAPI = !(window.crypto && crypto.subtle);
 
   function onChangeKey() {
-    pushModal('create-encryption-key', { recreate: true });
+    dispatch(pushModal('create-encryption-key', { recreate: true }));
   }
 
   return encryptKeyId ? (
     <Setting
-      primaryAction={<Button onClick={onChangeKey}>Generate new key</Button>}
+      primaryAction={<Button onPress={onChangeKey}>Generate new key</Button>}
     >
       <Text>
         <Text style={{ color: theme.noticeTextLight, fontWeight: 600 }}>
@@ -43,7 +45,7 @@ export function EncryptionSettings() {
       </Text>
     </Setting>
   ) : missingCryptoAPI ? (
-    <Setting primaryAction={<Button disabled>Enable encryption…</Button>}>
+    <Setting primaryAction={<Button isDisabled>Enable encryption…</Button>}>
       <Text>
         <strong>End-to-end encryption</strong> is not available when making an
         unencrypted connection to a remote server. You’ll need to enable HTTPS
@@ -61,7 +63,7 @@ export function EncryptionSettings() {
   ) : serverURL ? (
     <Setting
       primaryAction={
-        <Button onClick={() => pushModal('create-encryption-key')}>
+        <Button onPress={() => dispatch(pushModal('create-encryption-key'))}>
           Enable encryption…
         </Button>
       }
@@ -82,7 +84,7 @@ export function EncryptionSettings() {
       </Text>
     </Setting>
   ) : (
-    <Setting primaryAction={<Button disabled>Enable encryption…</Button>}>
+    <Setting primaryAction={<Button isDisabled>Enable encryption…</Button>}>
       <Text>
         <strong>End-to-end encryption</strong> is not available when running
         without a server. Budget files are always kept unencrypted locally, and

packages/desktop-client/src/components/settings/Export.tsx

@@ -7,7 +7,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import { useLocalPref } from '../../hooks/useLocalPref';
 import { theme } from '../../style';
 import { Block } from '../common/Block';
-import { ButtonWithLoading } from '../common/Button';
+import { ButtonWithLoading } from '../common/Button2';
 import { Text } from '../common/Text';
 
 import { Setting } from './UI';
@@ -43,7 +43,7 @@ export function ExportBudget() {
     <Setting
       primaryAction={
         <>
-          <ButtonWithLoading onClick={onExport} loading={isLoading}>
+          <ButtonWithLoading onPress={onExport} isLoading={isLoading}>
             Export data
           </ButtonWithLoading>
           {error && (

packages/desktop-client/src/components/settings/FixSplits.tsx

@@ -4,7 +4,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import { type Handlers } from 'loot-core/src/types/handlers';
 
 import { theme } from '../../style';
-import { ButtonWithLoading } from '../common/Button';
+import { ButtonWithLoading } from '../common/Button2';
 import { Paragraph } from '../common/Paragraph';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
@@ -74,7 +74,7 @@ export function FixSplits() {
             alignItems: 'center',
           }}
         >
-          <ButtonWithLoading loading={loading} onClick={onFix}>
+          <ButtonWithLoading isLoading={loading} onPress={onFix}>
             Repair split transactions
           </ButtonWithLoading>
           {results && renderResults(results)}

packages/desktop-client/src/components/settings/Format.tsx

@@ -6,8 +6,8 @@ import { type LocalPrefs } from 'loot-core/src/types/prefs';
 
 import { useDateFormat } from '../../hooks/useDateFormat';
 import { useLocalPref } from '../../hooks/useLocalPref';
+import { type CSSProperties, theme } from '../../style';
 import { tokens } from '../../tokens';
-import { Button } from '../common/Button';
 import { Select } from '../common/Select';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
@@ -65,6 +65,12 @@ export function FormatSettings() {
   const [hideFraction = false, setHideFractionPref] =
     useLocalPref('hideFraction');
 
+  const selectButtonStyle: CSSProperties = {
+    ':hover': {
+      backgroundColor: theme.buttonNormalBackgroundHover,
+    },
+  };
+
   return (
     <Setting
       primaryAction={
@@ -83,18 +89,16 @@ export function FormatSettings() {
           }}
         >
           <Column title="Numbers">
-            <Button bounce={false} style={{ padding: 0 }}>
-              <Select
-                bare
-                key={String(hideFraction)} // needed because label does not update
-                value={numberFormat}
-                onChange={setNumberFormatPref}
-                options={numberFormats.map(f => [
-                  f.value,
-                  hideFraction ? f.labelNoFraction : f.label,
-                ])}
-              />
-            </Button>
+            <Select
+              key={String(hideFraction)} // needed because label does not update
+              value={numberFormat}
+              onChange={format => setNumberFormatPref(format)}
+              options={numberFormats.map(f => [
+                f.value,
+                hideFraction ? f.labelNoFraction : f.label,
+              ])}
+              buttonStyle={selectButtonStyle}
+            />
 
             <Text style={{ display: 'flex' }}>
               <Checkbox
@@ -107,25 +111,21 @@ export function FormatSettings() {
           </Column>
 
           <Column title="Dates">
-            <Button bounce={false} style={{ padding: 0 }}>
-              <Select
-                bare
-                value={dateFormat}
-                onChange={setDateFormatPref}
-                options={dateFormats.map(f => [f.value, f.label])}
-              />
-            </Button>
+            <Select
+              value={dateFormat}
+              onChange={format => setDateFormatPref(format)}
+              options={dateFormats.map(f => [f.value, f.label])}
+              buttonStyle={selectButtonStyle}
+            />
           </Column>
 
           <Column title="First day of the week">
-            <Button bounce={false} style={{ padding: 0 }}>
-              <Select
-                bare
-                value={firstDayOfWeekIdx}
-                onChange={setFirstDayOfWeekIdxPref}
-                options={daysOfWeek.map(f => [f.value, f.label])}
-              />
-            </Button>
+            <Select
+              value={firstDayOfWeekIdx}
+              onChange={idx => setFirstDayOfWeekIdxPref(idx)}
+              options={daysOfWeek.map(f => [f.value, f.label])}
+              buttonStyle={selectButtonStyle}
+            />
           </Column>
         </View>
       }

packages/desktop-client/src/components/settings/Global.tsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useGlobalPref } from '../../hooks/useGlobalPref';
 import { theme } from '../../style';
 import { Information } from '../alerts';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
@@ -35,7 +35,7 @@ export function GlobalSettings() {
     <Setting
       primaryAction={
         <View style={{ flexDirection: 'row' }}>
-          <Button onClick={onChooseDocumentDir}>Change location</Button>
+          <Button onPress={onChooseDocumentDir}>Change location</Button>
           {documentDirChanged && (
             <Information>
               A restart is required for this change to take effect

packages/desktop-client/src/components/settings/Reset.tsx

@@ -4,7 +4,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 
 import { useActions } from '../../hooks/useActions';
 import { useLocalPref } from '../../hooks/useLocalPref';
-import { ButtonWithLoading } from '../common/Button';
+import { ButtonWithLoading } from '../common/Button2';
 import { Text } from '../common/Text';
 
 import { Setting } from './UI';
@@ -21,7 +21,7 @@ export function ResetCache() {
   return (
     <Setting
       primaryAction={
-        <ButtonWithLoading loading={resetting} onClick={onResetCache}>
+        <ButtonWithLoading isLoading={resetting} onPress={onResetCache}>
           Reset budget cache
         </ButtonWithLoading>
       }
@@ -54,9 +54,9 @@ export function ResetSync() {
     <Setting
       primaryAction={
         <ButtonWithLoading
-          loading={resetting}
-          disabled={!isEnabled}
-          onClick={onResetSync}
+          isLoading={resetting}
+          isDisabled={!isEnabled}
+          onPress={onResetSync}
         >
           Reset sync
         </ButtonWithLoading>

packages/desktop-client/src/components/settings/Themes.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import { type Theme } from 'loot-core/types/prefs';
 
-import { themeOptions, useTheme } from '../../style';
-import { Button } from '../common/Button';
+import { themeOptions, useTheme, theme as themeStyle } from '../../style';
 import { Select } from '../common/Select';
 import { Text } from '../common/Text';
 
@@ -15,14 +14,18 @@ export function ThemeSettings() {
   return (
     <Setting
       primaryAction={
-        <Button bounce={false} style={{ padding: 0 }}>
-          <Select<Theme>
-            bare
-            onChange={switchTheme}
-            value={theme}
-            options={themeOptions}
-          />
-        </Button>
+        <Select<Theme>
+          onChange={value => {
+            switchTheme(value);
+          }}
+          value={theme}
+          options={themeOptions}
+          buttonStyle={{
+            ':hover': {
+              backgroundColor: themeStyle.buttonNormalBackgroundHover,
+            },
+          }}
+        />
       }
     >
       <Text>

packages/desktop-client/src/components/settings/index.tsx

@@ -13,7 +13,7 @@ import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { useResponsive } from '../../ResponsiveProvider';
 import { theme } from '../../style';
 import { tokens } from '../../tokens';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Input } from '../common/Input';
 import { Link } from '../common/Link';
 import { Text } from '../common/Text';
@@ -167,7 +167,7 @@ export function Settings() {
                 style={{ color: theme.buttonNormalDisabledText }}
               />
             </FormField>
-            <Button onClick={closeBudget}>Close Budget</Button>
+            <Button onPress={closeBudget}>Close Budget</Button>
           </View>
         )}
 

upcoming-release-notes/2913.md

+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Use new react-aria-components based Button on settings and rules page.