feat(app): update modal component and labware liquid modal

[smb2268]

fix #11142

Overview

This PR updates our modal component to no longer depend on the BaseModal

Changelog

1. Create ModalHeader and ModalShell that match Mel's design system and cover the needs for all currently designed modals
2. Update Modal atom to use these when FF is on, and add in some styling to make sure we keep the styling BaseModal had for all current instances of this atom
3. Use ModalHeader and ModalShell to finish last three design QA requests for the LiquidsLabwareDetailsModal

Review requests

1. Should I move this to molecules or leave in atoms?
2. Does this approach - creating ModalHeader and ModalShell that will work for all future modal creations but adding styling to keep the Modal index the same for backwards compatibility make sense? Take a look at the ticket and loom for this PR if you want more info on where the specifics are coming from
3. Make sure labware liquid details modal matches designs completely now

Risk assessment

Low

[jerader]

just curious why all of these are as const instead of using css, like

const BASE_STYLE = css' position: POSITION_ABSOLUTE; alignItems: ALIGN_CENTER; justifyContent: JUSTIFY_CENTER; top: 0; right: 0; bottom: 0; left: 0; width: '100%'; height: '100%'; '

I guess they achieve the same thing but not sure if we have a preferred

[smb2268]

I just pulled this from BaseModal so it's using an old pattern. I'll update it to use css!

[koji]

I think if we follow atomic design, Modal should be in molecules since we use a few atoms and components from @opentrons/components

[codecov]

Codecov Report

Merging #11216 (97e6515) into edge (0115066) will increase coverage by 0.03%.
The diff coverage is 60.00%.

@@            Coverage Diff             @@
##             edge   #11216      +/-   ##
==========================================
+ Coverage   73.78%   73.81%   +0.03%     
==========================================
  Files        2089     2091       +2     
  Lines       57737    58166     +429     
  Branches     5859     5973     +114     
==========================================
+ Hits        42599    42937     +338     
- Misses      13859    13929      +70     
- Partials     1279     1300      +21     

Flag	Coverage Δ
app	71.40% <60.00%> (+0.21%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
app/src/atoms/Modal/index.tsx	75.00% <ø> (-16.67%)	⬇️
...colRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx	83.87% <ø> (ø)
app/src/atoms/Modal/ModalShell.tsx	58.33% <58.33%> (ø)
app/src/atoms/Modal/ModalHeader.tsx	62.50% <62.50%> (ø)
...ganisms/LabwarePositionCheck/utils/stepCreators.ts	90.38% <0.00%> (-9.62%)	⬇️
app/src/pages/AppSettings/index.tsx	66.66% <0.00%> (-8.34%)	⬇️
...ms/Devices/ProtocolRun/RunLogProtocolSetupInfo.tsx	78.66% <0.00%> (-4.27%)	⬇️
app/src/pages/Devices/ProtocolRunDetails/index.tsx	97.26% <0.00%> (-0.57%)	⬇️
...organisms/Devices/HeaterShakerWizard/TestShake.tsx	68.88% <0.00%> (-0.35%)	⬇️
... and 9 more

[smb2268]

Note for dev reviews: I removed the changes to the Modal/index.tsx and am holding off on moving it into molecules until 6.1 goes out to minimize risk. I'll make a followup ticket in Jira to tackle those after this merges! @jerader @koji

[mmencarelli]

1 change requested specifically for the margins on the liquid modal.

• Liquid cards should bleed off the bottom edge of the modal

[koji]

maybe, to avoid data-testid="ModalHeader_icon_close_" ?

data-testid={`ModalHeader_icon_close${
  typeof title === 'string' ? `_${title}` : ''
}`}