PopoverContainer adding extra height

[PabloFNK]

We have this scenario in which we want to attach a Popover to an icon, so when the user clicks the icon we display a Popover.

The thing is that we need to display that icon vertically aligned with Flex but the PopoverContainer is adding some extra height that makes not possible to vertically align the icon properly.

I share an example in which I display with Flex vertically aligned an InformationIcon inside a PopoverContainer and PopoverButton, another one just with the PopoverButton and the last one with just the icon.

You can see how the last two are ok but the first one is wrong because instead of having the 20px height of the icon has 25px (5px extra) added by the PopoverContainer.

Could you take a look into this? Thanks!

https://codesandbox.io/s/popovercontainer-extra-height-2pyjd

[SiTaggart]

Hi @PabloFNK

We'll take a look at this and see what we can come up with.

The reason is Buttons are inline-block. inline-block elements always have a little phantom vertical whitespace around them. When you place inline-block elements inside a flex container, the vertical space is removed and everything lines up nicely. The problem with Popover in this situation is that the Popover container acts as the direct descendent of the Flex container, and the inline-block button remains, inline-block. So the phantom vertical space is present and causes the misalignment.

We'll noodle on some ideas on how to make this easier to deal with and get back to you

[andioneto]

Hi @PabloFNK
Just wanted to follow up and let you know that we are still discussing a path forward for this. Thanks for your patience and for raising an interesting question. 🙌

[andioneto]

@PabloFNK Hi there, just wanted to let you know that we have created a ticket for this and will address it ASAP. I made a note for the engineer who tackles this to follow up with you when it is completed.

In the meantime, if you need to align content and this is a blocker, you could try using vAlignContent="top" which is equivalent to adding align-content: flex-start; on a flex container. There will still be extra space under the icons, in the container, but it will allow you to align.

Check out this code sandbox which show that temporary fix. Thanks for helping us improve Paste 🙌