[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

https://github.com/patternfly/patternfly-elements/issues/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/

• [x] The headline font should be Display, not Regular (Changed to Display. Is the font-weight correct (currently 500)?)
• [x] Where are we pulling the X from? (I embedded the icon from Patternfly directly into the component for now.)
• [x] 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.

[heyMP]

Hey, @coreyvickery here are some additional updates. 😁

https://heymp-pfe-gemini.surge.sh/elements/pfe-popover/demo/

• [x] Hover/active state for the light theme close button is #151515; dark theme is #D2D2D2.
• [x] Distance between buttons is 16px. (in the future, we might want to break this functionality out into its own component. Maybe something like pfe-button-group.)
• [ ] Primary & Secondary color changes for normal and hover state. (I'm wondering if this work needs to be within pfe-button. I'm not sure that we would want pfe-popover to be responsible for controlling color changes for light mode and dark mode on pfe-button. Does that sound right to you?)

[coreyvickery]

@heyMP I agree about all things pfe-button, I'm not sure of the following either just yet, but I'll try and track down more information.

• If pfe-button has specs for groups
• If pfe-button has specs for dark theme

Final changes and then you can close this issue.

• Dark theme close button normal/link state is white
• Dark theme close button hover/active state is #D2D2D2

[heyMP]

@coreyvickery hot changes 🔥

https://deploy-preview-1406--patternfly-elements.netlify.app/elements/pfe-popover/demo/

• [x] dark close button white, button hover/active #D2D2D2

[coreyvickery]

@heyMP Perfect, ready to close!