From fccc98ba89cfa5192754613aa656445fbaf7a499 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Tue, 22 Oct 2024 13:36:52 -0400
Subject: [PATCH] fix(protocol-designer): update ListItemDescriptor to align
 with the latest design

update ListItemDescriptor to align with the latest design

close AUTH-895
---
 .../ListItemChildren/ListItemDescriptor.tsx   | 21 ++++++++-----------
 .../organisms/MaterialsListModal/index.tsx    |  3 +++
 .../src/organisms/SlotInformation/index.tsx   |  2 ++
 .../ProtocolOverview/InstrumentsInfo.tsx      |  4 ++++
 .../ProtocolOverview/LiquidDefinitions.tsx    |  1 +
 .../ProtocolOverview/ProtocolMetadata.tsx     |  2 ++
 .../src/pages/ProtocolOverview/StepsInfo.tsx  |  1 +
 7 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
index 51d9ca9e181..3ffac8332f1 100644
--- a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
+++ b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
@@ -2,13 +2,14 @@ import { Flex } from '../../../primitives'
 import {
   ALIGN_FLEX_START,
   DIRECTION_ROW,
-  FLEX_AUTO,
+  // FLEX_AUTO,
   JUSTIFY_SPACE_BETWEEN,
 } from '../../../styles'
 import { SPACING } from '../../../ui-style-constants'
 
 interface ListItemDescriptorProps {
   type: 'default' | 'mini'
+  paddingType: 'default' | 'large'
   description: JSX.Element | string
   content: JSX.Element | string
 }
