Design QA: Liquid Labware Modal / Generalize Modal Component

[smb2268]

We want to move away from using BaseModal in the Modal organism. To generalize and streamline modals going forward, we're going to make the following components:

ModalShell component which

• 1. Has an overlay
• 2. Is centered in the viewport but this position can be overridden
• 3. Has 1.5rem margin outside the modal when the screen size is small
• 4. Has an optional closeOnOutsideClick function prop which will be called when the overlay is clicked
• 5. Has optional header and footer props that will have fixed sticky positions with relevant styling
• 6. Children will be displayed in between header and footer and have NO default padding/margin
• 7. Has border radius, box shadow, and white background by default

ModalTitle component which will be used as the header in most cases with

• 1. Required title prop
• 2. An optional icon prop
• 3. An optional exit button prop (default if this prop isn't passed in is the X icon)

This ticket will:

• Add the above two components
• Change modal organism to use these components when liquid FF is on, with extra styling for backwards compatibility
• Use these components for labware liquid modal
• Change padding to 1rem and background color to light grey for liquid labware modal

See this loom: https://www.loom.com/share/5b4c97dae1784ebabc6dc0c4199f61b6

[smb2268]

Follow on for: https://app.zenhub.com/workspaces/app--ui-5f6248dba845b000139aa767/issues/opentrons/opentrons/11044

[smb2268]

@mmencarelli This modal is currently centered within the entire window, including the left nav bar. Do you want it centered on the screen excluding the nav bar?

[mmencarelli]

@smb2268 Let's have it centered within the viewport (entire window - navbar). As the user slowly starts to shrink screen size it'll overlap the navbar like we see below at 800px wide.