Fix regressions introduced in Popover - #2014
Conversation
| expectedOffset: 14, | ||
| expectedOffset: 12, | ||
| }, | ||
| { | ||
| arrow: true, | ||
| placement: 'below', | ||
| expectedPointer: 'PointerUpIcon', | ||
| expectedOffset: 14, | ||
| expectedOffset: 12, | ||
| }, | ||
| { arrow: false, placement: 'above', expectedOffset: 6 }, | ||
| { arrow: false, placement: 'below', expectedOffset: 6 }, | ||
| { arrow: false, placement: 'above', expectedOffset: 4 }, | ||
| { arrow: false, placement: 'below', expectedOffset: 4 }, |
There was a problem hiding this comment.
The offset has apparently changed a bit, although I am not able to tell by visually comparing it.
The test is still valid though, as it demonstrates the offset is bigger with arrow than without it.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2014 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 70 70
Lines 1329 1330 +1
Branches 497 498 +1
=========================================
+ Hits 1329 1330 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Except for the concern about regressions in existing components which rely on this behavior, could we always make overflow visible? |
I think there was a reason for the overflow to be set like that, so I'm not completely sure. It's perfectly possible it was due to one specific case, and that ended up here too soon, while it should have been handled in consuming code. Once this is merged, I can probably try to look for all cases where we use Popover and see if overflow can be safely made visible. |
a9bc847 to
4ffc27e
Compare
robertknight
left a comment
There was a problem hiding this comment.
Looks good. We discussed in a Slack thread that it isn't ideal to have arrow: true have this side effect of changing overflow behavior. We discussed that potentially it can be eliminated by moving the overflow rules down into components that need it (Select was mentioned as the main reason), but this is best done as a separate PR.
This PR reverts a few of the changes introduced in #2011, which have caused a few visual regressions (see hypothesis/client#7159 (comment) and #2013).
The root cause was that the DOM structure was changed, adding one extra element between the outermost Popover element and the
children, and moving some of the classes to this new element, including the propagation of theclassesprop.#2013 was an attempt at working around one of those issues, but by checking how we use
Popover.classesin different places, I realized it would not be possible to consistently split those intoclassesandcontainerClasses(orcontentClasses), specially consideringSelectmakes use of these with its ownpopoverClasses, which would require splitting in two as well.Instead, this PR restructures the DOM elements again, so that it is exactly as before, when
arrowis false, and when it is true, it only changesoverflow-y-auto overflow-x-hiddenwithoverflow-visiblein the outermost element.This overflow difference was the motivation of the original DOM structure, but it's now clear the implemented solution was overkill.
Having visible overflow might require tweaks in consuming code, but since that is only going to affect new implementations where
arrowistrue, we can address those on a case-by-case basis, but ensuring all other existingPopoverusages are "safe" of regressions.