React Aria Button as base of Button component

[joel-jeremy]

This will be the first part of a multi-PR effort to migrate all the buttons in the code to use react-aria-components' Button component under the hood. The plan is to do one PR per page to make it easier to review the changes.

This first one migrates the buttons on the schedules page.

[netlify[bot]]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	37ba9cfbd92be0f1d1227dc33e59713c307065c4
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/6675f13dcadc3400080fca53
😎 Deploy Preview	https://deploy-preview-2904.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions[bot]]

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
9	4.76 MB → 4.98 MB (+232.25 kB)	+4.77%

Changeset (largest 100 files by percent change)

File | Δ | Size ---- | - | ---- `node_modules/@react-aria/focus/dist/FocusScope.mjs` | 🆕 +34.1 kB | 0 B → 34.1 kB `node_modules/@react-aria/interactions/dist/usePress.mjs` | 🆕 +30.97 kB | 0 B → 30.97 kB `node_modules/@react-aria/overlays/dist/calculatePosition.mjs` | 🆕 +23.23 kB | 0 B → 23.23 kB `node_modules/@react-aria/overlays/dist/usePreventScroll.mjs` | 🆕 +12.51 kB | 0 B → 12.51 kB `node_modules/@react-aria/interactions/dist/useFocusVisible.mjs` | 🆕 +11.81 kB | 0 B → 11.81 kB `node_modules/react-aria-components/dist/utils.mjs` | 🆕 +9.32 kB | 0 B → 9.32 kB `node_modules/@react-aria/overlays/dist/useOverlayPosition.mjs` | 🆕 +8.8 kB | 0 B → 8.8 kB `node_modules/@react-aria/interactions/dist/useHover.mjs` | 🆕 +6.18 kB | 0 B → 6.18 kB `node_modules/@react-aria/overlays/dist/ariaHideOutside.mjs` | 🆕 +5.87 kB | 0 B → 5.87 kB `node_modules/react-aria-components/dist/Popover.mjs` | 🆕 +5.13 kB | 0 B → 5.13 kB `node_modules/react-aria-components/dist/Tooltip.mjs` | 🆕 +5.08 kB | 0 B → 5.08 kB `src/components/common/Button2.tsx` | 🆕 +4.94 kB | 0 B → 4.94 kB `node_modules/@react-aria/interactions/dist/utils.mjs` | 🆕 +4.81 kB | 0 B → 4.81 kB `node_modules/@react-aria/interactions/dist/useInteractOutside.mjs` | 🆕 +4.55 kB | 0 B → 4.55 kB `node_modules/@react-stately/tooltip/dist/useTooltipTriggerState.mjs` | 🆕 +4.49 kB | 0 B → 4.49 kB `node_modules/@react-aria/overlays/dist/useOverlay.mjs` | 🆕 +4.34 kB | 0 B → 4.34 kB `node_modules/@react-aria/utils/dist/runAfterTransition.mjs` | 🆕 +4.03 kB | 0 B → 4.03 kB `node_modules/@react-aria/interactions/dist/textSelection.mjs` | 🆕 +3.97 kB | 0 B → 3.97 kB `node_modules/@internationalized/string/dist/LocalizedStringDictionary.mjs` | 🆕 +3.89 kB | 0 B → 3.89 kB `node_modules/@react-aria/tooltip/dist/useTooltipTrigger.mjs` | 🆕 +3.86 kB | 0 B → 3.86 kB `node_modules/@react-aria/ssr/dist/SSRProvider.mjs` | 🆕 +3.68 kB | 0 B → 3.68 kB `node_modules/@react-stately/utils/dist/useControlledState.mjs` | 🆕 +3.5 kB | 0 B → 3.5 kB `node_modules/@react-aria/overlays/dist/useModal.mjs` | 🆕 +3.13 kB | 0 B → 3.13 kB `node_modules/@react-aria/button/dist/useButton.mjs` | 🆕 +3.07 kB | 0 B → 3.07 kB `node_modules/@react-aria/interactions/dist/useFocusWithin.mjs` | 🆕 +2.79 kB | 0 B → 2.79 kB `node_modules/react-aria-components/dist/Button.mjs` | 🆕 +2.71 kB | 0 B → 2.71 kB `node_modules/@react-aria/utils/dist/focusWithoutScrolling.mjs` | 🆕 +2.71 kB | 0 B → 2.71 kB `node_modules/@react-aria/i18n/dist/useDefaultLocale.mjs` | 🆕 +2.65 kB | 0 B → 2.65 kB `node_modules/@react-aria/utils/dist/useGlobalListeners.mjs` | 🆕 +2.39 kB | 0 B → 2.39 kB `node_modules/@react-aria/utils/dist/platform.mjs` | 🆕 +2.35 kB | 0 B → 2.35 kB `node_modules/@react-aria/interactions/dist/useFocus.mjs` | 🆕 +2.28 kB | 0 B → 2.28 kB `node_modules/@internationalized/string/dist/LocalizedStringFormatter.mjs` | 🆕 +2.24 kB | 0 B → 2.24 kB `node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.mjs` | 🆕 +2.23 kB | 0 B → 2.23 kB `node_modules/@react-aria/i18n/dist/utils.mjs` | 🆕 +2.2 kB | 0 B → 2.2 kB `node_modules/@react-aria/overlays/dist/usePopover.mjs` | 🆕 +2.18 kB | 0 B → 2.18 kB `node_modules/@react-aria/utils/dist/openLink.mjs` | 🆕 +2.15 kB | 0 B → 2.15 kB `node_modules/@react-aria/utils/dist/isVirtualEvent.mjs` | 🆕 +2.1 kB | 0 B → 2.1 kB `node_modules/@react-aria/focus/dist/isElementVisible.mjs` | 🆕 +2.06 kB | 0 B → 2.06 kB `node_modules/@react-aria/overlays/dist/Overlay.mjs` | 🆕 +1.93 kB | 0 B → 1.93 kB `node_modules/@react-aria/utils/dist/mergeProps.mjs` | 🆕 +1.68 kB | 0 B → 1.68 kB `node_modules/@react-aria/utils/dist/filterDOMProps.mjs` | 🆕 +1.66 kB | 0 B → 1.66 kB `node_modules/@react-aria/overlays/dist/useCloseOnScroll.mjs` | 🆕 +1.62 kB | 0 B → 1.62 kB `node_modules/@react-aria/i18n/dist/useLocalizedStringFormatter.mjs` | 🆕 +1.59 kB | 0 B → 1.59 kB `node_modules/@react-aria/focus/dist/focusSafely.mjs` | 🆕 +1.59 kB | 0 B → 1.59 kB `node_modules/@react-aria/focus/dist/useFocusRing.mjs` | 🆕 +1.51 kB | 0 B → 1.51 kB `node_modules/@react-aria/overlays/dist/intlStrings.mjs` | 🆕 +1.43 kB | 0 B → 1.43 kB `node_modules/@react-aria/utils/dist/useLabels.mjs` | 🆕 +1.42 kB | 0 B → 1.42 kB `node_modules/@react-aria/overlays/dist/DismissButton.mjs` | 🆕 +1.41 kB | 0 B → 1.41 kB `node_modules/@react-aria/interactions/dist/createEventHandler.mjs` | 🆕 +1.37 kB | 0 B → 1.37 kB `node_modules/@react-stately/overlays/dist/useOverlayTriggerState.mjs` | 🆕 +1.27 kB | 0 B → 1.27 kB `node_modules/@react-aria/focus/dist/useFocusable.mjs` | 🆕 +1.26 kB | 0 B → 1.26 kB `node_modules/@react-aria/tooltip/dist/useTooltip.mjs` | 🆕 +1.19 kB | 0 B → 1.19 kB `node_modules/@react-aria/utils/dist/useObjectRef.mjs` | 🆕 +1.11 kB | 0 B → 1.11 kB `node_modules/@react-aria/utils/dist/getScrollParent.mjs` | 🆕 +1.08 kB | 0 B → 1.08 kB `node_modules/@react-aria/utils/dist/useResizeObserver.mjs` | 🆕 +1014 B | 0 B → 1014 B `node_modules/@react-aria/utils/dist/useEffectEvent.mjs` | 🆕 +1012 B | 0 B → 1012 B `node_modules/@react-aria/utils/dist/isScrollable.mjs` | 🆕 +1006 B | 0 B → 1006 B `node_modules/@react-aria/i18n/dist/context.mjs` | 🆕 +960 B | 0 B → 960 B `node_modules/@react-aria/utils/dist/useSyncRef.mjs` | 🆕 +956 B | 0 B → 956 B `node_modules/@react-aria/overlays/dist/PortalProvider.mjs` | 🆕 +947 B | 0 B → 947 B `node_modules/@react-aria/interactions/dist/useKeyboard.mjs` | 🆕 +926 B | 0 B → 926 B `node_modules/@react-stately/utils/dist/number.mjs` | 🆕 +912 B | 0 B → 912 B `node_modules/@react-aria/utils/dist/mergeRefs.mjs` | 🆕 +906 B | 0 B → 906 B `node_modules/@react-aria/utils/dist/chain.mjs` | 🆕 +900 B | 0 B → 900 B `node_modules/@react-aria/interactions/dist/context.mjs` | 🆕 +804 B | 0 B → 804 B `node_modules/react-aria-components/dist/OverlayArrow.mjs` | 🆕 +744 B | 0 B → 744 B `node_modules/@react-aria/utils/dist/useLayoutEffect.mjs` | 🆕 +738 B | 0 B → 738 B `node_modules/@react-aria/utils/dist/useId.mjs` | 🆕 +422 B | 0 B → 422 B `node_modules/@react-aria/interactions/dist/PressResponder.mjs` | 🆕 +318 B | 0 B → 318 B `node_modules/@react-aria/utils/dist/domHelpers.mjs` | 🆕 +250 B | 0 B → 250 B `node_modules/react-aria-components/dist/Dialog.mjs` | 🆕 +98 B | 0 B → 98 B `src/components/common/Button.tsx` | 📈 +42 B (+0.88%) | 4.65 kB → 4.69 kB `src/components/modals/ConfirmTransactionDelete.tsx` | 📈 +4 B (+0.30%) | 1.32 kB → 1.33 kB `src/components/mobile/transactions/AddTransactionButton.tsx` | 📈 +2 B (+0.29%) | 685 B → 687 B `src/components/modals/ConfirmUnlinkAccount.tsx` | 📈 +4 B (+0.26%) | 1.48 kB → 1.48 kB `src/components/mobile/transactions/Option.jsx` | 📈 +2 B (+0.26%) | 764 B → 766 B `src/components/sidebar/ToggleButton.tsx` | 📈 +2 B (+0.26%) | 767 B → 769 B `src/components/schedules/index.tsx` | 📈 +7 B (+0.26%) | 2.68 kB → 2.68 kB `src/components/settings/Themes.tsx` | 📈 +2 B (+0.25%) | 811 B → 813 B `src/components/mobile/MobileBackButton.tsx` | 📈 +2 B (+0.21%) | 944 B → 946 B `src/components/manager/ConfigServer.tsx` | 📈 +12 B (+0.21%) | 5.57 kB → 5.58 kB `node_modules/@react-aria/label/dist/import.mjs` | 📈 +6 B (+0.21%) | 2.81 kB → 2.81 kB `node_modules/@react-aria/listbox/dist/import.mjs` | 📈 +24 B (+0.20%) | 11.71 kB → 11.73 kB `src/components/manager/subscribe/Error.tsx` | 📈 +2 B (+0.20%) | 1003 B → 1005 B `src/components/settings/Encryption.tsx` | 📈 +8 B (+0.20%) | 3.95 kB → 3.96 kB `src/components/settings/Reset.tsx` | 📈 +4 B (+0.18%) | 2.2 kB → 2.2 kB `src/components/manager/Import.tsx` | 📈 +6 B (+0.17%) | 3.38 kB → 3.39 kB `src/components/manager/WelcomeScreen.tsx` | 📈 +6 B (+0.17%) | 3.42 kB → 3.43 kB `src/components/accounts/AccountSyncCheck.jsx` | 📈 +8 B (+0.17%) | 4.67 kB → 4.68 kB `src/components/modals/ConfirmTransactionEdit.tsx` | 📈 +4 B (+0.14%) | 2.74 kB → 2.75 kB `src/components/common/Search.tsx` | 📈 +2 B (+0.13%) | 1.55 kB → 1.56 kB `src/components/settings/Format.tsx` | 📈 +6 B (+0.11%) | 5.16 kB → 5.16 kB `src/components/modals/HoldBufferModal.tsx` | 📈 +2 B (+0.11%) | 1.74 kB → 1.74 kB `src/components/schedules/DiscoverSchedules.tsx` | 📈 +7 B (+0.11%) | 6.22 kB → 6.23 kB `src/components/modals/SingleInputModal.tsx` | 📈 +2 B (+0.11%) | 1.83 kB → 1.83 kB `src/components/modals/NotesModal.tsx` | 📈 +2 B (+0.11%) | 1.84 kB → 1.84 kB `src/components/schedules/ScheduleLink.tsx` | 📈 +3 B (+0.11%) | 2.77 kB → 2.77 kB `src/components/modals/CategoryGroupMenuModal.tsx` | 📈 +6 B (+0.10%) | 5.65 kB → 5.65 kB `src/components/modals/SwitchBudgetTypeModal.tsx` | 📈 +2 B (+0.10%) | 1.92 kB → 1.92 kB `src/components/Titlebar.tsx` | 📈 +12 B (+0.10%) | 11.58 kB → 11.6 kB

