Skip to content

Commit

Permalink
Check for overflow in Popover (#436)
Browse files Browse the repository at this point in the history
* Update stylelint to 13.13.1

This includes a fix for false positives of the length-zero-no-unit rule
in min() or max() (see stylelint/stylelint#5203 [1]).

[1]: stylelint/stylelint#5203

* Check for overflow in Popover

We try to avoid overflow with several adjustments – see the comments of
the avoidOverflow…() methods for details. Adjustments that change the
`position` prop can be disabled with the new `forcePosition` prop. Each
adjustment is tried in order, only if the previous adjustments weren’t
enough to avoid the overflow, and the adjustments are cumulative.

The whole procedure to avoid overflow is repeated each time the popover
is shown, as well as on window resize and when the position prop
changes. However, we don’t listen to changes in the slot contents,
because there seems to be no straightforward way to do that, and
implementing it probably wouldn’t be worth the effort (it would mainly
be useful for the storybook, I assume).

The “making edges flush” adjustment uses the CSS min() function, which
is not available in IE11; however, that should only mean that the
adjustment is effectively disabled in IE11 (the value should fall back
to the non-flush rule, some calc(...)), without breaking anything else.

Bug: T274261

Co-authored-by: SaiSan <sarai.sanchez@wikimedia.de>
  • Loading branch information
lucaswerkmeister and sai-san committed Jun 21, 2021
1 parent 0216b4e commit 19b4b4d
Show file tree
Hide file tree
Showing 4 changed files with 569 additions and 226 deletions.

0 comments on commit 19b4b4d

Please sign in to comment.