github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-04-30 10:14:53 -05:00
Code Issues 1.4k Packages Projects Releases 54 Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Joel Jeremy Marquez
2024-08-05 19:45:30 -07:00
committed by GitHub
parent 44ce976ffa
commit 5e9b976676
13 changed files with 109 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/desktop-client/src/components/budget/BudgetTotals.tsx
View File

@@ -2,7 +2,7 @@ import React, { type ComponentProps, memo, useRef, useState } from 'react';
import { SvgDotsHorizontalTriple } from '../../icons/v1'; import { SvgDotsHorizontalTriple } from '../../icons/v1';
import { theme, styles } from '../../style'; import { theme, styles } from '../../style';
import { Button } from '../common/Button'; import { Button } from '../common/Button2';
import { Menu } from '../common/Menu'; import { Menu } from '../common/Menu';
import { Popover } from '../common/Popover'; import { Popover } from '../common/Popover';
import { View } from '../common/View'; import { View } from '../common/View';
@@ -57,11 +57,9 @@ export const BudgetTotals = memo(function BudgetTotals({
<View style={{ flexGrow: '1' }}>Category</View> <View style={{ flexGrow: '1' }}>Category</View>
<Button <Button
ref={triggerRef} ref={triggerRef}
type="bare" variant="bare"
aria-label="Menu" aria-label="Menu"
onClick={() => { onPress={() => setMenuOpen(true)}
setMenuOpen(true);
}}
style={{ color: 'currentColor', padding: 3 }} style={{ color: 'currentColor', padding: 3 }}
> >
<SvgDotsHorizontalTriple <SvgDotsHorizontalTriple

4
packages/desktop-client/src/components/budget/IncomeHeader.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Button } from '../common/Button'; import { Button } from '../common/Button2';
import { View } from '../common/View'; import { View } from '../common/View';
import { RenderMonths } from './RenderMonths'; import { RenderMonths } from './RenderMonths';
@@ -23,7 +23,7 @@ export function IncomeHeader({
justifyContent: 'flex-start', justifyContent: 'flex-start',
}} }}
> >
<Button onClick={onShowNewGroup} style={{ fontSize: 12, margin: 10 }}> <Button onPress={onShowNewGroup} style={{ fontSize: 12, margin: 10 }}>
Add Group Add Group
</Button> </Button>
</View> </View>

10
packages/desktop-client/src/components/budget/SidebarCategory.tsx
View File

