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

app/src/atoms/Modal/Modal.stories.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { Modal } from './index'
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'App/Atoms/Modal',
+ component: Modal,
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof Modal>> = args => (
+ <Modal {...args} />
+)
+
+export const Primary = Template.bind({})
+Primary.args = {
+ type: 'info',
+ title: 'This is the title',
+ children: 'this is the body',
+ footer: 'this is a footer',
+}

app/src/atoms/Modal/__tests__/Modal.test.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { fireEvent } from '@testing-library/react'
+import { renderWithProviders } from '@opentrons/components'
+import { i18n } from '../../../i18n'
+import { Modal } from '..'
+
+const render = (props: React.ComponentProps<typeof Modal>) => {
+ return renderWithProviders(<Modal {...props} />, {
+ i18nInstance: i18n,
+ })[0]
+}
+
+describe('Modal', () => {
+ let props: React.ComponentProps<typeof Modal>
+
+ beforeEach(() => {
+ props = {
+ type: 'info',
+ children: 'children',
+ title: 'title',
+ onClose: jest.fn(),
+ footer: 'footer',
+ }
+ })
+ it('renders an info modal', () => {
+ const { getByText, getByRole } = render(props)
+ getByText('children')
+ getByText('title')
+ getByText('footer')
+ const btn = getByRole('button', { name: /close_icon_btn/i })
+ fireEvent.click(btn)
+ expect(props.onClose).toHaveBeenCalled()
+ })
+ it('renders a warning modal', () => {
+ props = {
+ type: 'warning',
+ children: 'children',
+ title: 'title',
+ onClose: jest.fn(),
+ footer: 'footer',
+ }
+ const { getByText, getByLabelText } = render(props)
+ getByText('children')
+ getByText('title')
+ getByText('footer')
+ expect(getByLabelText('alert-circle')).toHaveStyle('color: #f09d20')
+ })
+ it('renders an error modal', () => {
+ props = {
+ type: 'error',
+ children: 'children',
+ title: 'title',
+ onClose: jest.fn(),
+ footer: 'footer',
+ }
+ const { getByText, getByLabelText } = render(props)
+ getByText('children')
+ getByText('title')
+ getByText('footer')
+ expect(getByLabelText('alert-circle')).toHaveStyle('color: #bf0000')
+ })
+})

app/src/atoms/Modal/index.tsx

@@ -3,15 +3,20 @@ import { css } from 'styled-components'
 import {
  Btn,
  Icon,
- BaseModal,
- BaseModalProps,
  TYPOGRAPHY,
  Flex,
  ALIGN_CENTER,
  JUSTIFY_SPACE_BETWEEN,
  SPACING,
  COLORS,
  BORDERS,
+ POSITION_ABSOLUTE,
+ JUSTIFY_CENTER,
+ Box,
+ POSITION_RELATIVE,
+ OVERFLOW_AUTO,
+ POSITION_STICKY,
+ DIRECTION_COLUMN,
 } from '@opentrons/components'
 
 import { StyledText } from '../text'
@@ -20,12 +25,14 @@ import { Divider } from '../structure'
 import type { IconProps } from '@opentrons/components'
 
 type ModalType = 'info' | 'warning' | 'error'
