From 5e9b97667609f160a1e8373d00b5424632db443a Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Mon, 5 Aug 2024 19:45:30 -0700
Subject: [PATCH] [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
---
.../src/components/budget/BudgetTotals.tsx | 8 +-
.../src/components/budget/IncomeHeader.tsx | 4 +-
.../src/components/budget/SidebarCategory.tsx | 10 +-
.../src/components/budget/SidebarGroup.tsx | 9 +-
.../budget/report/ReportComponents.tsx | 9 +-
.../report/budgetsummary/BudgetSummary.tsx | 10 +-
.../components/budget/rollover/CoverMenu.tsx | 6 +-
.../components/budget/rollover/HoldMenu.tsx | 6 +-
.../budget/rollover/RolloverComponents.tsx | 9 +-
.../budget/rollover/TransferMenu.tsx | 6 +-
.../rollover/budgetsummary/BudgetSummary.tsx | 10 +-
.../components/mobile/budget/BudgetTable.jsx | 170 +++++++-----------
upcoming-release-notes/3156.md | 6 +
13 files changed, 109 insertions(+), 154 deletions(-)
create mode 100644 upcoming-release-notes/3156.md
diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.tsx b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
index 7126ff4d6..65c2dff9a 100644
--- 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
diff --git a/packages/desktop-client/src/components/budget/IncomeHeader.tsx b/packages/desktop-client/src/components/budget/IncomeHeader.tsx
index 344a3f9d9..ad9fbda82 100644
--- 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>
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index 0504c8d03..fb4d860cf 100644
--- 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}
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index c01ef2bc6..417dce8e6 100644
--- 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} />
diff --git a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
index 5cd9480f8..02c49d315 100644
--- 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,
}}
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
index 990121924..6f524a60e 100644
--- 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}
diff --git a/packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx b/packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx
index dd8de39fb..b15a28252 100644
--- 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>
diff --git a/packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx b/packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx
index c935e7f10..3bf1a79df 100644
--- 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>
diff --git a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
index 597e137e9..7cd187d60 100644
--- 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,
}}
diff --git a/packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx b/packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx
index 6d0dcf7aa..76df5c655 100644
--- 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>
diff --git a/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
index b4d8f704d..0ce4d5c88 100644
--- 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}
diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index 5a520cd7a..3e8d031f9 100644
--- 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>
diff --git a/upcoming-release-notes/3156.md b/upcoming-release-notes/3156.md
new file mode 100644
index 000000000..3d7c88233
--- /dev/null
+++ 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.
--
GitLab