@@ -8,7 +8,7 @@ import {
import { SvgCheveronDown } from '../../icons/v1'; import { SvgCheveronDown } from '../../icons/v1';
import { theme } from '../../style'; import { theme } from '../../style';
import { Button } from '../common/Button'; import { Button } from '../common/Button2';
import { Menu } from '../common/Menu'; import { Menu } from '../common/Menu';
import { Popover } from '../common/Popover'; import { Popover } from '../common/Popover';
import { View } from '../common/View'; import { View } from '../common/View';
@@ -57,6 +57,7 @@ export function SidebarCategory({
userSelect: 'none', userSelect: 'none',
WebkitUserSelect: 'none', WebkitUserSelect: 'none',
opacity: category.hidden || categoryGroup?.hidden ? 0.33 : undefined, opacity: category.hidden || categoryGroup?.hidden ? 0.33 : undefined,
backgroundColor: 'transparent',
}} }}
> >
<div <div
@@ -72,13 +73,10 @@ export function SidebarCategory({
</div> </div>
<View style={{ flexShrink: 0, marginLeft: 5 }} ref={triggerRef}> <View style={{ flexShrink: 0, marginLeft: 5 }} ref={triggerRef}>
<Button <Button
type="bare" variant="bare"
className="hover-visible" className="hover-visible"
onClick={e => {
e.stopPropagation();
setMenuOpen(true);
}}
style={{ color: 'currentColor', padding: 3 }} style={{ color: 'currentColor', padding: 3 }}
onPress={() => setMenuOpen(true)}
> >
<SvgCheveronDown <SvgCheveronDown
width={14} width={14}

9
packages/desktop-client/src/components/budget/SidebarGroup.tsx
View File

@@ -5,7 +5,7 @@ import { type ConnectDragSource } from 'react-dnd';
import { SvgExpandArrow } from '../../icons/v0'; import { SvgExpandArrow } from '../../icons/v0';
import { SvgCheveronDown } from '../../icons/v1'; import { SvgCheveronDown } from '../../icons/v1';
import { theme } from '../../style'; import { theme } from '../../style';
import { Button } from '../common/Button'; import { Button } from '../common/Button2';
import { Menu } from '../common/Menu'; import { Menu } from '../common/Menu';
import { Popover } from '../common/Popover'; import { Popover } from '../common/Popover';
import { Text } from '../common/Text'; import { Text } from '../common/Text';
@@ -94,12 +94,9 @@ export function SidebarGroup({
<> <>
<View style={{ marginLeft: 5, flexShrink: 0 }} ref={triggerRef}> <View style={{ marginLeft: 5, flexShrink: 0 }} ref={triggerRef}>
<Button <Button
type="bare" variant="bare"
className="hover-visible" className="hover-visible"
onClick={e => { onPress={() => setMenuOpen(true)}
e.stopPropagation();
setMenuOpen(true);
}}
style={{ padding: 3 }} style={{ padding: 3 }}
> >
<SvgCheveronDown width={14} height={14} /> <SvgCheveronDown width={14} height={14} />

9
packages/desktop-client/src/components/budget/report/ReportComponents.tsx
View File

@@ -7,7 +7,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
import { SvgCheveronDown } from '../../../icons/v1'; import { SvgCheveronDown } from '../../../icons/v1';
import { styles, theme, type CSSProperties } from '../../../style'; import { styles, theme, type CSSProperties } from '../../../style';
import { Button } from '../../common/Button'; import { Button } from '../../common/Button2';
import { Popover } from '../../common/Popover'; import { Popover } from '../../common/Popover';
import { Text } from '../../common/Text'; import { Text } from '../../common/Text';
import { View } from '../../common/View'; import { View } from '../../common/View';
@@ -206,11 +206,8 @@ export const CategoryMonth = memo(function CategoryMonth({
> >
<Button <Button
ref={triggerRef} ref={triggerRef}
type="bare" variant="bare"
onClick={e => { onPress={() => setMenuOpen(true)}
e.stopPropagation();
setMenuOpen(true);
}}
style={{ style={{
padding: 3, padding: 3,
}} }}

10
packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
View File

@@ -8,7 +8,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
import { SvgDotsHorizontalTriple } from '../../../../icons/v1'; import { SvgDotsHorizontalTriple } from '../../../../icons/v1';
import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2'; import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2';
import { theme, styles } from '../../../../style'; import { theme, styles } from '../../../../style';
import { Button } from '../../../common/Button'; import { Button } from '../../../common/Button2';
import { Popover } from '../../../common/Popover'; import { Popover } from '../../../common/Popover';
import { Stack } from '../../../common/Stack'; import { Stack } from '../../../common/Stack';
import { View } from '../../../common/View'; import { View } from '../../../common/View';
@@ -84,10 +84,10 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
}} }}
> >
<Button <Button
type="bare" variant="bare"
aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`} aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`}
className="hover-visible" className="hover-visible"
onClick={onToggleSummaryCollapse} onPress={onToggleSummaryCollapse}
> >
<ExpandOrCollapseIcon <ExpandOrCollapseIcon
width={13} width={13}
@@ -133,9 +133,9 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
<View style={{ userSelect: 'none' }}> <View style={{ userSelect: 'none' }}>
<Button <Button
ref={triggerRef} ref={triggerRef}
type="bare" variant="bare"
aria-label="Menu" aria-label="Menu"
onClick={onMenuOpen} onPress={onMenuOpen}
> >
<SvgDotsHorizontalTriple <SvgDotsHorizontalTriple
width={15} width={15}

6
packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx
View File

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useCategories } from '../../../hooks/useCategories'; import { useCategories } from '../../../hooks/useCategories';
import { CategoryAutocomplete } from '../../autocomplete/CategoryAutocomplete'; import { CategoryAutocomplete } from '../../autocomplete/CategoryAutocomplete';
import { Button } from '../../common/Button'; import { Button } from '../../common/Button2';
import { InitialFocus } from '../../common/InitialFocus'; import { InitialFocus } from '../../common/InitialFocus';
import { View } from '../../common/View'; import { View } from '../../common/View';
import { addToBeBudgetedGroup } from '../util'; import { addToBeBudgetedGroup } from '../util';
@@ -61,12 +61,12 @@ export function CoverMenu({
}} }}
> >
<Button <Button
type="primary" variant="primary"
style={{ style={{
fontSize: 12, fontSize: 12,
paddingTop: 3, paddingTop: 3,
}} }}
onClick={submit} onPress={submit}
> >
Transfer Transfer
</Button> </Button>

