Skip to content

Commit

Permalink
Fix tooltip positioning when containerPadding is set (#6577)
Browse files Browse the repository at this point in the history
* Fix missing divider in Toast

* Rough fix for tooltip positioning

testing against chromatic, ideally calling updatePosition multiple times shouldnt break the positiong though...

* alternative fix without relying on initial render

* simplify fix for now
  • Loading branch information
LFDanLu committed Jun 27, 2024
1 parent fabca84 commit 72151b3
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 4 deletions.
3 changes: 3 additions & 0 deletions packages/@react-aria/overlays/src/useOverlayPosition.ts
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,9 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
// This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
overlay.style.top = '';
overlay.style.bottom = '';
overlay.style.left = '';
overlay.style.right = '';

Object.keys(position.position).forEach(key => overlay.style[key] = position.position[key] + 'px');
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : undefined;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,12 @@ export const ContainerPadding50AtEdge: TooltipTriggerStory = {
<Tooltip>Long tooltip message that just goes on and on again. But it just keeps going and going and going and going.</Tooltip>
]
},
// padding is 231 so that it flips, this is because the tooltip has a width of 180px with the tip + 3px margin on the tooltip + 50px of container padding from this story
// anything less than 232px padding on the div will result in a flip, so this is how we can visually test container padding
// this uses slightly less than the required padding so that we account for any rounding and have a stable test

// Padding is 223 + 8px from the story margin itself = 231px of space from edge to button.
// Size that the tooltip takes is 180 (tooltip width) + 3 (margin on overlay) + 50 (container padding) - 1 (offset applied via tooltiptrigger) = 232px
// Note the above size that is calculated is slightly off, will need to update calculatePosition
decorators: [(Story) => (
<div style={{width: '100%', padding: '230px'}}>
<div style={{width: '100%', padding: '223px'}}>
<Story />
</div>
)]
Expand Down

0 comments on commit 72151b3

Please sign in to comment.