From 09e3fa9afbcc0e92dae2dbc4d12298db01974223 Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Wed, 7 Aug 2024 13:09:27 -0400
Subject: [PATCH] feat(app): update LegacyModalHeader for new designs  (#15914)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 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
---
 .../LegacyModal/LegacyModalHeader.tsx         | 20 ++++++++++++++++---
 app/src/molecules/LegacyModal/index.tsx       |  6 ++++++
 .../SetupLabware/LabwareStackModal.tsx        |  1 +
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/src/molecules/LegacyModal/LegacyModalHeader.tsx b/app/src/molecules/LegacyModal/LegacyModalHeader.tsx
index 725df7c0c4b..8c884deef80 100644
--- 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
index 7f5a6004111..98d05f0cea0 100644
--- 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
index 2c89240bf6f..601cbc1d091 100644
--- 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}>