-
-
Notifications
You must be signed in to change notification settings - Fork 930
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
♻️ (tooltip) refactoring to react-aria (vol.4) #2724
Conversation
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
@@ -1,11 +1,11 @@ | |||
import React, { type ComponentProps, memo, useState } from 'react'; | |||
import React, { type ComponentProps, memo, useRef, useState } from 'react'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bundle Stats — desktop-clientHey 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
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller
Unchanged
|
Bundle Stats — loot-coreHey 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
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
}; | ||
|
||
function Cover({ onSubmit }: CoverProps) { | ||
export function CoverTooltip({ onSubmit, onClose }: CoverTooltipProps) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should consider renaming this as it's no longer a tooltip. Maybe CoverMenu
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Didn't want to do too much changes in this PR, but that makes sense :)
Updated
initialAmount?: number; | ||
showToBeBudgeted?: boolean; | ||
onSubmit: (amount: number, categoryId: string) => void; | ||
onClose: () => void; | ||
}; | ||
|
||
export function TransferTooltip({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should consider renaming this as it's no longer a tooltip. Maybe TransferMenu
?
position = 'bottom-right', | ||
...props | ||
}: HoldTooltipProps) { | ||
export function HoldTooltip({ onSubmit, onClose }: HoldTooltipProps) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should consider renaming this as it's no longer a tooltip. Maybe HoldMenu
?
|
||
import { BalanceMenu } from './BalanceMenu'; | ||
import { CoverTooltip } from './CoverTooltip'; | ||
import { TransferTooltip } from './TransferTooltip'; | ||
|
||
type BalanceTooltipProps = { | ||
categoryId: string; | ||
tooltip: { close: () => void }; | ||
month: string; | ||
onBudgetAction: (month: string, action: string, arg?: unknown) => void; | ||
onClose?: () => void; | ||
}; | ||
|
||
export function BalanceTooltip({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same comment as other tooltips
month: string; | ||
onBudgetAction: (month: string, action: string, arg?: unknown) => void; | ||
onClose?: () => void; | ||
}; | ||
|
||
export function BalanceTooltip({ | ||
export function BalancePopoverContent({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would suggest BalanceMovementMenu
here as we could potentially use this out of the context of popovers.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good idea! d0291ac
The category / group popover is in the wrong position |
Which one is it? Can you send a screenshot? |
@MatissJanis The popover appears on the top left part of the page |
@joel-jeremy is it a specific category/group menu that appears like that or is it them all? This is what I have: Screen.Recording.2024-05-14.at.19.01.41.mov |
Managed to reproduce. Safari is OK. Chrome breaks. |
Popover location is now fixed 👍 Found another one: When clicking on any of the options in the category group popover, it collapses/expands the category group. I believe this was fixed before? |
Thanks for testing so carefully @joel-jeremy ! 🙇 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
Just curious - why we chose different conventions for the Tooltip
and Popover
components. Popover uses triggerRef but Tooltip wraps the trigger element. Would it be possible to use a single pattern for both? Just thought to bring it up, but that's out of scope of this PR.
Ideally I would have liked them both to just wrap the trigger element (instead of using refs), but that's currently not possible. We'd need to port buttons too to |
Follow-up to #2631
This should move the majority (if not all) of the Tooltip components used in the reports page.