View detailed bundle breakdown

**Added** No assets were added **Removed** No assets were removed **Bigger** Asset | File Size | % Changed ----- | --------- | --------- static/js/index.js | 3.02 MB → 3.25 MB (+232.25 kB) | +7.51% static/js/wide.js | 266.96 kB → 266.96 kB (+7 B) | +0.00% **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/indexeddb-main-thread-worker-e59fee74.js | 13.5 kB | 0% static/js/resize-observer.js | 18.37 kB | 0% static/js/usePreviewTransactions.js | 790 B | 0% static/js/BackgroundImage.js | 122.29 kB | 0% static/js/AppliedFilters.js | 27.22 kB | 0% static/js/narrow.js | 75.73 kB | 0% static/js/ReportRouter.js | 1.23 MB | 0%

[github-actions[bot]]

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
1	1.13 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

**Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.js | 1.13 MB | 0%

[MatissJanis]

Might it be easier to keep the existing prop interface for the Button component? But then internally use react-aria. That would allow to do an instant port to react-aria. And then later we could progressively upgrade from the old prop interface to the new one (optional step; maybe we don't "want" to upgrade the prop interface).

Your approach is totally fine too and I'm happy to proceed with it though. Just looking out for your sanity since it's A LOT of buttons that will need to be updated.

[joel-jeremy]

I think this approach is the way to go because right now we won't be able to do a bulk port to the react aria button because there seems to be a compatibility issue with the current modal we have. There is an issue on some places of the code where when clicking a button that opens a modal, the modal gets closed immediately (my assumption is that the modal we have right now detects the onMouseUp event and triggers the "shouldCloseOnInteractOutside" logic). But outside that the new aria buttons works as expected.

I will also be working on porting Modal to use react aria Modal components to address that.