Anchored position: Flip to alternative alignments on overflow #78
Conversation
🦋 Changeset detectedLatest commit: a909c07 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
siddharthkp
changed the title
siddharthkp
changed the title
| return currentPos.left < containerDimensions.left | ||
| } else if (align === 'start' || align === 'center') { | ||
| return currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width | ||
| } |
There was a problem hiding this comment.
I think we'll need a different logic for determining whether center overflows. For instance, checking whether the center of floating element and center of anchored element is equivalent. Notably, this logic for determining overflow may need to consider whether anchorSide is top or bottom, rather than left or right.
Here, shouldRecalculateAlignment returns false unexpectedly:
There was a problem hiding this comment.
oooh that's a great point! I understand what you mean, will play around with it a bit more
There was a problem hiding this comment.
I tried to force the above example, does this feel like the correct behavior?
It stays center as long as it can, then switches to end if there isn't enough space. I wasn't able to get it in the same position as your screenshot 😅
Screen.Recording.2022-04-11.at.5.45.21.PM.mov
There was a problem hiding this comment.
Notably, this logic for determining overflow may need to consider whether anchorSide is top or bottom, rather than left or right.
Not sure I understand when this breaks. If the anchorSide is right and there isn't enough space, it switches to left before we re-evaluate alignment. 🤔 What scenario am I missing?
There was a problem hiding this comment.
I agree with you. I don't think shouldRecalculateAlignment would ever be called for the anchorSide left or right scenario 👍 If I'm understanding correctly, this method is only relevant for anchorSide top or bottom.
There was a problem hiding this comment.
Yep! It's only relevant if anchorSide is top or bottom 👍
| return currentPos.left < containerDimensions.left | ||
| } else if (align === 'start' || align === 'center') { | ||
| return currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width | ||
| } |
There was a problem hiding this comment.
I agree with you. I don't think shouldRecalculateAlignment would ever be called for the anchorSide left or right scenario 👍 If I'm understanding correctly, this method is only relevant for anchorSide top or bottom.
tl;dr: If there isn't enough space for
align: 'start', flip alignment toalign: 'end'(based on side alternateOrders implementation)getAnchoredPositionreturns position without perfectly aligned edges #63