Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Arrow position degradation in v6 #1387

Open
ogonkov opened this issue Feb 29, 2024 · 3 comments
Open

Arrow position degradation in v6 #1387

ogonkov opened this issue Feb 29, 2024 · 3 comments

Comments

@ogonkov
Copy link
Contributor

ogonkov commented Feb 29, 2024

In v6 Popup arrow on the opposite side of the Popup

https://preview.gravity-ui.com/uikit/?path=/story/components-overlays-popover--playground&args=placement:bottom-end

With bottom-end and ltr arrow should be at the right side of popup. In Storybook it displays on the left side.

Guide with illustration with right position of arrow https://gravity-ui.com/design/guides/popup#positioning

Screenshot 2024-02-29 at 16 37 09
@ykamendrovskiy
Copy link

The sandbox on the site (UIKit-5 at the time of recording) has this behaviour. When you toggle the arrow on and off it positions differently

3brejtg.mov

@ykamendrovskiy
Copy link

In storybook some of the arrows position with an offset, especially left-start and right-start.

image

@amje
Copy link
Contributor

amje commented Mar 4, 2024

The correct behaviour of popper.js: arrow element is "center aware", arrow is trying to be as close as it can to the anchor's center on cross axis depending on its size. So basically it works as expected. Indeed there are some glitches in Storybook story rendering, that can affect positioning. Window resize helps popper to recalculate properly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants