Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Aria Button as base of Button component #2904

Open
wants to merge 10 commits into
base: master
Choose a base branch
from

Conversation

joel-jeremy
Copy link
Contributor

@joel-jeremy joel-jeremy commented Jun 19, 2024

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.

@github-actions github-actions bot changed the title React Aria Button as base of Button component [WIP] React Aria Button as base of Button component Jun 19, 2024
Copy link

netlify bot commented Jun 19, 2024

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 37ba9cf
🔍 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...

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 github-actions bot added the 🚧 WIP Still work-in-progress, please don't review and don't merge label Jun 19, 2024
Copy link
Contributor

github-actions bot commented Jun 19, 2024

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%

Copy link
Contributor

github-actions bot commented Jun 19, 2024

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%

@joel-jeremy joel-jeremy changed the title [WIP] React Aria Button as base of Button component React Aria Button as base of Button component Jun 21, 2024
@github-actions github-actions bot added 🔍 Ready for Review Pull Request is not reviewed yet and removed 🚧 WIP Still work-in-progress, please don't review and don't merge labels Jun 21, 2024
@MatissJanis
Copy link
Member

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
Copy link
Contributor Author

joel-jeremy commented Jun 26, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔍 Ready for Review Pull Request is not reviewed yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants