Popover

[mcarrano]

Introduce a Popover component. See existing design here: https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/popovers.html

[sjcox-rh]

Visuals ready for review!

Please keep in mind to various placements of popover when implementing - on right, on left, on top, on bottom.

[matthewcarleton]

Hey @sjcox-rh these are looking great. I think we need to make a few updates to the design though to keep things clear for the development stage.

1. The spacers in green above and below the text are 8px but it looks like it is actually the same as the outside spacers (32px).
2. Also the spacing around the X should align with what we have in the button component. That has 8px on every side.
3. Can you also show what this would look like without a link in it? I am assuming it would not have the spacer below the text but just to be sure.

[mcarrano]

@sjcox-rh Thanks for posting. We did review this with the UX Leads on 6/14 and it's approved from a stakeholder standpoint. After resolving @matthewcarleton 's issues this should be ready for implementation.

[trahman73]

From an Ansible Tower implementation standpoint, we were hoping to have a version of the close icon that is a little bit lighter as compared to the title font weight. My eyes are directly drawn to the close (a secondary function) vs the actual content.

We also want to ensure that the popover only closes when the user clicks either the close icon or outside of the popover itself as we have use cases where a user needs to be able to select text from the popover body.

Material Design Example:

[LHinson]

@trahman73 PF-Core is a pure CSS project meaning the behavior will not be shown in this particular implementation. That said, this will be shown in the PF-React implementation. I went ahead and created the popover issue for pf-react development (although it's currently blocked) to include your notes regarding behavior. I think your approach makes sense. FYI @mcarrano

As for your concern with the close button, I've filed a separate issue for this against PF4. You can follow along over there but @kybaker and I will follow up on this.

[mcarrano]

Agree that the interaction described above makes sense.