feat(Popover): add alert variation

[KKoukiou]

In Cockpit in one of the design mockups, our designer used an alert variation of the PF4 Popover.
The screenshot looks like this:

Do you think that's something that you would like to support upstream?
If not feel free to close the issue.

[mcoker]

cc @mcarrano @mceledonia

[mcarrano]

It's an interesting idea @KKoukiou . I can float this out to others and see if it's something other projects might use. In the mean time I will transfer this to patternfly-design for further consideration.

[mcarrano]

Per discussion in Nov 11 Cockpit meeting, can we accomplish this using utility classes as a more general approach? Thoughs @mcoker ?

[mcoker]

can we accomplish this using utility classes

@mcarrano We recently added text color utilities, so a utility class could be used on the title text. But we don't have border utilities, so I don't think a user could accomplish the red top border without custom code.

[mcarrano]

Per discussion with @mcoker and @mceledonia we decided that it makes sense to support pop-over alert types similar to modal alert as seem here: https://www.patternfly.org/v4/components/modal/html#default-alert Should include an icon + colored text in popover header for accessibility. Border treatment seems unnecessary.

I will add this to our roadmap.

[lwrigh]

Here is a first pass at incorporating different types of alerts into the popover. Let me know what you think.

Here is an example of the danger alert popover in the Cockpit context.

[mcarrano]

I think these designs look great @lwrigh .

@mceledonia @mcoker can you also take a look and see if there are any issues?

[lwrigh]

Here is an updated in context example for more clarity. My assumption is that the alert popover would act like a regular popover and would be invoked by the user clicking on the label/touch point.