6
packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx
View File

@@ -9,7 +9,7 @@ import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
import { evalArithmetic } from 'loot-core/src/shared/arithmetic'; import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util'; 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 { InitialFocus } from '../../common/InitialFocus';
import { Input } from '../../common/Input'; import { Input } from '../../common/Input';
import { View } from '../../common/View'; import { View } from '../../common/View';
@@ -66,13 +66,13 @@ export function HoldMenu({ onSubmit, onClose }: HoldMenuProps) {
}} }}
> >
<Button <Button
type="primary" variant="primary"
style={{ style={{
fontSize: 12, fontSize: 12,
paddingTop: 3, paddingTop: 3,
paddingBottom: 3, paddingBottom: 3,
}} }}
onClick={() => submit(amount)} onPress={() => submit(amount)}
> >
Hold Hold
</Button> </Button>

9
packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
View File

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

6
packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx
View File

@@ -5,7 +5,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
import { useCategories } from '../../../hooks/useCategories'; import { useCategories } from '../../../hooks/useCategories';
import { CategoryAutocomplete } from '../../autocomplete/CategoryAutocomplete'; import { CategoryAutocomplete } from '../../autocomplete/CategoryAutocomplete';
import { Button } from '../../common/Button'; import { Button } from '../../common/Button2';
import { InitialFocus } from '../../common/InitialFocus'; import { InitialFocus } from '../../common/InitialFocus';
import { Input } from '../../common/Input'; import { Input } from '../../common/Input';
import { View } from '../../common/View'; import { View } from '../../common/View';
@@ -79,13 +79,13 @@ export function TransferMenu({
}} }}
> >
<Button <Button
type="primary" variant="primary"
style={{ style={{
fontSize: 12, fontSize: 12,
paddingTop: 3, paddingTop: 3,
paddingBottom: 3, paddingBottom: 3,
}} }}
onClick={() => _onSubmit(amount, categoryId)} onPress={() => _onSubmit(amount, categoryId)}
> >
Transfer Transfer
</Button> </Button>

10
packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
View File

@@ -7,7 +7,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
import { SvgDotsHorizontalTriple } from '../../../../icons/v1'; import { SvgDotsHorizontalTriple } from '../../../../icons/v1';
import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2'; import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2';
import { theme, styles } from '../../../../style'; import { theme, styles } from '../../../../style';
import { Button } from '../../../common/Button'; import { Button } from '../../../common/Button2';
import { Popover } from '../../../common/Popover'; import { Popover } from '../../../common/Popover';
import { View } from '../../../common/View'; import { View } from '../../../common/View';
import { NotesButton } from '../../../NotesButton'; import { NotesButton } from '../../../NotesButton';
@@ -85,10 +85,10 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
}} }}
> >
<Button <Button
type="bare" variant="bare"
aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`} aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`}
className="hover-visible" className="hover-visible"
onClick={onToggleSummaryCollapse} onPress={onToggleSummaryCollapse}
> >
<ExpandOrCollapseIcon <ExpandOrCollapseIcon
width={13} width={13}
@@ -135,9 +135,9 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
<View style={{ userSelect: 'none', marginLeft: 2 }}> <View style={{ userSelect: 'none', marginLeft: 2 }}>
<Button <Button
ref={triggerRef} ref={triggerRef}
type="bare" variant="bare"
aria-label="Menu" aria-label="Menu"
onClick={onMenuOpen} onPress={onMenuOpen}
> >
<SvgDotsHorizontalTriple <SvgDotsHorizontalTriple
width={15} width={15}

170
packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
View File

