[React Aria Button] - Migrate desktop and mobile budget page buttons (#3156)

* More components to use react aria Button * Release notes * vrt * Fix typecheck error * Fix account menu test * Fix typecheck error * Fix typecheck error * Remove unnecessary aria-labels * Fix payee icons and category notes * vrt * vrt * Fix notes button * Fix typecheck error * Fix lint error * VRT * Remove default :focus on Button2 * Add Button2 defaultClassName * Update className * Fix typecheck error * Cleanup * VRT * Fix typecheck error * Fix typecheck error * Fix typecheck error * react-aria Button for budget pages * Release notes
2026-03-11 20:44:32 -05:00 · 2024-08-05 19:45:30 -07:00
parent 44ce976ffa
commit 5e9b976676
13 changed files with 109 additions and 154 deletions
--- a/packages/desktop-client/src/components/budget/BudgetTotals.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
@@ -2,7 +2,7 @@ import React, { type ComponentProps, memo, useRef, useState } from 'react';

 import { SvgDotsHorizontalTriple } from '../../icons/v1';
 import { theme, styles } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import { Popover } from '../common/Popover';
 import { View } from '../common/View';
@@ -57,11 +57,9 @@ export const BudgetTotals = memo(function BudgetTotals({
        <View style={{ flexGrow: '1' }}>Category</View>
        <Button
          ref={triggerRef}
-          type="bare"
+          variant="bare"
          aria-label="Menu"
-          onClick={() => {
-            setMenuOpen(true);
-          }}
+          onPress={() => setMenuOpen(true)}
          style={{ color: 'currentColor', padding: 3 }}
        >
          <SvgDotsHorizontalTriple
--- a/packages/desktop-client/src/components/budget/IncomeHeader.tsx
+++ b/packages/desktop-client/src/components/budget/IncomeHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';

-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { View } from '../common/View';

 import { RenderMonths } from './RenderMonths';
@@ -23,7 +23,7 @@ export function IncomeHeader({
          justifyContent: 'flex-start',
        }}
      >
-        <Button onClick={onShowNewGroup} style={{ fontSize: 12, margin: 10 }}>
+        <Button onPress={onShowNewGroup} style={{ fontSize: 12, margin: 10 }}>
          Add Group
        </Button>
      </View>
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -8,7 +8,7 @@ import {

 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import { Popover } from '../common/Popover';
 import { View } from '../common/View';
@@ -57,6 +57,7 @@ export function SidebarCategory({
        userSelect: 'none',
        WebkitUserSelect: 'none',
        opacity: category.hidden || categoryGroup?.hidden ? 0.33 : undefined,
+        backgroundColor: 'transparent',
      }}
    >
      <div
@@ -72,13 +73,10 @@ export function SidebarCategory({
      </div>
      <View style={{ flexShrink: 0, marginLeft: 5 }} ref={triggerRef}>
        <Button
-          type="bare"
+          variant="bare"
          className="hover-visible"
-          onClick={e => {
-            e.stopPropagation();
-            setMenuOpen(true);
-          }}
          style={{ color: 'currentColor', padding: 3 }}
+          onPress={() => setMenuOpen(true)}
        >
          <SvgCheveronDown
            width={14}
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -5,7 +5,7 @@ import { type ConnectDragSource } from 'react-dnd';
 import { SvgExpandArrow } from '../../icons/v0';
 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import { Popover } from '../common/Popover';
 import { Text } from '../common/Text';
@@ -94,12 +94,9 @@ export function SidebarGroup({
        <>
          <View style={{ marginLeft: 5, flexShrink: 0 }} ref={triggerRef}>
            <Button
-              type="bare"
+              variant="bare"
              className="hover-visible"
-              onClick={e => {
-                e.stopPropagation();
-                setMenuOpen(true);
-              }}
+              onPress={() => setMenuOpen(true)}
              style={{ padding: 3 }}
            >
              <SvgCheveronDown width={14} height={14} />
--- a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
+++ b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
@@ -7,7 +7,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';

 import { SvgCheveronDown } from '../../../icons/v1';
 import { styles, theme, type CSSProperties } from '../../../style';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
 import { Popover } from '../../common/Popover';
 import { Text } from '../../common/Text';
 import { View } from '../../common/View';
@@ -206,11 +206,8 @@ export const CategoryMonth = memo(function CategoryMonth({
          >
            <Button
              ref={triggerRef}
-              type="bare"
-              onClick={e => {
-                e.stopPropagation();
-                setMenuOpen(true);
-              }}
+              variant="bare"
+              onPress={() => setMenuOpen(true)}
              style={{
                padding: 3,
              }}
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
@@ -8,7 +8,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { SvgDotsHorizontalTriple } from '../../../../icons/v1';
 import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2';
 import { theme, styles } from '../../../../style';
-import { Button } from '../../../common/Button';
+import { Button } from '../../../common/Button2';
 import { Popover } from '../../../common/Popover';
 import { Stack } from '../../../common/Stack';
 import { View } from '../../../common/View';
@@ -84,10 +84,10 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
            }}
          >
            <Button
-              type="bare"
+              variant="bare"
              aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`}
              className="hover-visible"
-              onClick={onToggleSummaryCollapse}
+              onPress={onToggleSummaryCollapse}
            >
              <ExpandOrCollapseIcon
                width={13}
@@ -133,9 +133,9 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
            <View style={{ userSelect: 'none' }}>
              <Button
                ref={triggerRef}
-                type="bare"
+                variant="bare"
                aria-label="Menu"
-                onClick={onMenuOpen}
+                onPress={onMenuOpen}
              >
                <SvgDotsHorizontalTriple
                  width={15}
--- a/packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';

 import { useCategories } from '../../../hooks/useCategories';
 import { CategoryAutocomplete } from '../../autocomplete/CategoryAutocomplete';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
 import { InitialFocus } from '../../common/InitialFocus';
 import { View } from '../../common/View';
 import { addToBeBudgetedGroup } from '../util';
@@ -61,12 +61,12 @@ export function CoverMenu({
        }}
      >
        <Button
-          type="primary"
+          variant="primary"
          style={{
            fontSize: 12,
            paddingTop: 3,
          }}
-          onClick={submit}
+          onPress={submit}
        >
          Transfer
        </Button>
--- a/packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx
@@ -9,7 +9,7 @@ import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
 import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';

-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
 import { InitialFocus } from '../../common/InitialFocus';
 import { Input } from '../../common/Input';
 import { View } from '../../common/View';
@@ -66,13 +66,13 @@ export function HoldMenu({ onSubmit, onClose }: HoldMenuProps) {
        }}
      >
        <Button
-          type="primary"
+          variant="primary"
          style={{
            fontSize: 12,
            paddingTop: 3,
            paddingBottom: 3,
          }}
-          onClick={() => submit(amount)}
+          onPress={() => submit(amount)}
        >
          Hold
        </Button>
--- a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
@@ -7,7 +7,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';

 import { SvgCheveronDown } from '../../../icons/v1';
 import { styles, theme, type CSSProperties } from '../../../style';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
 import { Popover } from '../../common/Popover';
 import { Text } from '../../common/Text';
 import { View } from '../../common/View';
@@ -200,11 +200,8 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
          >
            <Button
              ref={budgetMenuTriggerRef}
-              type="bare"
-              onClick={e => {
-                e.stopPropagation();
-                setBudgetMenuOpen(true);
-              }}
+              variant="bare"
+              onPress={() => setBudgetMenuOpen(true)}
              style={{
                padding: 3,
              }}
--- a/packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx
@@ -5,7 +5,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';

 import { useCategories } from '../../../hooks/useCategories';
 import { CategoryAutocomplete } from '../../autocomplete/CategoryAutocomplete';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
 import { InitialFocus } from '../../common/InitialFocus';
 import { Input } from '../../common/Input';
 import { View } from '../../common/View';
@@ -79,13 +79,13 @@ export function TransferMenu({
        }}
      >
        <Button
-          type="primary"
+          variant="primary"
          style={{
            fontSize: 12,
            paddingTop: 3,
            paddingBottom: 3,
          }}
-          onClick={() => _onSubmit(amount, categoryId)}
+          onPress={() => _onSubmit(amount, categoryId)}
        >
          Transfer
        </Button>
--- a/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
@@ -7,7 +7,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { SvgDotsHorizontalTriple } from '../../../../icons/v1';
 import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2';
 import { theme, styles } from '../../../../style';
-import { Button } from '../../../common/Button';
+import { Button } from '../../../common/Button2';
 import { Popover } from '../../../common/Popover';
 import { View } from '../../../common/View';
 import { NotesButton } from '../../../NotesButton';
@@ -85,10 +85,10 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
            }}
          >
            <Button
-              type="bare"
+              variant="bare"
              aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`}
              className="hover-visible"
-              onClick={onToggleSummaryCollapse}
+              onPress={onToggleSummaryCollapse}
            >
              <ExpandOrCollapseIcon
                width={13}
@@ -135,9 +135,9 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
            <View style={{ userSelect: 'none', marginLeft: 2 }}>
              <Button
                ref={triggerRef}
-                type="bare"
+                variant="bare"
                aria-label="Menu"
-                onClick={onMenuOpen}
+                onPress={onMenuOpen}
              >
                <SvgDotsHorizontalTriple
                  width={15}
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -24,7 +24,7 @@ import { useResponsive } from '../../../ResponsiveProvider';
 import { theme, styles } from '../../../style';
 import { BalanceWithCarryover } from '../../budget/BalanceWithCarryover';
 import { makeAmountGrey, makeBalanceAmountStyle } from '../../budget/util';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
 import { Card } from '../../common/Card';
 import { Label } from '../../common/Label';
 import { Text } from '../../common/Text';
@@ -53,7 +53,7 @@ function getColumnWidth({ show3Cols, isSidebar = false, offset = 0 } = {}) {
  return show3Cols ? `${35 + offset}vw` : `${45 + offset}vw`;
 }

-function ToBudget({ toBudget, onClick, show3Cols }) {
+function ToBudget({ toBudget, onPress, show3Cols }) {
  const amount = useSheetValue(toBudget);
  const format = useFormat();
  const sidebarColumnWidth = getColumnWidth({ show3Cols, isSidebar: true });
@@ -68,12 +68,9 @@ function ToBudget({ toBudget, onClick, show3Cols }) {
      }}
    >
      <Button
-        type="bare"
+        variant="bare"
        style={{ maxWidth: sidebarColumnWidth }}
-        onPointerUp={e => {
-          e.stopPropagation();
-          onClick?.();
-        }}
+        onPress={onPress}
      >
        <View>
          <Label
@@ -121,7 +118,7 @@ function ToBudget({ toBudget, onClick, show3Cols }) {
  );
 }

-function Saved({ projected, onClick, show3Cols }) {
+function Saved({ projected, onPress, show3Cols }) {
  const binding = projected
    ? reportBudget.totalBudgetedSaved
    : reportBudget.totalSaved;
@@ -141,12 +138,9 @@ function Saved({ projected, onClick, show3Cols }) {
      }}
    >
      <Button
-        type="bare"
+        variant="bare"
        style={{ maxWidth: sidebarColumnWidth }}
-        onPointerUp={e => {
-          e.stopPropagation();
-          onClick?.();
-        }}
+        onPress={onPress}
      >
        <View>
          <View>
@@ -448,14 +442,11 @@ const ExpenseCategory = memo(function ExpenseCategory({
        }}
      >
        <Button
-          type="bare"
+          variant="bare"
          style={{
            maxWidth: sidebarColumnWidth,
          }}
-          onPointerUp={e => {
-            e.stopPropagation();
-            onEdit?.(category.id);
-          }}
+          onPress={() => onEdit?.(category.id)}
        >
          <View
            style={{
@@ -507,7 +498,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
            onBudgetAction={onBudgetAction}
            formatter={value => (
              <Button
-                type="bare"
+                variant="bare"
                style={{
                  ...PILL_STYLE,
                  maxWidth: columnWidth,
@@ -550,7 +541,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
            }}
            formatter={value => (
              <Button
-                type="bare"
+                variant="bare"
                style={{
                  ...PILL_STYLE,
                  maxWidth: columnWidth,
@@ -597,7 +588,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
              longGoal={longGoal}
              formatter={value => (
                <Button
-                  type="bare"
+                  variant="bare"
                  style={{
                    ...PILL_STYLE,
                    maxWidth: columnWidth,
@@ -727,22 +718,16 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
        }}
      >
        <Button
-          type="bare"
-          style={{
+          variant="bare"
+          style={({ isPressed, isHovered }) => ({
            flexShrink: 0,
            color: theme.pageTextSubdued,
            ...styles.noTapHighlight,
-          }}
-          activeStyle={{
-            backgroundColor: 'transparent',
-          }}
-          hoveredStyle={{
-            backgroundColor: 'transparent',
-          }}
-          onPointerUp={e => {
-            e.stopPropagation();
-            onToggleCollapse?.(group.id);
-          }}
+            ...(isPressed || isHovered
+              ? { backgroundColor: 'transparent' }
+              : {}),
+          })}
+          onPress={() => onToggleCollapse?.(group.id)}
        >
          <SvgExpandArrow
            width={8}
@@ -755,14 +740,11 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
          />
        </Button>
        <Button
-          type="bare"
+          variant="bare"
          style={{
            maxWidth: sidebarColumnWidth,
          }}
-          onPointerUp={e => {
-            e.stopPropagation();
-            onEdit?.(group.id);
-          }}
+          onPress={() => onEdit?.(group.id)}
        >
          <View
            style={{
@@ -960,22 +942,16 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
        }}
      >
        <Button
-          type="bare"
-          style={{
+          variant="bare"
+          style={({ isPressed, isHovered }) => ({
            flexShrink: 0,
            color: theme.pageTextSubdued,
            ...styles.noTapHighlight,
-          }}
-          activeStyle={{
-            backgroundColor: 'transparent',
-          }}
-          hoveredStyle={{
-            backgroundColor: 'transparent',
-          }}
-          onPointerUp={e => {
-            e.stopPropagation();
-            onToggleCollapse?.(group.id);
-          }}
+            ...(isPressed || isHovered
+              ? { backgroundColor: 'transparent' }
+              : {}),
+          })}
+          onPress={() => onToggleCollapse?.(group.id)}
        >
          <SvgExpandArrow
            width={8}
@@ -988,14 +964,11 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
          />
        </Button>
        <Button
-          type="bare"
+          variant="bare"
          style={{
            maxWidth: sidebarColumnWidth,
          }}
-          onPointerUp={e => {
-            e.stopPropagation();
-            onEdit?.(group.id);
-          }}
+          onPress={() => onEdit?.(group.id)}
        >
          <View
            style={{
@@ -1137,14 +1110,11 @@ const IncomeCategory = memo(function IncomeCategory({
        }}
      >
        <Button
-          type="bare"
+          variant="bare"
          style={{
            maxWidth: sidebarColumnWidth,
          }}
-          onPointerUp={e => {
-            e.stopPropagation();
-            onEdit?.(category.id);
-          }}
+          onPress={() => onEdit?.(category.id)}
        >
          <View
            style={{
@@ -1195,7 +1165,7 @@ const IncomeCategory = memo(function IncomeCategory({
              onBudgetAction={onBudgetAction}
              formatter={value => (
                <Button
-                  type="bare"
+                  variant="bare"
                  style={{ ...PILL_STYLE, maxWidth: columnWidth }}
                >
                  <AutoTextSize
@@ -1669,17 +1639,13 @@ export function BudgetTable({
          }
          leftContent={
            <Button
-              type="bare"
-              style={{
+              variant="bare"
+              style={({ isPressed, isHovered }) => ({
                color: theme.mobileHeaderText,
                margin: 10,
-              }}
-              hoveredStyle={noBackgroundColorStyle}
-              activeStyle={noBackgroundColorStyle}
-              onPointerUp={e => {
-                e.stopPropagation();
-                onOpenBudgetPageMenu?.();
-              }}
+                ...(isPressed || isHovered ? noBackgroundColorStyle : {}),
+              })}
+              onPress={onOpenBudgetPageMenu}
            >
              <SvgLogo width="20" height="20" />
              <SvgCheveronRight
@@ -1775,13 +1741,13 @@ function BudgetTableHeader({
        {type === 'report' ? (
          <Saved
            projected={month >= monthUtils.currentMonth()}
-            onClick={onShowBudgetSummary}
+            onPress={onShowBudgetSummary}
            show3Cols={show3Cols}
          />
        ) : (
          <ToBudget
            toBudget={rolloverBudget.toBudget}
-            onClick={onShowBudgetSummary}
+            onPress={onShowBudgetSummary}
            show3Cols={show3Cols}
          />
        )}
@@ -1801,12 +1767,9 @@ function BudgetTableHeader({
            }}
          >
            <Button
-              type="bare"
-              disabled={show3Cols}
-              onPointerUp={e => {
-                e.stopPropagation();
-                toggleSpentColumn();
-              }}
+              variant="bare"
+              isDisabled={show3Cols}
+              onPress={toggleSpentColumn}
              style={buttonStyle}
            >
              <View style={{ alignItems: 'flex-end' }}>
@@ -1865,12 +1828,9 @@ function BudgetTableHeader({
            }}
          >
            <Button
-              type="bare"
-              disabled={show3Cols}
-              onPointerUp={e => {
-                e.stopPropagation();
-                toggleSpentColumn();
-              }}
+              variant="bare"
+              isDisabled={show3Cols}
+              onPress={toggleSpentColumn()}
              style={buttonStyle}
            >
              <View style={{ alignItems: 'flex-end' }}>
@@ -1983,23 +1943,24 @@ function MonthSelector({
      }}
    >
      <Button
-        type="bare"
-        onPointerUp={e => {
-          e.stopPropagation();
+        variant="bare"
+        onPress={() => {
          if (prevEnabled) {
            onPrevMonth();
          }
        }}
-        style={{
+        style={({ isHovered }) => ({
          ...styles.noTapHighlight,
          ...arrowButtonStyle,
          opacity: prevEnabled ? 1 : 0.6,
          color: theme.mobileHeaderText,
-        }}
-        hoveredStyle={{
-          color: theme.mobileHeaderText,
-          background: theme.mobileHeaderTextHover,
-        }}
+          ...(isHovered
+            ? {
+                color: theme.mobileHeaderText,
+                background: theme.mobileHeaderTextHover,
+              }
+            : {}),
+        })}
      >
        <SvgArrowThinLeft width="15" height="15" style={{ margin: -5 }} />
      </Button>
@@ -2020,23 +1981,24 @@ function MonthSelector({
        {monthUtils.format(month, 'MMMM ‘yy')}
      </Text>
      <Button
-        type="bare"
-        onPointerUp={e => {
-          e.stopPropagation();
+        variant="bare"
+        onPress={() => {
          if (nextEnabled) {
            onNextMonth();
          }
        }}
-        style={{
+        style={({ isHovered }) => ({
          ...styles.noTapHighlight,
          ...arrowButtonStyle,
          opacity: nextEnabled ? 1 : 0.6,
          color: theme.mobileHeaderText,
-        }}
-        hoveredStyle={{
-          color: theme.mobileHeaderText,
-          background: theme.mobileHeaderTextHover,
-        }}
+          ...(isHovered
+            ? {
+                color: theme.mobileHeaderText,
+                background: theme.mobileHeaderTextHover,
+              }
+            : {}),
+        })}
      >
        <SvgArrowThinRight width="15" height="15" style={{ margin: -5 }} />
      </Button>
--- a/upcoming-release-notes/3156.md
+++ b/upcoming-release-notes/3156.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Use new react-aria-components based Button on desktop and mobile budget pages.