Reusable user interface component: Pop-up dialog

Goal

We need a library component that would be used in many UI interfaces.

Requirements

• closely match @grafana/ui styles, use themes for the styles
• render well in dark/light modes
• blur the background as showed in https://jira.percona.com/browse/PMM-6492
• render whatever children are passed to it
• feature a standard close (cross) icon in the upper right corner
• accept an onClose callback function from the parent to notify the parent when the window is closed
• accept an closeOnClickaway boolean prop which defaults to true
• closable on click away
• accept an closeOnEscape boolean prop which defaults to true
• closable on escape keypress
• test coverage as per the rules

 

Out of scope

• async handling of events
• no implementation for the action buttons (ex: Save, Submit, etc) - this is done in the child component passed from the parent