feat: add arrow overlay part and theme variant to vaadin-popover #7550
Conversation
web-padawan
force-pushed
the
feat/popover-pointer-arrow
branch
2 times, most recently
from
6c1453a
to
f5dea82
Compare
| @@ -59,6 +59,8 @@ export const PopoverOverlayMixin = (superClass) => | |||
| return; | |||
| } | |||
|
|
|||
| this.removeAttribute('arrow-centered'); | |||
There was a problem hiding this comment.
question: I'm not sure why it's only needed for horizontal positions. I tested vertical positions and they magically work without this attribute. I would appreciate a brief explanation.
There was a problem hiding this comment.
This is a result of different logic for start and end vertical positions where we always center the overlay. This aligns with how vaadin-tooltip positions work, although I don't remember why it was done this way.
web-padawan
changed the title
|
Updated to rename from |
web-padawan
force-pushed
the
feat/popover-pointer-arrow
branch
from
f5dea82
to
ed2252c
Compare
|
|
This ticket/PR has been released with Vaadin 24.5.0.alpha6 and is also targeting the upcoming stable 24.5.0 version. |
Description
Added
theme="pointer-arrow"to Lumo and Material which allows to show an arrow.The arrow placement is adjusted accordingly to the overlay position change.
For example, when using
topposition, the overlay can be re-positioned like this:popover-arrow.mp4
This includes adding the following styling API on the
vaadin-popover-overlay:arrowstylable shadow part (could also be a pseudo-element onoverlaypart)--vaadin-popover-arrow-sizecustom CSS property (defaults to 0.5rem)arrow-centeredattribute set when we need to center the arrow horizontallyType of change