Overlay Panel Pattern

Overview

The overlay panel is a common component which will be used in multiple areas in the OpenShift Web Console.

Who will use this?

Ordering Experience Selecting an item from the Catalog Browser will present a flow in the overlay panel
Selecting an item from the Catalog Search results from the landing page
Selecting an item from the Catalog Search results from within a project
Import YAML in context (from within a project)
Bind in context (from within a project)
Deploy Image in context (from within a project)

Implementation Details

Panel has 2 height options
Panel should have a close button in the top right corner
Panel should have a maximum width and should be centered
Panel transitions down from the masthead when opening When the panel is open, the rest of the UI should not be accessible (behaves like a modal)
Scrolling should not be handled by this component since there are different layout options.

Design

Width

Width of the overlay shouldn’t be full browser width ( maybe 20-30 px margin on left/right ) with a maximum of 1200px

Height

Regular Height
Long Panel