refactor(components, app): odd and desktop modal unification (#15870)

closes AUTH-619

1. `LegacyModal` is now `Modal` and lives in the component directory
along with `LegacyModalShell`, `LegacyModalHeader` - both of which also
lost `Legacy` at the beginning
2. `Modal` in the app directory is now `OddModal` and `ModalHeader` is
now `OddModalHeader`
3. `Modal` in the components directory is now `LegacyModal` and has a
deprecated tag.
4. some unused modals have been deleted which include: `interstitial`,
`modalShell` in the components directory, `BaseModal`

app/src/App/DesktopAppFallback.tsx

@@ -15,9 +15,9 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 
-import { LegacyModal } from '../molecules/LegacyModal'
 import { reloadUi } from '../redux/shell'
 
 import type { Dispatch } from '../redux/types'
@@ -38,11 +38,7 @@ export function DesktopAppFallback({ error }: FallbackProps): JSX.Element {
   }
 
   return (
-    <LegacyModal
-      type="warning"
-      title={t('error_boundary_title')}
-      marginLeft="0"
-    >
+    <Modal type="warning" title={t('error_boundary_title')} marginLeft="0">
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
           <LegacyStyledText as="p">
@@ -59,6 +55,6 @@ export function DesktopAppFallback({ error }: FallbackProps): JSX.Element {
           {t('reload_app')}
         </AlertPrimaryButton>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }

app/src/App/OnDeviceDisplayAppFallback.tsx

@@ -18,11 +18,11 @@ import {
 } from '@opentrons/components'
 
 import { MediumButton } from '../atoms/buttons'
-import { Modal } from '../molecules/Modal'
+import { OddModal } from '../molecules/OddModal'
 import { appRestart, sendLog } from '../redux/shell'
 
 import type { Dispatch } from '../redux/types'
-import type { ModalHeaderBaseProps } from '../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../molecules/OddModal/types'
 
 export function OnDeviceDisplayAppFallback({
   error,
@@ -40,7 +40,7 @@ export function OnDeviceDisplayAppFallback({
     })
     dispatch(appRestart(error.message as string))
   }
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('error_boundary_title'),
     iconName: 'ot-alert',
     iconColor: COLORS.red50,
@@ -52,7 +52,7 @@ export function OnDeviceDisplayAppFallback({
   }, [])
 
   return (
-    <Modal header={modalHeader}>
+    <OddModal header={modalHeader}>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing32}
@@ -69,6 +69,6 @@ export function OnDeviceDisplayAppFallback({
           onClick={handleRestartClick}
         />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }

app/src/atoms/MenuList/index.tsx

@@ -7,8 +7,8 @@ import {
   SPACING,
   BORDERS,
   JUSTIFY_CENTER,
+  ModalShell,
 } from '@opentrons/components'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 
 interface MenuListProps {
   children: React.ReactNode
@@ -19,7 +19,7 @@ interface MenuListProps {
 export const MenuList = (props: MenuListProps): JSX.Element | null => {
   const { children, isOnDevice = false, onClick = null } = props
   return isOnDevice && onClick != null ? (
-    <LegacyModalShell
+    <ModalShell
       borderRadius={BORDERS.borderRadius16}
       width="max-content"
       onOutsideClick={onClick}
@@ -31,7 +31,7 @@ export const MenuList = (props: MenuListProps): JSX.Element | null => {
       >
         {children}
       </Flex>
-    </LegacyModalShell>
+    </ModalShell>
   ) : (
     <Flex
       borderRadius="4px 4px 0px 0px"

app/src/atoms/Skeleton/Skeleton.stories.tsx

@@ -8,8 +8,8 @@ import {
   JUSTIFY_END,
   ALIGN_FLEX_END,
   PrimaryButton,
+  Modal,
 } from '@opentrons/components'
-import { Modal } from '../../molecules/Modal'
 import { Skeleton as SkeletonComponent } from '.'
 
 import type { Meta, StoryObj } from '@storybook/react'

app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx

@@ -7,9 +7,9 @@ import {
   PrimaryButton,
   SPACING,
   LegacyStyledText,
+  ModalShell,
 } from '@opentrons/components'
 import { Skeleton } from '../../atoms/Skeleton'
-import { LegacyModalShell } from '../LegacyModal'
 import { WizardHeader } from '../WizardHeader'
 import { configReducer } from '../../redux/config/reducer'
 import { GenericWizardTile } from './index'
@@ -37,10 +37,10 @@ const Template: Story<
   React.ComponentProps<typeof GenericWizardTile>
 > = args => (
   <Provider store={store}>
-    <LegacyModalShell>
+    <ModalShell>
       <WizardHeader currentStep={3} totalSteps={4} title="Example Title" />
       <GenericWizardTile {...args} />
-    </LegacyModalShell>
+    </ModalShell>
   </Provider>
 )
 const body = (