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

Fix tooltip positioning when containerPadding is set #6577

Merged
merged 6 commits into from
Jun 27, 2024

Conversation

LFDanLu
Copy link
Member

@LFDanLu LFDanLu commented Jun 19, 2024

Caught by Chromatic

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

See https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=750. You can also try building the chromatic storybook locally and testing the story there but I noticed it doesn't flip like it does in chromatic (seems to be a separate issue though)

🧢 Your Project:

RSP

testing against chromatic, ideally calling updatePosition multiple times shouldnt break the positiong though...
@rspbot
Copy link

rspbot commented Jun 19, 2024

@rspbot
Copy link

rspbot commented Jun 19, 2024

Comment on lines +174 to +176
overlay.style.left = '';
overlay.style.right = '';

Copy link
Member Author

Choose a reason for hiding this comment

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

When the tooltip is flipped from its previously calculate position, there is a scenario where both left and right are applied on the overlay at the same time where the left/right set respectively are the values to position the tooltip to the right/left of the button respectively, resulting in the tooltip squishing itself in an attempt to fufill both constraints. Clearing it out here means this won't happen

@rspbot
Copy link

rspbot commented Jun 20, 2024

@LFDanLu LFDanLu changed the title (WIP) Fix tooltip positioning when containerPadding is set Fix tooltip positioning when containerPadding is set Jun 20, 2024
@LFDanLu LFDanLu marked this pull request as ready for review June 20, 2024 20:00
Copy link
Member

@ktabors ktabors left a comment

Choose a reason for hiding this comment

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

I was trying to reproduce this in Firefox and accidently found some interesting behavior. It's pre-existing. The following is an .mov file.
https://github.com/adobe/react-spectrum/assets/309540/fd4e5a2f-f24a-4281-aff0-ab136136e2be

@LFDanLu
Copy link
Member Author

LFDanLu commented Jun 27, 2024

@ktabors ah, super weird, looks like it is constantly flipping back and forth I guess? Def file a bug for it so we have it tracked if its preexisting

@rspbot
Copy link

rspbot commented Jun 27, 2024

@rspbot
Copy link

rspbot commented Jun 27, 2024

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

@LFDanLu LFDanLu merged commit 72151b3 into main Jun 27, 2024
28 checks passed
@LFDanLu LFDanLu deleted the fix_tooltip_positioning branch June 27, 2024 17:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants