Are custom variant shapes possible?

Is it possible to create custom shapes for the variant bounding box?

Or better yet, a way for triggering the various mouse interactions only when the mouse interacts with the internal contents rather than the variant bounding box.

Think of a circular button that only triggers the hover variant when the mouse is actually touching the circle (not just anywhere in the square that contains this)

I’m specifically having an issue with trying to create a submenu interaction on mouse-enter.
Each main item is its own component with two variants (open/closed).
On mouse enter, it opens the submenu via swap.
Ideally, when the mouse leaves the main item and enters the item below, the first submenu closes and the new submenu opens.
However, because the bounding box of the first item extends down/above the second item, it stays open as the second submenu opens.

Screen Shot 2021-12-19 at 3.01.05 PM

Is there a better way to make this happen?

Was thinking a custom variant shape would solve this and also probably solve lots of other issues.

No, bounding box of an element is always a rectangle, so to implement this you need multiple separate rectangles of different sizes.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.