diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png
index f62d41599940d0fdbebf5055a5cd3e51d631ffc8..412fa61b6929eeca4e41486674d345668671f7e9 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
index 5d1c88fb7f6ddf47ddc3a87f9f8fc239bf7191a3..583945c0bd5062de234c6e67d0f870cc7a565160 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png
index e3429c77e958034315b9187341787e382c45c0b3..18aa0dd90b1725191fa09997b9612e9c4300ce8a 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/reports/CategorySelector.tsx b/packages/desktop-client/src/components/reports/CategorySelector.tsx
index 317ca37275327a5b27f4bd6a350a0183667037f6..359aec51c82257fcc770b20037baaf581d712f0a 100644
--- a/packages/desktop-client/src/components/reports/CategorySelector.tsx
+++ b/packages/desktop-client/src/components/reports/CategorySelector.tsx
@@ -12,7 +12,7 @@ import {
SvgViewHide,
SvgViewShow,
} from '../../icons/v2';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
import { Text } from '../common/Text';
import { View } from '../common/View';
import { Checkbox } from '../forms';
@@ -72,8 +72,8 @@ export function CategorySelector({
}}
>
<Button
- type="bare"
- onClick={() => setUncheckedHidden(state => !state)}
+ variant="bare"
+ onPress={() => setUncheckedHidden(state => !state)}
style={{ padding: 8 }}
>
<View>
diff --git a/packages/desktop-client/src/components/reports/GraphButton.tsx b/packages/desktop-client/src/components/reports/GraphButton.tsx
index f62b771ebcb6e4c3c6353ab6926156f309c48752..9502d24a139c5cd89f454111cd5cc4f5396862c0 100644
--- a/packages/desktop-client/src/components/reports/GraphButton.tsx
+++ b/packages/desktop-client/src/components/reports/GraphButton.tsx
@@ -1,14 +1,14 @@
import React, { type HTMLProps } from 'react';
import { type CSSProperties, styles, theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
import { Text } from '../common/Text';
import { Tooltip } from '../common/Tooltip';
type GraphButtonProps = HTMLProps<HTMLButtonElement> & {
selected?: boolean;
style?: CSSProperties;
- onSelect?: (newValue: string) => void;
+ onSelect?: () => void;
title?: string;
disabled?: boolean;
};
@@ -28,15 +28,15 @@ export const GraphButton = ({
style={{ ...styles.tooltip, lineHeight: 1.5, padding: '6px 10px' }}
>
<Button
- type="bare"
+ variant="bare"
style={{
...(selected && {
backgroundColor: theme.buttonBareBackgroundHover,
}),
...style,
}}
- onClick={onSelect}
- disabled={disabled}
+ onPress={onSelect}
+ isDisabled={disabled}
>
{children}
</Button>
diff --git a/packages/desktop-client/src/components/reports/Header.jsx b/packages/desktop-client/src/components/reports/Header.jsx
index a494746a3a462816c4f202cc62cb693a2d009330..1f8e4bc78d146b10ca1e963a5c4c5c6e3691d394 100644
--- a/packages/desktop-client/src/components/reports/Header.jsx
+++ b/packages/desktop-client/src/components/reports/Header.jsx
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
import * as monthUtils from 'loot-core/src/shared/months';
import { useResponsive } from '../../ResponsiveProvider';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
import { Select } from '../common/Select';
import { View } from '../common/View';
import { AppliedFilters } from '../filters/AppliedFilters';
@@ -109,33 +109,33 @@ export function Header({
>
{show1Month && (
<Button
- type="bare"
- onClick={() => onChangeDates(...getLatestRange(1))}
+ variant="bare"
+ onPress={() => onChangeDates(...getLatestRange(1))}
>
1 month
</Button>
)}
<Button
- type="bare"
- onClick={() => onChangeDates(...getLatestRange(2))}
+ variant="bare"
+ onPress={() => onChangeDates(...getLatestRange(2))}
>
3 months
</Button>
<Button
- type="bare"
- onClick={() => onChangeDates(...getLatestRange(5))}
+ variant="bare"
+ onPress={() => onChangeDates(...getLatestRange(5))}
>
6 months
</Button>
<Button
- type="bare"
- onClick={() => onChangeDates(...getLatestRange(11))}
+ variant="bare"
+ onPress={() => onChangeDates(...getLatestRange(11))}
>
1 Year
</Button>
<Button
- type="bare"
- onClick={() =>
+ variant="bare"
+ onPress={() =>
onChangeDates(
...getFullRange(allMonths[allMonths.length - 1].name),
)
diff --git a/packages/desktop-client/src/components/reports/ModeButton.tsx b/packages/desktop-client/src/components/reports/ModeButton.tsx
index e0bb035f91c44fc42a2c77e765d260278c1c3f0c..94a208e1ff031bd417acfb5f4d686396bdf08cb5 100644
--- a/packages/desktop-client/src/components/reports/ModeButton.tsx
+++ b/packages/desktop-client/src/components/reports/ModeButton.tsx
@@ -1,13 +1,15 @@
-import React, { type MouseEventHandler, type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
+
+import { css } from 'glamor';
import { type CSSProperties, theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
type ModeButtonProps = {
selected: boolean;
children: ReactNode;
style?: CSSProperties;
- onSelect: MouseEventHandler<HTMLButtonElement>;
+ onSelect: () => void;
};
export function ModeButton({
@@ -18,23 +20,25 @@ export function ModeButton({
}: ModeButtonProps) {
return (
<Button
- type="bare"
- style={{
- padding: '5px 10px',
- backgroundColor: theme.menuBackground,
- marginRight: 5,
- fontSize: 'inherit',
- ...style,
- ...(selected && {
- backgroundColor: theme.buttonPrimaryBackground,
- color: theme.buttonPrimaryText,
- ':hover': {
- backgroundColor: theme.buttonPrimaryBackgroundHover,
- color: theme.buttonPrimaryTextHover,
- },
+ variant="bare"
+ className={String(
+ css({
+ padding: '5px 10px',
+ backgroundColor: theme.menuBackground,
+ marginRight: 5,
+ fontSize: 'inherit',
+ ...(selected && {
+ backgroundColor: theme.buttonPrimaryBackground,
+ color: theme.buttonPrimaryText,
+ ':hover': {
+ backgroundColor: theme.buttonPrimaryBackgroundHover,
+ color: theme.buttonPrimaryTextHover,
+ },
+ }),
+ ...style,
}),
- }}
- onClick={onSelect}
+ )}
+ onPress={onSelect}
>
{children}
</Button>
diff --git a/packages/desktop-client/src/components/reports/Overview.tsx b/packages/desktop-client/src/components/reports/Overview.tsx
index a2a71ef832770b7a73834635a191c030c87068fd..49c708275512bb0a6da8237be2b5b90b5352b086 100644
--- a/packages/desktop-client/src/components/reports/Overview.tsx
+++ b/packages/desktop-client/src/components/reports/Overview.tsx
@@ -7,10 +7,9 @@ import { useReports } from 'loot-core/src/client/data-hooks/reports';
import { useAccounts } from '../../hooks/useAccounts';
import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useNavigate } from '../../hooks/useNavigate';
import { useResponsive } from '../../ResponsiveProvider';
-import { Button } from '../common/Button';
-import { Link } from '../common/Link';
-import { Text } from '../common/Text';
+import { Button } from '../common/Button2';
import { View } from '../common/View';
import { MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs';
import { MobilePageHeader, Page, PageHeader } from '../Page';
@@ -23,6 +22,7 @@ import { SpendingCard } from './reports/SpendingCard';
export function Overview() {
const { data: customReports } = useReports();
const { isNarrowWidth } = useResponsive();
+ const navigate = useNavigate();
const location = useLocation();
sessionStorage.setItem('url', location.pathname);
@@ -45,11 +45,12 @@ export function Overview() {
>
<PageHeader title="Reports" />
{!isNarrowWidth && (
- <Link to="/reports/custom" style={{ textDecoration: 'none' }}>
- <Button type="primary">
- <Text>Create new custom report</Text>
- </Button>
- </Link>
+ <Button
+ variant="primary"
+ onPress={() => navigate('/reports/custom')}
+ >
+ Create new custom report
+ </Button>
)}
</View>
)
diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.tsx b/packages/desktop-client/src/components/reports/ReportSidebar.tsx
index 5745827c34b440bd7fe988b7e0fa6282415f1c63..3bf4fdcf3d5153eb8d2d3e089f8a37567b5f531a 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.tsx
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.tsx
@@ -9,7 +9,7 @@ import { type SyncedPrefs } from 'loot-core/types/prefs';
import { styles } from '../../style/styles';
import { theme } from '../../style/theme';
import { Information } from '../alerts';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
import { Menu } from '../common/Menu';
import { Popover } from '../common/Popover';
import { Select } from '../common/Select';
@@ -275,7 +275,7 @@ export function ReportSidebar({
<Text style={{ width: 50, textAlign: 'right', marginRight: 5 }} />
<Button
ref={triggerRef}
- onClick={() => {
+ onPress={() => {
setMenuOpen(true);
}}
style={{
diff --git a/packages/desktop-client/src/components/reports/SaveReport.tsx b/packages/desktop-client/src/components/reports/SaveReport.tsx
index e961d8e2d1cbd31520b8df12a1c44515f1c9683a..09f7a0492c8cd71c771f7a371990bd8a7c10ee70 100644
--- a/packages/desktop-client/src/components/reports/SaveReport.tsx
+++ b/packages/desktop-client/src/components/reports/SaveReport.tsx
@@ -5,7 +5,7 @@ import { send, sendCatch } from 'loot-core/src/platform/client/fetch';
import { type CustomReportEntity } from 'loot-core/src/types/models';
import { SvgExpandArrow } from '../../icons/v0';
-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';
@@ -159,8 +159,8 @@ export function SaveReport({
>
<Button
ref={triggerRef}
- type="bare"
- onClick={() => {
+ variant="bare"
+ onPress={() => {
setMenuOpen(true);
}}
>
diff --git a/packages/desktop-client/src/components/reports/SaveReportChoose.tsx b/packages/desktop-client/src/components/reports/SaveReportChoose.tsx
index 0b747ee6ed3d01a17e5082d68110962eb0a09e2b..43f396176f96eb8214d0545fc964817ce9142e82 100644
--- a/packages/desktop-client/src/components/reports/SaveReportChoose.tsx
+++ b/packages/desktop-client/src/components/reports/SaveReportChoose.tsx
@@ -1,7 +1,7 @@
import React, { createRef, useEffect, useState } from 'react';
import { theme } from '../../style/theme';
-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';
@@ -48,9 +48,8 @@ export function SaveReportChoose({ onApply }: SaveReportChooseProps) {
>
<View style={{ flex: 1 }} />
<Button
- type="primary"
- onClick={e => {
- e.preventDefault();
+ variant="primary"
+ onPress={() => {
if (!value) {
setErr('Invalid report entered');
return;
diff --git a/packages/desktop-client/src/components/reports/SaveReportDelete.tsx b/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
index 3a5b95fedb9c7e3fe28f88875d200dec2fb4913d..7a8da58a5bb5466d9f2bcd2a2a30d49c50ab8396 100644
--- a/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
+++ b/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { theme } from '../../style/theme';
-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';
@@ -33,10 +33,10 @@ export function SaveReportDelete({
style={{ marginTop: 15 }}
>
<View style={{ flex: 1 }} />
- <Button type="primary" onClick={onDelete}>
+ <Button variant="primary" onPress={onDelete}>
Yes
</Button>
- <Button type="primary" onClick={onClose}>
+ <Button variant="primary" onPress={onClose}>
No
</Button>
</Stack>
diff --git a/packages/desktop-client/src/components/reports/SaveReportName.tsx b/packages/desktop-client/src/components/reports/SaveReportName.tsx
index ee6bd8e51bfbf59ba64c959046bed2577632d693..fd3f2c5e5ab7e0a42bc1dfe378451c586bfda3b7 100644
--- a/packages/desktop-client/src/components/reports/SaveReportName.tsx
+++ b/packages/desktop-client/src/components/reports/SaveReportName.tsx
@@ -3,7 +3,7 @@ import React, { type RefObject, useEffect } from 'react';
import { type CustomReportEntity } from 'loot-core/types/models/reports';
import { theme } from '../../style';
-import { Button } from '../common/Button';
+import { Button } from '../common/Button2';
import { Input } from '../common/Input';
import { Stack } from '../common/Stack';
import { Text } from '../common/Text';
@@ -66,10 +66,9 @@ export function SaveReportName({
/>
</FormField>
<Button
- type="primary"
+ variant="primary"
style={{ marginTop: 30 }}
- onClick={e => {
- e.preventDefault();
+ onPress={() => {
onAddUpdate({
menuChoice: menuItem ?? undefined,
reportData: report ?? undefined,
diff --git a/packages/desktop-client/src/components/reports/reports/CashFlow.tsx b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx
index 949f7dd93fd58ab0577bb6956e1ed79ea4a7814f..88f6733ef4f12afc925b21438faae174e13d410f 100644
--- a/packages/desktop-client/src/components/reports/reports/CashFlow.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx
@@ -13,7 +13,7 @@ import { useResponsive } from '../../../ResponsiveProvider';
import { theme } from '../../../style';
import { AlignedText } from '../../common/AlignedText';
import { Block } from '../../common/Block';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
import { Paragraph } from '../../common/Paragraph';
import { Text } from '../../common/Text';
import { View } from '../../common/View';
@@ -143,7 +143,7 @@ export function CashFlow() {
justifyContent: 'flex-end',
}}
>
- <Button onClick={() => setShowBalance(state => !state)}>
+ <Button onPress={() => setShowBalance(state => !state)}>
{showBalance ? 'Hide balance' : 'Show balance'}
</Button>
</View>
diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx
index 8de238dfc10a038a3fe8cc460cf1448496691f96..efbff45ed19d6e2dc55010ba3fac761b245c61a6 100644
--- a/packages/desktop-client/src/components/reports/reports/Spending.tsx
+++ b/packages/desktop-client/src/components/reports/reports/Spending.tsx
@@ -11,7 +11,7 @@ import { useResponsive } from '../../../ResponsiveProvider';
import { theme, styles } from '../../../style';
import { AlignedText } from '../../common/AlignedText';
import { Block } from '../../common/Block';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
import { Paragraph } from '../../common/Paragraph';
import { Select } from '../../common/Select';
import { Text } from '../../common/Text';
@@ -261,12 +261,12 @@ export function Spending() {
}}
>
<Button
- type="primary"
+ variant="primary"
style={{
marginLeft: 10,
}}
- onClick={saveFilter}
- disabled={filterSaved ? true : false}
+ onPress={saveFilter}
+ isDisabled={filterSaved}
>
{filterSaved ? 'Saved' : 'Save'}
</Button>
diff --git a/upcoming-release-notes/3159.md b/upcoming-release-notes/3159.md
new file mode 100644
index 0000000000000000000000000000000000000000..5694a09958c269bfbafce94c1ff2421ff933aab7
--- /dev/null
+++ b/upcoming-release-notes/3159.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Use new react-aria-components based Button on reports page.