@@ -24,7 +24,7 @@ import { useResponsive } from '../../../ResponsiveProvider';
import { theme, styles } from '../../../style'; import { theme, styles } from '../../../style';
import { BalanceWithCarryover } from '../../budget/BalanceWithCarryover'; import { BalanceWithCarryover } from '../../budget/BalanceWithCarryover';
import { makeAmountGrey, makeBalanceAmountStyle } from '../../budget/util'; import { makeAmountGrey, makeBalanceAmountStyle } from '../../budget/util';
import { Button } from '../../common/Button'; import { Button } from '../../common/Button2';
import { Card } from '../../common/Card'; import { Card } from '../../common/Card';
import { Label } from '../../common/Label'; import { Label } from '../../common/Label';
import { Text } from '../../common/Text'; import { Text } from '../../common/Text';
@@ -53,7 +53,7 @@ function getColumnWidth({ show3Cols, isSidebar = false, offset = 0 } = {}) {
return show3Cols ? `${35 + offset}vw` : `${45 + offset}vw`; return show3Cols ? `${35 + offset}vw` : `${45 + offset}vw`;
} }
function ToBudget({ toBudget, onClick, show3Cols }) { function ToBudget({ toBudget, onPress, show3Cols }) {
const amount = useSheetValue(toBudget); const amount = useSheetValue(toBudget);
const format = useFormat(); const format = useFormat();
const sidebarColumnWidth = getColumnWidth({ show3Cols, isSidebar: true }); const sidebarColumnWidth = getColumnWidth({ show3Cols, isSidebar: true });
@@ -68,12 +68,9 @@ function ToBudget({ toBudget, onClick, show3Cols }) {
}} }}
> >
<Button <Button
type="bare" variant="bare"
style={{ maxWidth: sidebarColumnWidth }} style={{ maxWidth: sidebarColumnWidth }}
onPointerUp={e => { onPress={onPress}
e.stopPropagation();
onClick?.();
}}
> >
<View> <View>
<Label <Label
@@ -121,7 +118,7 @@ function ToBudget({ toBudget, onClick, show3Cols }) {
); );
} }
function Saved({ projected, onClick, show3Cols }) { function Saved({ projected, onPress, show3Cols }) {
const binding = projected const binding = projected
? reportBudget.totalBudgetedSaved ? reportBudget.totalBudgetedSaved
: reportBudget.totalSaved; : reportBudget.totalSaved;
@@ -141,12 +138,9 @@ function Saved({ projected, onClick, show3Cols }) {
}} }}
> >
<Button <Button
type="bare" variant="bare"
style={{ maxWidth: sidebarColumnWidth }} style={{ maxWidth: sidebarColumnWidth }}
onPointerUp={e => { onPress={onPress}
e.stopPropagation();
onClick?.();
}}
> >
<View> <View>
<View> <View>
@@ -448,14 +442,11 @@ const ExpenseCategory = memo(function ExpenseCategory({
}} }}
> >
<Button <Button
type="bare" variant="bare"
style={{ style={{
maxWidth: sidebarColumnWidth, maxWidth: sidebarColumnWidth,
}} }}
onPointerUp={e => { onPress={() => onEdit?.(category.id)}
e.stopPropagation();
onEdit?.(category.id);
}}
> >
<View <View
style={{ style={{
@@ -507,7 +498,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
onBudgetAction={onBudgetAction} onBudgetAction={onBudgetAction}
formatter={value => ( formatter={value => (
<Button <Button
type="bare" variant="bare"
style={{ style={{
...PILL_STYLE, ...PILL_STYLE,
maxWidth: columnWidth, maxWidth: columnWidth,
@@ -550,7 +541,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
}} }}
formatter={value => ( formatter={value => (
<Button <Button
type="bare" variant="bare"
style={{ style={{
...PILL_STYLE, ...PILL_STYLE,
maxWidth: columnWidth, maxWidth: columnWidth,
@@ -597,7 +588,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
longGoal={longGoal} longGoal={longGoal}
formatter={value => ( formatter={value => (
<Button <Button
type="bare" variant="bare"
style={{ style={{
...PILL_STYLE, ...PILL_STYLE,
maxWidth: columnWidth, maxWidth: columnWidth,
@@ -727,22 +718,16 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
}} }}
> >
<Button <Button
type="bare" variant="bare"
style={{ style={({ isPressed, isHovered }) => ({
flexShrink: 0, flexShrink: 0,
color: theme.pageTextSubdued, color: theme.pageTextSubdued,
...styles.noTapHighlight, ...styles.noTapHighlight,
}} ...(isPressed || isHovered
activeStyle={{ ? { backgroundColor: 'transparent' }
backgroundColor: 'transparent', : {}),
}} })}
hoveredStyle={{ onPress={() => onToggleCollapse?.(group.id)}
backgroundColor: 'transparent',
}}
onPointerUp={e => {
e.stopPropagation();
onToggleCollapse?.(group.id);
}}
> >
<SvgExpandArrow <SvgExpandArrow
width={8} width={8}
@@ -755,14 +740,11 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
/> />
</Button> </Button>
<Button <Button
type="bare" variant="bare"
style={{ style={{
maxWidth: sidebarColumnWidth, maxWidth: sidebarColumnWidth,
}} }}
onPointerUp={e => { onPress={() => onEdit?.(group.id)}
e.stopPropagation();
onEdit?.(group.id);
}}
> >
<View <View
style={{ style={{
@@ -960,22 +942,16 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
}} }}
> >
<Button <Button
type="bare" variant="bare"
style={{ style={({ isPressed, isHovered }) => ({
flexShrink: 0, flexShrink: 0,
color: theme.pageTextSubdued, color: theme.pageTextSubdued,
...styles.noTapHighlight, ...styles.noTapHighlight,
}} ...(isPressed || isHovered
activeStyle={{ ? { backgroundColor: 'transparent' }
backgroundColor: 'transparent', : {}),
}} })}
hoveredStyle={{ onPress={() => onToggleCollapse?.(group.id)}
backgroundColor: 'transparent',
}}
onPointerUp={e => {
e.stopPropagation();
onToggleCollapse?.(group.id);
}}
> >
<SvgExpandArrow <SvgExpandArrow
width={8} width={8}
@@ -988,14 +964,11 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
/> />
</Button> </Button>
<Button <Button
type="bare" variant="bare"
style={{ style={{
maxWidth: sidebarColumnWidth, maxWidth: sidebarColumnWidth,
}} }}
onPointerUp={e => { onPress={() => onEdit?.(group.id)}
e.stopPropagation();
onEdit?.(group.id);
}}
> >
<View <View
style={{ style={{
@@ -1137,14 +1110,11 @@ const IncomeCategory = memo(function IncomeCategory({
}} }}
> >
<Button <Button
type="bare" variant="bare"
style={{ style={{
maxWidth: sidebarColumnWidth, maxWidth: sidebarColumnWidth,
}} }}
onPointerUp={e => { onPress={() => onEdit?.(category.id)}
e.stopPropagation();
onEdit?.(category.id);
}}
> >
<View <View
style={{ style={{
@@ -1195,7 +1165,7 @@ const IncomeCategory = memo(function IncomeCategory({
onBudgetAction={onBudgetAction} onBudgetAction={onBudgetAction}
formatter={value => ( formatter={value => (
<Button <Button
type="bare" variant="bare"
style={{ ...PILL_STYLE, maxWidth: columnWidth }} style={{ ...PILL_STYLE, maxWidth: columnWidth }}
> >
<AutoTextSize <AutoTextSize
@@ -1669,17 +1639,13 @@ export function BudgetTable({
} }
leftContent={ leftContent={
<Button <Button
type="bare" variant="bare"
style={{ style={({ isPressed, isHovered }) => ({
color: theme.mobileHeaderText, color: theme.mobileHeaderText,
margin: 10, margin: 10,
}} ...(isPressed || isHovered ? noBackgroundColorStyle : {}),
hoveredStyle={noBackgroundColorStyle} })}
activeStyle={noBackgroundColorStyle} onPress={onOpenBudgetPageMenu}
onPointerUp={e => {
e.stopPropagation();
onOpenBudgetPageMenu?.();
}}
> >
<SvgLogo width="20" height="20" /> <SvgLogo width="20" height="20" />
<SvgCheveronRight <SvgCheveronRight
@@ -1775,13 +1741,13 @@ function BudgetTableHeader({
{type === 'report' ? ( {type === 'report' ? (
<Saved <Saved
projected={month >= monthUtils.currentMonth()} projected={month >= monthUtils.currentMonth()}
onClick={onShowBudgetSummary} onPress={onShowBudgetSummary}
show3Cols={show3Cols} show3Cols={show3Cols}
/> />
) : ( ) : (
<ToBudget <ToBudget
toBudget={rolloverBudget.toBudget} toBudget={rolloverBudget.toBudget}
onClick={onShowBudgetSummary} onPress={onShowBudgetSummary}
show3Cols={show3Cols} show3Cols={show3Cols}
/> />
)} )}
@@ -1801,12 +1767,9 @@ function BudgetTableHeader({
}} }}
> >
<Button <Button
type="bare" variant="bare"
disabled={show3Cols} isDisabled={show3Cols}
onPointerUp={e => { onPress={toggleSpentColumn}
e.stopPropagation();
toggleSpentColumn();
}}
style={buttonStyle} style={buttonStyle}
> >
<View style={{ alignItems: 'flex-end' }}> <View style={{ alignItems: 'flex-end' }}>
@@ -1865,12 +1828,9 @@ function BudgetTableHeader({
}} }}
> >
<Button <Button
type="bare" variant="bare"
disabled={show3Cols} isDisabled={show3Cols}
onPointerUp={e => { onPress={toggleSpentColumn()}
e.stopPropagation();
toggleSpentColumn();
}}
style={buttonStyle} style={buttonStyle}
> >
<View style={{ alignItems: 'flex-end' }}> <View style={{ alignItems: 'flex-end' }}>
@@ -1983,23 +1943,24 @@ function MonthSelector({
}} }}
> >
<Button <Button
type="bare" variant="bare"
onPointerUp={e => { onPress={() => {
e.stopPropagation();
if (prevEnabled) { if (prevEnabled) {
onPrevMonth(); onPrevMonth();
} }
}} }}
style={{ style={({ isHovered }) => ({
...styles.noTapHighlight, ...styles.noTapHighlight,
...arrowButtonStyle, ...arrowButtonStyle,
opacity: prevEnabled ? 1 : 0.6, opacity: prevEnabled ? 1 : 0.6,
color: theme.mobileHeaderText, color: theme.mobileHeaderText,
}} ...(isHovered
hoveredStyle={{ ? {
color: theme.mobileHeaderText, color: theme.mobileHeaderText,
background: theme.mobileHeaderTextHover, background: theme.mobileHeaderTextHover,
}} }
: {}),
})}
> >
<SvgArrowThinLeft width="15" height="15" style={{ margin: -5 }} /> <SvgArrowThinLeft width="15" height="15" style={{ margin: -5 }} />
</Button> </Button>
@@ -2020,23 +1981,24 @@ function MonthSelector({
{monthUtils.format(month, 'MMMM ‘yy')} {monthUtils.format(month, 'MMMM ‘yy')}
</Text> </Text>
<Button <Button
type="bare" variant="bare"
onPointerUp={e => { onPress={() => {
e.stopPropagation();
if (nextEnabled) { if (nextEnabled) {
onNextMonth(); onNextMonth();
} }
}} }}
style={{ style={({ isHovered }) => ({
...styles.noTapHighlight, ...styles.noTapHighlight,
...arrowButtonStyle, ...arrowButtonStyle,
opacity: nextEnabled ? 1 : 0.6, opacity: nextEnabled ? 1 : 0.6,
color: theme.mobileHeaderText, color: theme.mobileHeaderText,
}} ...(isHovered
hoveredStyle={{ ? {
color: theme.mobileHeaderText, color: theme.mobileHeaderText,
background: theme.mobileHeaderTextHover, background: theme.mobileHeaderTextHover,
}} }
: {}),
})}
> >
<SvgArrowThinRight width="15" height="15" style={{ margin: -5 }} /> <SvgArrowThinRight width="15" height="15" style={{ margin: -5 }} />
</Button> </Button>

6
upcoming-release-notes/3156.md Normal file
View File

@@ -0,0 +1,6 @@
---
category: Maintenance
authors: [joel-jeremy]
---
Use new react-aria-components based Button on desktop and mobile budget pages.