Fix infinite resizing issue in overlay positioning #6312
Conversation
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| @@ -199,123 +199,123 @@ describe('calculatePosition', function () { | |||
| const testCases = [ | |||
| { | |||
| placement: 'left', | |||
| noOffset: [50, 200, undefined, 196, 350], | |||
| offsetBefore: [-200, 50, undefined, 50, 500], | |||
| noOffset: [50, 200, undefined, 100, 350], | |||
There was a problem hiding this comment.
For others who may be looking at the tests and wondering what these number mean:
- first value is either
position: leftof the overlayor a value used to calculate the corresponding(can just think of it as position: left still)position: right - second value is either
position: topof the overlayor a value used to calculate the corresponding(can just think of it as position: top still)position: bottom - third value is arrowOffsetLeft, aka the number of px that the arrow is shifted horizontally with respect to the left edge of the overlay if any (only applies for top/bottom placements)
- fourth value is arrowOffsetTop, aka the number of px that the arrow is shifted with respect to the top edge of the overlay (only applies for left/right placements)
- the last value is the overlay's calculated max height, essentially the amount of space that the overlay can grow before hitting the boundary's edge
Translation of these values for this test case (placement: left + noOffset):
checkPosition(
placement, getTargetDimension({left: 250, top: 250}), testCase.noOffset
);
becomes:
- container is
600x600with a padding of50so valid render area is a rect of{left: 50, right: 550, top: 50, bottom: 550} - button is placed at
(250, 250)with a height of(100, 100)=>{left: 250, right: 350, top: 250, bottom: 350}. Note that this(250, 250)placement combined with specified height/width essentially places the button in the exact middle of the container - overlay is
200x200and has a calculated position of{left: 50, right: 250, top: 200, bottom: 400}and a maxHeight of350since it is550 (boundary bottom) - 200 (top of overlay) - arrow size is
8, and an arrowOffsetTop of100aka it is placed 100px from the top edge of the overlay which is the center of overlay and matches the center of the button:200 (overlay top) + 100 (arrow offset) = 300 (center of button)
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'any' } |
Closes #6241