[NEW] pfe-popover

[heyMP]

Component name:

General description of the component goal.

Add a pfe-popover component that is complimentary to the pfe-tooltip. Popovers are meant to be used when there is an action that the user can complete such as a confirmation button. They also differ from tooltip in the fact that they need to be dismissible.

Design specification

#872

Accessibility

• https://techservicesillinois.github.io/accessibility/examples/popover.html

Interaction

Analytics

[heyMP]

@coreyvickery pfe-popover is ready for initial design review.

https://deploy-preview-1406--happy-galileo-ea79c4.netlify.app/elements/pfe-popover/demo/

[coreyvickery]

@heyMP

• The headline font should be Display, not Regular
• Where are we pulling the X from?
• Spacing in between the buttons is 24px

[heyMP]

@coreyvickery The "X" is coming from a pfe-icon set. It's called "web-icon-close".

https://deploy-preview-1406--happy-galileo-ea79c4.netlify.app/elements/pfe-icon/demo/

[coreyvickery]

@heyMP Okay thanks, maybe one day we'll use the same icons as PatternFly. Let me know when a final review is ready.

[heyMP]

@coreyvickery what I can do is embed the PatternFly icons into the component until we come up with a plan for moving them into pfe-icon.

[coreyvickery]

@heyMP That would be great, let me know when you have another link I can review.

[heyMP]

@coreyvickery ready for followup review. https://heymp-pfe-gemini.surge.sh/elements/pfe-popover/demo/

• The headline font should be Display, not Regular (Changed to Display. Is the font-weight correct (currently 500)?)
• Where are we pulling the X from? (I embedded the icon from Patternfly directly into the component for now.)
• Spacing in between the buttons is 24px

[coreyvickery]

@heyMP Thanks for sending, just a few more tiny fixes and then we're done.

Close button

• Hover/active state for the light theme close button is #151515; dark theme is #D2D2D2.

Primary text button

• Normal state for the background is #2B9AF3; hover/active state is #73BCF7.
• Text always stays white.
• Distance between buttons is 16px.

Secondary (ghost) text button

• Normal state for the border is #2B9AF3; hover/active is the same color and the same border thickness value as the light theme button border.
• Text always stays white.
• Distance between buttons is 16px.