-export interface ModalProps extends BaseModalProps {
+export interface ModalProps {
  type?: ModalType
  onClose?: React.MouseEventHandler
  title?: React.ReactNode
  children?: React.ReactNode
  icon?: IconProps
+ footer?: React.ReactNode
+ backgroundColor?: string
 }
 
 const closeIconStyles = css`
@@ -45,60 +52,100 @@ const closeIconStyles = css`
 `
 
 export const Modal = (props: ModalProps): JSX.Element => {
- const { type = 'info', onClose, title, children } = props
- const header =
- title != null ? (
- <>
+ const {
+ type = 'info',
+ onClose,
+ title,
+ children,
+ footer,
+ backgroundColor = COLORS.backgroundOverlay,
+ } = props
+
+ return (
+ <Flex
+ position={POSITION_ABSOLUTE}
+ alignItems={ALIGN_CENTER}
+ justifyContent={JUSTIFY_CENTER}
+ top={0}
+ right={0}
+ bottom={0}
+ left={0}
+ width="100%"
+ height="100%"
+ padding={`${SPACING.spacing4}, ${SPACING.spacing5}`}
+ backgroundColor={backgroundColor}
+ zIndex={10}
+ >
+ <Box
+ backgroundColor={COLORS.white}
+ position={POSITION_RELATIVE}
+ overflowY={OVERFLOW_AUTO}
+ maxHeight="100%"
+ width={'31.25rem'}
+ borderRadius={BORDERS.radiusSoftCorners}
+ boxShadow={BORDERS.smallDropShadow}
+ >
+ {title != null ? (
+ <>
+ <Flex
+ alignItems={ALIGN_CENTER}
+ justifyContent={JUSTIFY_SPACE_BETWEEN}
+ paddingX={SPACING.spacing5}
+ paddingY={SPACING.spacing4}
+ >
+ <Flex>
+ {['error', 'warning'].includes(type) ? (
+ <Icon
+ name={'alert-circle'}
+ color={type === 'error' ? COLORS.error : COLORS.warning}
+ size={SPACING.spacingM}
+ marginRight={SPACING.spacing3}
+ aria-label={'alert-circle'}
+ />
+ ) : null}
+ <StyledText as="h3" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
+ {title}
+ </StyledText>
+ </Flex>
+ {onClose != null && (
+ <Btn
+ onClick={onClose}
+ css={closeIconStyles}
+ aria-label={'close_icon_btn'}
+ data-testid={`Modal_icon_close_${
+ typeof title === 'string' ? title : ''
+ }`}
+ >
+ <Icon
+ name={'close'}
+ width={SPACING.spacing5}
+ height={SPACING.spacing5}
+ />
+ </Btn>
+ )}
+ </Flex>
+ <Divider width="100%" marginY="0" />
+ </>
+ ) : null}
  <Flex
- alignItems={ALIGN_CENTER}
- justifyContent={JUSTIFY_SPACE_BETWEEN}
- paddingX={SPACING.spacing5}
+ paddingX={SPACING.spacing6}
  paddingY={SPACING.spacing4}
+ flexDirection={DIRECTION_COLUMN}
  >
- <Flex>
- {['error', 'warning'].includes(type) ? (
- <Icon
- name="alert-circle"
- color={type === 'error' ? COLORS.error : COLORS.warning}
- size={SPACING.spacingM}
- marginRight={SPACING.spacing3}
- />
- ) : null}
- <StyledText as="h3" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
- {title}
- </StyledText>
- </Flex>
- {onClose != null && (
- <Btn
- onClick={onClose}
- css={closeIconStyles}
- data-testid={`Modal_icon_close_${
- typeof title === 'string' ? title : ''
- }`}
- >
- <Icon
- name={'close'}
- width={SPACING.spacing5}
- height={SPACING.spacing5}
- />
- </Btn>
- )}
+ {children}
  </Flex>
- <Divider width="100%" marginY="0" />
- </>
- ) : null
-
- return (
- <BaseModal
- width={'31.25rem'}
- noHeaderStyles
- header={header}
- css={css`
- border-radius: ${BORDERS.radiusSoftCorners};
- box-shadow: ${BORDERS.smallDropShadow};
- `}
- >
- {children}
- </BaseModal>
+ {footer != null ? (
+ <Flex
+ backgroundColor={COLORS.white}
+ position={POSITION_STICKY}
+ padding={SPACING.spacing4}
+ flexDirection={DIRECTION_COLUMN}
+ bottom={0}
+ >
+ {footer}
+ </Flex>
+ ) : null}
+ </Box>
+ </Flex>
  )
 }

app/src/pages/Devices/DevicesLanding/__tests__/NewRobotSetupHelp.test.tsx

@@ -37,7 +37,7 @@ describe('NewRobotSetupHelp', () => {
  fireEvent.click(link)
  expect(getByText('How to setup a new robot')).toBeInTheDocument()
 
- const xButton = getByRole('button', { name: '' })
+ const xButton = getByRole('button', { name: /close_icon_btn/i })
  fireEvent.click(xButton)
 
  expect(queryByText('How to setup a new robot')).toBeFalsy()

components/src/modals/BaseModal.tsx

@@ -46,6 +46,9 @@ const CONTENT_STYLE = {
  paddingY: SPACING.spacing4,
 } as const
 
+/**
+ * @deprecated Use Modal in component folder
+ */
 export interface BaseModalProps extends StyleProps {
  /** Overlay color, defaults to `OVERLAY_GRAY_90` */
  overlayColor?: string
@@ -67,6 +70,7 @@ export interface BaseModalProps extends StyleProps {
  * - A content area, with `overflow-y: auto` and customizable with style props
  * - An optional sticky header
  * - An optional sticky footer
+ * @deprecated Use Modal in component folder
  */
 export function BaseModal(props: BaseModalProps): JSX.Element {
  const {