Inline Popover

[jonhendershot]

Hi folks! I'm wondering if you have any recommendations on implementing the <Popover component like this, where the <InformationIcon is an inline button in the middle of a <Paragraph? Getting the icon properly spaced and aligned is proving to be a bit tricky with Paste (because the <PopoverContainer looks to render as a <Box, but doesn't pass the display prop so it renders as display: block and forces the line break). I'm working on hacking something together, but curious if there are any best/preferred practices for something like this? Thanks! Current implementation below.

<Paragraph>
  Some copy goes here to explain something and then I'm going to mention this Other Thing{" "}
  <PopoverContainer placement="bottom" baseId="my-popover">
    <PopoverButton variant="link">
      <InformationIcon decorative={false} size="sizeIcon20" title="Get more info" />
    </PopoverButton>
    <Popover aria-label="Popover">
      That requires some deeper explanations in a popover modal, so here it is{" "}
      <ExternalLink href="#">
        Learn more 
      </ExternalLink>
    </Popover>
  </PopoverContainer>
  which determines your A2P messaging limits.
</Paragraph>

<ExternalLink is a custom component that just wraps the <Anchor Paste component.

[nkrantz]

Hey @jonhendershot,

Thanks for the detailed post. This bug has come up before, and we currently have an open PR to address it. Please let us know if you're still experiencing issues with the alignment once those changes are released.

[nkrantz]

PR is merged