palantir/blueprint

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

Open

#5.924 aberto em 6 de fev. de 2023

Ver no GitHub
 (3 comments) (0 reactions) (0 assignees)TypeScript (2.167 forks)batch import
P2Package: popover2Type: bughelp wanted

Métricas do repositório

Stars
 (20.263 stars)
Métricas de merge de PR
 (Mesclagem média 43d 10h) (27 fundiu PRs em 30d)

Description

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.

Guia do colaborador