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

♻️ refactoring Select component to use existing Menu #2905

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

Conversation

MatissJanis
Copy link
Member

Refactoring the Select component to use the existing Menu, Popover and Button components. This allows us to remove the @reach/listbox dependency.

There is a slight visual difference. I think the new variation looks better (and more consistent), but LMK if you disagree and we can style it to match the old one.

Copy link

netlify bot commented Jun 19, 2024

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 63a2b58
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/66773f187c907f000889ad69
😎 Deploy Preview https://deploy-preview-2905.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 🔍 Ready for Review Pull Request is not reviewed yet label Jun 19, 2024
@github-actions github-actions bot changed the title ♻️ refactoring Select component to use existing Menu [WIP] ♻️ refactoring Select component to use existing Menu 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.67 MB (-91.29 kB) -1.87%
Changeset
File Δ Size
src/components/reports/ReportSidebar.tsx 📈 +95 B (+0.56%) 16.61 kB → 16.71 kB
src/components/modals/EditRule.jsx 📈 +68 B (+0.19%) 34.46 kB → 34.53 kB
node_modules/@reach/listbox/styles.css +0 B (0%) 0 B → 0 B
node_modules/@react-spring/core/dist/react-spring_core.modern.mjs 📉 -4 B (-0.01%) 58.12 kB → 58.12 kB
node_modules/@react-spring/shared/dist/react-spring_shared.modern.mjs 📉 -2 B (-0.01%) 27.69 kB → 27.69 kB
node_modules/react-dom/cjs/react-dom.production.min.js 📉 -10 B (-0.01%) 130.03 kB → 130.02 kB
src/components/table.tsx 📉 -2 B (-0.01%) 24.11 kB → 24.11 kB
src/components/autocomplete/Autocomplete.tsx 📉 -2 B (-0.01%) 16.27 kB → 16.27 kB
src/components/Titlebar.tsx 📉 -2 B (-0.02%) 11.58 kB → 11.58 kB
src/components/manager/BudgetList.jsx 📉 -2 B (-0.02%) 9.95 kB → 9.95 kB
src/components/schedules/SchedulesTable.tsx 📉 -2 B (-0.02%) 9.95 kB → 9.94 kB
src/components/payees/ManagePayees.jsx 📉 -2 B (-0.02%) 8.79 kB → 8.78 kB
src/components/select/DateSelect.tsx 📉 -2 B (-0.02%) 8.53 kB → 8.53 kB
node_modules/@react-spring/animated/dist/react-spring_animated.modern.mjs 📉 -2 B (-0.02%) 8.15 kB → 8.14 kB
src/components/sidebar/Sidebar.tsx 📉 -2 B (-0.03%) 5.9 kB → 5.9 kB
src/components/modals/CategoryGroupMenuModal.tsx 📉 -2 B (-0.03%) 5.65 kB → 5.64 kB
src/components/modals/CategoryMenuModal.tsx 📉 -2 B (-0.04%) 4.89 kB → 4.89 kB
src/components/modals/AccountMenuModal.tsx 📉 -2 B (-0.04%) 4.76 kB → 4.76 kB
src/components/accounts/AccountSyncCheck.jsx 📉 -2 B (-0.04%) 4.67 kB → 4.67 kB
node_modules/downshift/dist/downshift.esm.js 📉 -20 B (-0.05%) 43.26 kB → 43.24 kB
src/components/LoggedInUser.tsx 📉 -2 B (-0.08%) 2.58 kB → 2.57 kB
node_modules/react-dnd/dist/hooks/useCollector.js 📉 -2 B (-0.18%) 1.07 kB → 1.07 kB
node_modules/react-modal/lib/helpers/tabbable.js 📉 -6 B (-0.21%) 2.8 kB → 2.79 kB
node_modules/compute-scroll-into-view/dist/index.js 📉 -6 B (-0.22%) 2.64 kB → 2.63 kB
node_modules/react-dnd/dist/hooks/useDrag/useRegisteredDragSource.js 📉 -2 B (-0.31%) 650 B → 648 B
node_modules/react-dnd/dist/hooks/useDrop/useRegisteredDropTarget.js 📉 -2 B (-0.33%) 610 B → 608 B
node_modules/react-dnd/dist/hooks/useMonitorOutput.js 📉 -2 B (-0.36%) 553 B → 551 B
src/components/modals/ImportTransactions.jsx 📉 -151 B (-0.38%) 38.47 kB → 38.32 kB
node_modules/react-dnd/dist/hooks/useDrop/useDropTargetConnector.js 📉 -2 B (-0.45%) 448 B → 446 B
node_modules/react-dnd/dist/hooks/useDrag/useDragSourceConnector.js 📉 -4 B (-0.51%) 779 B → 775 B
src/components/filters/FiltersMenu.jsx 📉 -97 B (-0.77%) 12.26 kB → 12.16 kB
package.json 📉 -30 B (-1.02%) 2.87 kB → 2.84 kB
node_modules/react-dnd/dist/hooks/useIsomorphicLayoutEffect.js 📉 -2 B (-1.12%) 178 B → 176 B
node_modules/react-is/cjs/react-is.production.min.js 📉 -48 B (-1.76%) 2.66 kB → 2.61 kB
src/components/select/RecurringSchedulePicker.jsx 📉 -653 B (-3.78%) 16.88 kB → 16.24 kB
node_modules/react-modal/lib/helpers/tabbable.js?commonjs-module 📉 -2 B (-6.45%) 31 B → 29 B
src/components/settings/Format.tsx 📉 -380 B (-7.20%) 5.16 kB → 4.79 kB
src/components/settings/Themes.tsx 📉 -123 B (-15.17%) 811 B → 688 B
src/components/common/Popover.tsx 📉 -164 B (-23.30%) 704 B → 540 B
src/components/common/Select.tsx 📉 -1.13 kB (-31.38%) 3.61 kB → 2.47 kB
node_modules/@reach/listbox/dist/reach-listbox.mjs 🔥 -40.52 kB (-100%) 40.52 kB → 0 B
node_modules/tabbable/dist/index.esm.js 🔥 -17.99 kB (-100%) 17.99 kB → 0 B
node_modules/@reach/popover/dist/reach-popover.mjs 🔥 -7.15 kB (-100%) 7.15 kB → 0 B
node_modules/@reach/descendants/dist/reach-descendants.mjs 🔥 -7 kB (-100%) 7 kB → 0 B
node_modules/@reach/utils/dist/reach-utils.mjs 🔥 -4.15 kB (-100%) 4.15 kB → 0 B
node_modules/@xstate/fsm/es/index.js 🔥 -3.28 kB (-100%) 3.28 kB → 0 B
node_modules/@reach/rect/dist/reach-rect.mjs 🔥 -2.36 kB (-100%) 2.36 kB → 0 B
node_modules/@reach/portal/dist/reach-portal.mjs 🔥 -2.1 kB (-100%) 2.1 kB → 0 B
node_modules/@reach/machine/dist/reach-machine.mjs 🔥 -1.81 kB (-100%) 1.81 kB → 0 B
node_modules/@reach/observe-rect/dist/observe-rect.esm.js 🔥 -1.58 kB (-100%) 1.58 kB → 0 B
node_modules/@reach/auto-id/dist/reach-auto-id.mjs 🔥 -676 B (-100%) 676 B → 0 B
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/ReportRouter.js 1.23 MB → 1.23 MB (+95 B) +0.01%

