feat(app): update LegacyModalHeader for new designs (#15914)

# Overview Update `LegacyModalHeader` according to new designs to accept up to 2 elements ahead of title text. Add props to `LegacyModal` that are passed down to header, and implement at `LabwareStackRender` <img width="532" alt="Screenshot 2024-08-07 at 11 57 09 AM" src="https://github.com/user-attachments/assets/537f5a7c-b148-4641-b000-40da0d8da3ea"> Closes PLAT-395
Opentrons · Aug 7, 2024 · 09e3fa9 · 09e3fa9
1 parent 45344f5
commit 09e3fa9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/app/src/molecules/LegacyModal/LegacyModalHeader.tsx b/app/src/molecules/LegacyModal/LegacyModalHeader.tsx
@@ -8,8 +8,8 @@ import {
   Icon,
   JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
-  SPACING,
   LegacyStyledText,
+  SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -19,6 +19,8 @@ import type { IconProps } from '@opentrons/components'
 export interface LegacyModalHeaderProps {
   onClose?: React.MouseEventHandler
   title: React.ReactNode
+  titleElement1?: JSX.Element
+  titleElement2?: JSX.Element
   backgroundColor?: string
   color?: string
   icon?: IconProps
@@ -44,7 +46,16 @@ const closeIconStyles = css`
 export const LegacyModalHeader = (
   props: LegacyModalHeaderProps
 ): JSX.Element => {
-  const { icon, onClose, title, backgroundColor, color, closeButton } = props
+  const {
+    icon,
+    onClose,
+    title,
+    titleElement1,
+    titleElement2,
+    backgroundColor,
+    color,
+    closeButton,
+  } = props
   return (
     <>
       <Flex
@@ -55,8 +66,11 @@ export const LegacyModalHeader = (
         backgroundColor={backgroundColor}
         data-testid="Modal_header"
       >
-        <Flex>
+        <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
           {icon != null && <Icon {...icon} data-testid="Modal_header_icon" />}
+          {titleElement1}
+          {titleElement2}
+          {/* TODO (nd: 08/07/2024) Convert to StyledText once designs are resolved */}
           <LegacyStyledText
             as="h3"
             fontWeight={TYPOGRAPHY.fontWeightSemiBold}

diff --git a/app/src/molecules/LegacyModal/index.tsx b/app/src/molecules/LegacyModal/index.tsx
@@ -13,6 +13,8 @@ export interface LegacyModalProps extends StyleProps {
   onClose?: React.MouseEventHandler
   closeOnOutsideClick?: boolean
   title?: React.ReactNode
+  titleElement1?: JSX.Element
+  titleElement2?: JSX.Element
   fullPage?: boolean
   childrenPadding?: string | number
   children?: React.ReactNode
@@ -31,6 +33,8 @@ export const LegacyModal = (props: LegacyModalProps): JSX.Element => {
     childrenPadding = `${SPACING.spacing16} ${SPACING.spacing24} ${SPACING.spacing24}`,
     children,
     footer,
+    titleElement1,
+    titleElement2,
     ...styleProps
   } = props
 
@@ -58,6 +62,8 @@ export const LegacyModal = (props: LegacyModalProps): JSX.Element => {
     <LegacyModalHeader
       onClose={onClose}
       title={title}
+      titleElement1={titleElement1}
+      titleElement2={titleElement2}
       icon={['error', 'warning'].includes(type) ? modalIcon : undefined}
       color={COLORS.black90}
       backgroundColor={COLORS.white}

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx
@@ -159,6 +159,7 @@ export const LabwareStackModal = (
         </Flex>
       }
       childrenPadding={0}
+      marginLeft="0"
     >
       <Box padding={SPACING.spacing24} backgroundColor={COLORS.white}>
         <Flex flexDirection={DIRECTION_COLUMN}>