From 7967e37ffa32e12cd3b91075069115f3ddf2cd4f Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 6 Jan 2025 15:22:25 -0500 Subject: [PATCH 01/10] refactor(components): refactor modal for web refactor modal for web close AUTH-1171 --- components/src/modals/Modal.tsx | 1 - components/src/modals/ModalHeader.tsx | 109 ++++++++++++++------------ 2 files changed, 59 insertions(+), 51 deletions(-) diff --git a/components/src/modals/Modal.tsx b/components/src/modals/Modal.tsx index 304b733de8a..7c10694981c 100644 --- a/components/src/modals/Modal.tsx +++ b/components/src/modals/Modal.tsx @@ -66,7 +66,6 @@ export const Modal = (props: ModalProps): JSX.Element => { name: 'ot-alert', color: iconColor(type), size: '1.25rem', - marginRight: SPACING.spacing8, } const modalHeader = ( diff --git a/components/src/modals/ModalHeader.tsx b/components/src/modals/ModalHeader.tsx index b505b1f1a47..987104e04cf 100644 --- a/components/src/modals/ModalHeader.tsx +++ b/components/src/modals/ModalHeader.tsx @@ -1,9 +1,14 @@ -import { css } from 'styled-components' +import styled, { css } from 'styled-components' import { Icon } from '../icons' import { Box, Btn, Flex } from '../primitives' import { LegacyStyledText } from '../atoms' -import { ALIGN_CENTER, JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN } from '../styles' +import { + ALIGN_CENTER, + DISPLAY_FLEX, + JUSTIFY_CENTER, + JUSTIFY_SPACE_BETWEEN, +} from '../styles' import { SPACING, TYPOGRAPHY } from '../ui-style-constants' import { COLORS } from '../helix-design-system' @@ -21,22 +26,6 @@ export interface ModalHeaderProps { closeButton?: ReactNode } -const closeIconStyles = css` - display: flex; - justify-content: ${JUSTIFY_CENTER}; - align-items: ${ALIGN_CENTER}; - border-radius: 0.875rem; - width: 1.625rem; - height: 1.625rem; - &:hover { - background-color: ${COLORS.grey30}; - } - - &:active { - background-color: ${COLORS.grey35}; - } -` - export const ModalHeader = (props: ModalHeaderProps): JSX.Element => { const { icon, @@ -45,20 +34,16 @@ export const ModalHeader = (props: ModalHeaderProps): JSX.Element => { titleElement1, titleElement2, backgroundColor, - color, + color = COLORS.black90, closeButton, } = props return ( <> - - + {icon != null && } {titleElement1} {titleElement2} @@ -71,31 +56,55 @@ export const ModalHeader = (props: ModalHeaderProps): JSX.Element => { {title} - {closeButton != null - ? closeButton - : onClose != null && ( - - - - )} - - + {closeButton != null || + (onClose != null && ( + + + + ))} + {/* */} + + ) } + +const StyledModalHeader = styled(Flex)` + padding: ${SPACING.spacing16} ${SPACING.spacing24}; + justify-content: ${JUSTIFY_SPACE_BETWEEN}; + align-items: ${ALIGN_CENTER}; + background-color: ${props => props.backgroundColor}; +` + +const StyledDivider = styled(Box)` + border-bottom: 1px solid ${COLORS.grey30}; + margin: 0; + width: 100%; +` + +const closeIconStyles = css` + display: ${DISPLAY_FLEX}; + justify-content: ${JUSTIFY_CENTER}; + align-items: ${ALIGN_CENTER}; + border-radius: 0.875rem; + width: 1.625rem; + height: 1.625rem; + &:hover { + background-color: ${COLORS.grey30}; + } + + &:active { + background-color: ${COLORS.grey35}; + } +` From d5351993bd1bb44b2f60013d23c89bfcd519bbc9 Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 6 Jan 2025 15:26:06 -0500 Subject: [PATCH 02/10] replace from legacy styled text to styled text --- components/src/modals/ModalHeader.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/components/src/modals/ModalHeader.tsx b/components/src/modals/ModalHeader.tsx index 987104e04cf..ea1ac9ff6a1 100644 --- a/components/src/modals/ModalHeader.tsx +++ b/components/src/modals/ModalHeader.tsx @@ -2,14 +2,14 @@ import styled, { css } from 'styled-components' import { Icon } from '../icons' import { Box, Btn, Flex } from '../primitives' -import { LegacyStyledText } from '../atoms' +import { StyledText } from '../atoms' import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN, } from '../styles' -import { SPACING, TYPOGRAPHY } from '../ui-style-constants' +import { SPACING } from '../ui-style-constants' import { COLORS } from '../helix-design-system' import type { MouseEventHandler, ReactNode } from 'react' @@ -48,13 +48,9 @@ export const ModalHeader = (props: ModalHeaderProps): JSX.Element => { {titleElement1} {titleElement2} {/* TODO (nd: 08/07/2024) Convert to StyledText once designs are resolved */} - + {title} - + {closeButton != null || (onClose != null && ( From c09f59b552b5ee614dd8a05f1c6c9c7a30c493b9 Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 6 Jan 2025 17:16:27 -0500 Subject: [PATCH 03/10] fix test-errors --- .../ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx | 4 ++-- components/src/modals/ModalHeader.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx index 6533828d803..2d35ca9925c 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx @@ -9,11 +9,11 @@ import { DIRECTION_ROW, Flex, Icon, + LegacyStyledText, Link, + Modal, PrimaryButton, SPACING, - Modal, - LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { getTopPortalEl } from '/app/App/portal' diff --git a/components/src/modals/ModalHeader.tsx b/components/src/modals/ModalHeader.tsx index ea1ac9ff6a1..a9eeac30dd4 100644 --- a/components/src/modals/ModalHeader.tsx +++ b/components/src/modals/ModalHeader.tsx @@ -42,6 +42,7 @@ export const ModalHeader = (props: ModalHeaderProps): JSX.Element => { {icon != null && } From b4b5a8f356f0a6836b4eed5c4d4bcf5aa237e03e Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 6 Jan 2025 22:35:10 -0500 Subject: [PATCH 04/10] remove undefined from icon --- components/src/modals/Modal.tsx | 2 +- components/src/modals/ModalHeader.tsx | 2 +- components/src/modals/ModalShell.tsx | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/components/src/modals/Modal.tsx b/components/src/modals/Modal.tsx index 7c10694981c..973320b9977 100644 --- a/components/src/modals/Modal.tsx +++ b/components/src/modals/Modal.tsx @@ -74,7 +74,7 @@ export const Modal = (props: ModalProps): JSX.Element => { title={title} titleElement1={titleElement1} titleElement2={titleElement2} - icon={['error', 'warning'].includes(type) ? modalIcon : undefined} + icon={['error', 'warning'].includes(type) ? modalIcon : null} color={COLORS.black90} backgroundColor={COLORS.white} /> diff --git a/components/src/modals/ModalHeader.tsx b/components/src/modals/ModalHeader.tsx index a9eeac30dd4..73e60583318 100644 --- a/components/src/modals/ModalHeader.tsx +++ b/components/src/modals/ModalHeader.tsx @@ -22,7 +22,7 @@ export interface ModalHeaderProps { titleElement2?: JSX.Element backgroundColor?: string color?: string - icon?: IconProps + icon: IconProps | null closeButton?: ReactNode } diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx index c6fa7e5ccb3..82ae09b8868 100644 --- a/components/src/modals/ModalShell.tsx +++ b/components/src/modals/ModalShell.tsx @@ -3,6 +3,7 @@ import { ALIGN_CENTER, ALIGN_END, CURSOR_DEFAULT, + DISPLAY_FLEX, JUSTIFY_CENTER, JUSTIFY_END, OVERFLOW_AUTO, @@ -110,7 +111,7 @@ const ContentArea = styled.div<{ position: Position noPadding: boolean }>` - display: flex; + display: ${DISPLAY_FLEX}; position: ${POSITION_ABSOLUTE}; align-items: ${({ position }) => position === 'center' ? ALIGN_CENTER : ALIGN_END}; @@ -137,6 +138,7 @@ const ModalArea = styled.div< box-shadow: ${BORDERS.smallDropShadow}; height: ${({ isFullPage }) => (isFullPage ? '100%' : 'auto')}; background-color: ${COLORS.white}; + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { border-radius: ${BORDERS.borderRadius16}; } From 317eddda3c2463c0871c968c0865190e7a8fb35a Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 7 Jan 2025 13:48:07 -0500 Subject: [PATCH 05/10] fix linting errors --- components/src/modals/Modal.tsx | 2 +- components/src/modals/ModalHeader.tsx | 2 +- components/src/modals/__tests__/ModalHeader.test.tsx | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/src/modals/Modal.tsx b/components/src/modals/Modal.tsx index 973320b9977..7c10694981c 100644 --- a/components/src/modals/Modal.tsx +++ b/components/src/modals/Modal.tsx @@ -74,7 +74,7 @@ export const Modal = (props: ModalProps): JSX.Element => { title={title} titleElement1={titleElement1} titleElement2={titleElement2} - icon={['error', 'warning'].includes(type) ? modalIcon : null} + icon={['error', 'warning'].includes(type) ? modalIcon : undefined} color={COLORS.black90} backgroundColor={COLORS.white} /> diff --git a/components/src/modals/ModalHeader.tsx b/components/src/modals/ModalHeader.tsx index 73e60583318..a9eeac30dd4 100644 --- a/components/src/modals/ModalHeader.tsx +++ b/components/src/modals/ModalHeader.tsx @@ -22,7 +22,7 @@ export interface ModalHeaderProps { titleElement2?: JSX.Element backgroundColor?: string color?: string - icon: IconProps | null + icon?: IconProps closeButton?: ReactNode } diff --git a/components/src/modals/__tests__/ModalHeader.test.tsx b/components/src/modals/__tests__/ModalHeader.test.tsx index bf55110b63f..8d7ded021b1 100644 --- a/components/src/modals/__tests__/ModalHeader.test.tsx +++ b/components/src/modals/__tests__/ModalHeader.test.tsx @@ -3,10 +3,10 @@ import '@testing-library/jest-dom/vitest' import { describe, it, expect, vi, beforeEach } from 'vitest' import { renderWithProviders } from '../../testing/utils' -import { ModalHeader } from '../ModalHeader' import { COLORS } from '../../helix-design-system' import { SPACING } from '../../ui-style-constants' import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles' +import { ModalHeader } from '../ModalHeader' import type { ComponentProps } from 'react' @@ -40,7 +40,6 @@ describe('ModalHeader', () => { name: 'ot-alert', color: COLORS.black90, size: '1.25rem', - marginRight: SPACING.spacing8, } render(props) expect(screen.getByTestId('Modal_header_icon')).toHaveStyle( From d1bd74cc8f01c204694b2e8f5571fa4d77fae17c Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 7 Jan 2025 14:12:36 -0500 Subject: [PATCH 06/10] fix modal header test error --- components/src/modals/__tests__/ModalHeader.test.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/src/modals/__tests__/ModalHeader.test.tsx b/components/src/modals/__tests__/ModalHeader.test.tsx index 8d7ded021b1..c11620ae17d 100644 --- a/components/src/modals/__tests__/ModalHeader.test.tsx +++ b/components/src/modals/__tests__/ModalHeader.test.tsx @@ -51,9 +51,6 @@ describe('ModalHeader', () => { expect(screen.getByTestId('Modal_header_icon')).toHaveStyle( `height: 1.25rem` ) - expect(screen.getByTestId('Modal_header_icon')).toHaveStyle( - `margin-right: ${SPACING.spacing8}` - ) }) it('should call a mock function when clicking close icon', () => { From 24b246d98ce0af70b0fdcddd87ece049cd1e06f8 Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 7 Jan 2025 14:54:12 -0500 Subject: [PATCH 07/10] fix lint error --- components/src/modals/__tests__/ModalHeader.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/src/modals/__tests__/ModalHeader.test.tsx b/components/src/modals/__tests__/ModalHeader.test.tsx index c11620ae17d..051dfea623d 100644 --- a/components/src/modals/__tests__/ModalHeader.test.tsx +++ b/components/src/modals/__tests__/ModalHeader.test.tsx @@ -4,7 +4,6 @@ import { describe, it, expect, vi, beforeEach } from 'vitest' import { renderWithProviders } from '../../testing/utils' import { COLORS } from '../../helix-design-system' -import { SPACING } from '../../ui-style-constants' import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles' import { ModalHeader } from '../ModalHeader' From 5c8a340db05c6dc52644927cabc6199f6e288092 Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 7 Jan 2025 16:34:56 -0500 Subject: [PATCH 08/10] remove the comment about styled text replacement --- components/src/modals/ModalHeader.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/src/modals/ModalHeader.tsx b/components/src/modals/ModalHeader.tsx index a9eeac30dd4..eb6b2b6abc3 100644 --- a/components/src/modals/ModalHeader.tsx +++ b/components/src/modals/ModalHeader.tsx @@ -48,7 +48,6 @@ export const ModalHeader = (props: ModalHeaderProps): JSX.Element => { {icon != null && } {titleElement1} {titleElement2} - {/* TODO (nd: 08/07/2024) Convert to StyledText once designs are resolved */} {title} From 53d5a89dd2c783e037e1b0c36bdfb8b9b7a71248 Mon Sep 17 00:00:00 2001 From: koji Date: Wed, 8 Jan 2025 11:31:52 -0500 Subject: [PATCH 09/10] address feedback --- components/src/modals/ModalHeader.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/src/modals/ModalHeader.tsx b/components/src/modals/ModalHeader.tsx index eb6b2b6abc3..6472157400f 100644 --- a/components/src/modals/ModalHeader.tsx +++ b/components/src/modals/ModalHeader.tsx @@ -69,7 +69,6 @@ export const ModalHeader = (props: ModalHeaderProps): JSX.Element => { /> ))} - {/* */} From cd97cf27852a483f334cd3685d96ad501a3df9ed Mon Sep 17 00:00:00 2001 From: koji Date: Wed, 8 Jan 2025 12:21:02 -0500 Subject: [PATCH 10/10] fix modal stories --- components/src/modals/Modal.stories.tsx | 70 ++++++++++--------------- 1 file changed, 27 insertions(+), 43 deletions(-) diff --git a/components/src/modals/Modal.stories.tsx b/components/src/modals/Modal.stories.tsx index 6adfcbc3274..76cef153d47 100644 --- a/components/src/modals/Modal.stories.tsx +++ b/components/src/modals/Modal.stories.tsx @@ -1,52 +1,36 @@ -import type * as React from 'react' +import { PrimaryButton, StyledText } from '../atoms' +import { SPACING } from '../ui-style-constants' +import { Flex } from '../primitives' +import { JUSTIFY_END } from '../styles' +import { Modal as ModalComponent } from './Modal' -import { LegacyStyledText } from '../atoms' -import { SPACING, TYPOGRAPHY } from '../ui-style-constants' -import { PrimaryBtn } from '../primitives' -import { COLORS } from '../helix-design-system' -import { Modal } from './Modal' +import type { Meta, StoryObj } from '@storybook/react' -import type { Story, Meta } from '@storybook/react' - -export default { +const meta: Meta = { title: 'Library/Molecules/modals/Modal', - component: Modal, -} as Meta - -const Template: Story> = args => ( - -) + component: ModalComponent, +} +export default meta +type Story = StoryObj +const bodyText = 'Modal body goes here' const Children = ( - <> - - {'Modal body goes here'} - + {bodyText} +) - - - {'btn text'} - - - +const Footer = ( + + {}}>{'btn text'} + ) -export const Primary = Template.bind({}) -Primary.args = { - type: 'info', - onClose: () => {}, - closeOnOutsideClick: false, - title: 'Modal Title', - children: Children, +export const Modal: Story = { + args: { + type: 'info', + onClose: () => {}, + closeOnOutsideClick: false, + title: 'Modal Title', + children: Children, + footer: Footer, + }, }