palantir/blueprint

Popover2 caret does not align with center of small target (e.g., Icon)

Open

#5,924 创建于 2023年2月6日

在 GitHub 查看
 (3 评论) (0 反应) (0 负责人)TypeScript (20,263 star) (2,167 fork)batch import
P2Package: popover2Type: bughelp wanted

描述

Environment

  • Package version(s): @blueprintjs/popover2 1.9.0
  • Operating System: macOs Monterey
  • Browser name and version: Chrome 109

Code Sandbox

Link to a minimal repro (fork this code sandbox): sandbox

Steps to reproduce

  1. Create a popover with Popover2 whose target is just an icon.
  2. Set the placement to anything *-start or *-end.

Actual behavior

The popover caret is not aligned with the center of the icon target.

Expected behavior

The popover should point to the center of the icon target, although I'm not sure how to respect the -start or -end requirement simultaneously. In the screenshot above, the problem is that the popover content is aligned to the left side of the icon, but then the width of the caret plus the small margin to the left of the caret is wider than the target icon itself.

Possible solution

Possibly consumers just need to use some css or popover modifiers to align the popover with small targets as they wish, but this use case seems common enough to be worth flagging; also, I'm not 100% sure, but I think this is a break with Popover behavior.

贡献者指南