refactor(app): update Modal component and deprecate old one

[jerader]

closes #9578

Overview

Right now, there are 3 modal components: baseModal in components, Modal in components, and Modal in the app folder. baseModal is only ever being used in the old app. So this PR deprecates baseModal and changes Modal in the app to not use baseModal at all. So when the time comes, we can delete baseModal all together.

Changelog

• updates modal and creates a story and test
• deprecates the old baseModal component

Review requests

• does it match designs?

Risk assessment

low

[codecov]

Codecov Report

Merging #10124 (5e4556e) into edge (f86b664) will decrease coverage by 0.00%.
The diff coverage is 64.28%.

@@            Coverage Diff             @@
##             edge   #10124      +/-   ##
==========================================
- Coverage   74.71%   74.70%   -0.01%     
==========================================
  Files        2093     2094       +1     
  Lines       55234    55241       +7     
  Branches     5567     5569       +2     
==========================================
+ Hits        41266    41269       +3     
- Misses      12831    12835       +4     
  Partials     1137     1137              

Flag	Coverage Δ
app	71.24% <64.28%> (-0.02%)	⬇️
components	52.82% <ø> (ø)
labware-library	49.74% <ø> (ø)
protocol-designer	45.13% <ø> (ø)
react-api-client	82.48% <ø> (ø)
step-generation	86.49% <ø> (ø)

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

Impacted Files	Coverage Δ
app/src/atoms/Modal/Modal.stories.tsx	0.00% <0.00%> (ø)
components/src/modals/BaseModal.tsx	91.66% <ø> (ø)
app/src/atoms/Modal/index.tsx	91.66% <90.00%> (+2.77%)	⬆️

[shlokamin]

I don't follow why we want to get rid of base modal. As per its description: A BaseModal is a layout component for building more specific modals., which seems like a valid shared component to me. It looks like the app's modal was using base modal prior to this PR, which seems like a good use case. Is the idea that we eventually want the modal component in the app folder to be moved into shared components or something?

[shlokamin]

components in our component library should not point to components outside of it. ex. if PD or LL wants to use a modal component, it can't import it from the app, because the app is not a dependency of PD or LL (and shouldn't be)

[jerader]

PD and LL would use the modal component in the components folder

[shlokamin]

that makes sense, but we still should not be pointing consumers of our components library to non shared monorepo subdirectories. does that make sense? like if a consumer were poking around shared components and was pointed to the app sub directory, that would mean they would have to add the entire app as a dependency

[b-cooper]

BaseModal is still being used via inheritance in a few existing components. We should hold off on deprecating it until we have consolidated all usage of modals in the app.