feat(modals, tooltips): adds fallbackPlacements support to Tooltip and TooltipModal
#2020
Conversation
| </TooltipDialog> | ||
| <Grid> | ||
| <Grid.Row style={{ height: 'calc(100vh - 80px)' }}> | ||
| <Grid.Row style={{ height: 'calc(100vh - 200px)' }}> |
There was a problem hiding this comment.
Offset story content to allow for overlay flip.
| }); | ||
|
|
||
| const [floatingPlacement] = getFloatingPlacements( | ||
| const [floatingPlacement, fallbackPlacements] = getFloatingPlacements( |
There was a problem hiding this comment.
if props.fallbackPlacements is undefined, getFloatingPlacements will generate opposite fallbackPlacements.
react-components/packages/theming/src/utils/getFloatingPlacements.ts
Lines 57 to 77 in 0101f3c
Should we set a sensible default (e.g.: ['bottom']) to both Tooltip and TooltipDialog?
There was a problem hiding this comment.
I wouldn't due to the fact that floating-ui already attempts to position within available space
| appendToNode: PropTypes.any, | ||
| referenceElement: PropTypes.any, | ||
| placement: PropTypes.any, | ||
| // @ts-expect-error Validation error due to incorrect type inference when component is wrapped in forwardRef |
There was a problem hiding this comment.
Correct type inference for RFCs.
Incorrect type inference for components wrapped in forwardRef.
🤔
There was a problem hiding this comment.
Probably why George went with fallbackPlacements: PropTypes.arrayOf(PropTypes.any) on Menu.
| }); | ||
|
|
||
| const [floatingPlacement] = getFloatingPlacements( | ||
| const [floatingPlacement, fallbackPlacements] = getFloatingPlacements( |
There was a problem hiding this comment.
I wouldn't due to the fact that floating-ui already attempts to position within available space
| appendToNode: PropTypes.any, | ||
| referenceElement: PropTypes.any, | ||
| placement: PropTypes.any, | ||
| // @ts-expect-error Validation error due to incorrect type inference when component is wrapped in forwardRef |
There was a problem hiding this comment.
Probably why George went with fallbackPlacements: PropTypes.arrayOf(PropTypes.any) on Menu.
Description
This PR adds
fallbackPlacementssupport to bothTooltipandTooltipModal, aligning their behavior withMenuList.Details
fallbackPlacementsprop inTooltipandTooltipModal.placementis not viable due to space constraints.Screen.Recording.2025-05-13.at.6.58.27.AM.mov
Checklist
[ ] 👌 design updates will be Garden Designer approved (add the designer as a reviewer)npm start)[ ] ⚫ renders as expected in dark mode[ ] 🤘 renders as expected with Bedrock CSS (?bedrock)[ ] 💂♂️ includes new unit tests. Maintain existing coverage (always >= 96%)