@@ -16,7 +17,7 @@ interface ListItemDescriptorProps {
 export const ListItemDescriptor = (
   props: ListItemDescriptorProps
 ): JSX.Element => {
-  const { description, content, type } = props
+  const { description, content, type, paddingType } = props
   return (
     <Flex
       flexDirection={DIRECTION_ROW}
@@ -24,21 +25,17 @@ export const ListItemDescriptor = (
       width="100%"
       alignItems={ALIGN_FLEX_START}
       justifyContent={type === 'mini' ? JUSTIFY_SPACE_BETWEEN : 'none'}
-      padding={
-        type === 'mini'
-          ? `${SPACING.spacing4} ${SPACING.spacing8}`
-          : SPACING.spacing12
-      }
+      padding={paddingType === 'default' ? SPACING.spacing4 : SPACING.spacing12}
     >
       <Flex
-        flex={type === 'default' && '1'}
-        width={type === 'mini' ? FLEX_AUTO : '40%'}
+        // flex={type === 'default' && '1'}
+        // width={type === 'mini' ? FLEX_AUTO : '40%'}
+        // width="13.75rem"
+        minWidth="13.75rem"
       >
         {description}
       </Flex>
-      <Flex flex={type === 'default' && '1.95'} overflowWrap="anywhere">
-        {content}
-      </Flex>
+      <Flex width="100%">{content}</Flex>
     </Flex>
   )
 }
diff --git a/protocol-designer/src/organisms/MaterialsListModal/index.tsx b/protocol-designer/src/organisms/MaterialsListModal/index.tsx
index 0d5c90c1f4b..937cb7d04b0 100644
--- a/protocol-designer/src/organisms/MaterialsListModal/index.tsx
+++ b/protocol-designer/src/organisms/MaterialsListModal/index.tsx
@@ -93,6 +93,7 @@ export function MaterialsListModal({
                 ? fixtures.map(fixture => (
                     <ListItem type="noActive" key={fixture.id}>
                       <ListItemDescriptor
+                        paddingType="large"
                         type="default"
                         description={
                           fixture.location != null ? (
@@ -128,6 +129,7 @@ export function MaterialsListModal({
                   return (
                     <ListItem type="noActive" key={`hardware${id}`}>
                       <ListItemDescriptor
+                        paddingType="large"
                         type="default"
                         description={
                           <DeckInfoLabel deckLabel={formatLocation(hw.slot)} />
@@ -187,6 +189,7 @@ export function MaterialsListModal({
                   return (
                     <ListItem type="noActive" key={`labware_${lw.id}`}>
                       <ListItemDescriptor
+                        paddingType="large"
                         type="default"
                         description={
                           <DeckInfoLabel deckLabel={deckLabelSlot} />
diff --git a/protocol-designer/src/organisms/SlotInformation/index.tsx b/protocol-designer/src/organisms/SlotInformation/index.tsx
index 19c4e25f2e5..380ae5339d8 100644
--- a/protocol-designer/src/organisms/SlotInformation/index.tsx
+++ b/protocol-designer/src/organisms/SlotInformation/index.tsx
@@ -52,6 +52,7 @@ export const SlotInformation: React.FC<SlotInformationProps> = ({
         {liquids.length > 1 ? (
           <ListItem type="noActive">
             <ListItemDescriptor
+              paddingType="default"
               type="mini"
               content={liquids.join(', ')}
               description={t('liquid')}
@@ -113,6 +114,7 @@ function StackInfo({ title, stackInformation }: StackInfoProps): JSX.Element {
   return (
     <ListItem type="noActive">
       <ListItemDescriptor
+        paddingType="default"
         type="mini"
         content={
           stackInformation != null ? (
diff --git a/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx b/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
index e87b6550904..d1f307f1cdc 100644
--- a/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
@@ -92,6 +92,7 @@ export function InstrumentsInfo({
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
         <ListItem type="noActive" key={`ProtocolOverview_robotType`}>
           <ListItemDescriptor
+            paddingType="large"
             type="default"
             description={t('robotType')}
             content={
@@ -103,6 +104,7 @@ export function InstrumentsInfo({
         </ListItem>
         <ListItem type="noActive" key={`ProtocolOverview_left`}>
           <ListItemDescriptor
+            paddingType="large"
             type="default"
             description={t('left_pip')}
             content={pipetteInfo(leftPipette)}
@@ -110,6 +112,7 @@ export function InstrumentsInfo({
         </ListItem>
         <ListItem type="noActive" key={`ProtocolOverview_right`}>
           <ListItemDescriptor
+            paddingType="large"
             type="default"
             description={t('right_pip')}
             content={pipetteInfo(rightPipette)}
@@ -118,6 +121,7 @@ export function InstrumentsInfo({
         {robotType === FLEX_ROBOT_TYPE ? (
           <ListItem type="noActive" key={`ProtocolOverview_gripper`}>
             <ListItemDescriptor
+              paddingType="large"
               type="default"
               description={t('extension')}
               content={isGripperAttached ? t('gripper') : t('na')}
diff --git a/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx b/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
index 03c274ce104..adb739f3d31 100644
--- a/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
@@ -36,6 +36,7 @@ export function LiquidDefinitions({
               key={`${liquid.name}_${liquid.displayColor}_${index}`}
             >
               <ListItemDescriptor
+                paddingType="large"
                 type="default"
                 description={
                   <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
diff --git a/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx b/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
index 7bb26264b8f..b91f262b159 100644
--- a/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
@@ -61,6 +61,7 @@ export function ProtocolMetadata({
           return (
             <ListItem type="noActive" key={`ProtocolOverview_${title}`}>
               <ListItemDescriptor
+                paddingType="large"
                 type="default"
                 description={t(`${title}`)}
                 content={value ?? t('na')}
@@ -70,6 +71,7 @@ export function ProtocolMetadata({
         })}
         <ListItem type="noActive" key="ProtocolOverview_robotVersion">
           <ListItemDescriptor
+            paddingType="large"
             type="default"
             description={t('required_app_version')}
             content={t('app_version', {
diff --git a/protocol-designer/src/pages/ProtocolOverview/StepsInfo.tsx b/protocol-designer/src/pages/ProtocolOverview/StepsInfo.tsx
index e0385336251..34da59b34b8 100644
--- a/protocol-designer/src/pages/ProtocolOverview/StepsInfo.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/StepsInfo.tsx
@@ -33,6 +33,7 @@ export function StepsInfo({ savedStepForms }: StepsInfoProps): JSX.Element {
         ) : (
           <ListItem type="noActive" key="ProtocolOverview_Step">
             <ListItemDescriptor
+              paddingType="large"
               type="default"
               description={
                 <StyledText