Smaller

Asset File Size % Changed
static/js/index.js 3.02 MB → 2.93 MB (-91.29 kB) -2.95%
static/js/AppliedFilters.js 27.22 kB → 27.12 kB (-97 B) -0.35%

Unchanged

Asset File Size % Changed
static/js/resize-observer.js 18.37 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.5 kB 0%
static/js/BackgroundImage.js 122.29 kB 0%
static/js/narrow.js 75.73 kB 0%
static/js/usePreviewTransactions.js 790 B 0%
static/js/wide.js 266.96 kB 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%

@github-actions github-actions bot added 🚧 WIP Still work-in-progress, please don't review and don't merge and removed 🔍 Ready for Review Pull Request is not reviewed yet labels Jun 19, 2024
@MatissJanis MatissJanis changed the title [WIP] ♻️ refactoring Select component to use existing Menu ♻️ refactoring Select component to use existing Menu Jun 20, 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 20, 2024
joel-jeremy
joel-jeremy previously approved these changes Jun 21, 2024
Copy link
Contributor

@joel-jeremy joel-jeremy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just noticed the popover is now appearing on the bottom right of the element instead of the bottom left. But other than that LGTM!

@MatissJanis
Copy link
Member Author

Greta catch @joel-jeremy ! This has now been patched.

@github-actions github-actions bot added ✅ Approved Pull Request has been approved and can be merged and removed 🔍 Ready for Review Pull Request is not reviewed yet labels Jun 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✅ Approved Pull Request has been approved and can be merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants