fix(protocol-designer): update ListItemDescriptor to align with the l…

…atest design update ListItemDescriptor to align with the latest design close AUTH-895
Opentrons · Oct 22, 2024 · fccc98b · fccc98b
1 parent dfee506
commit fccc98b
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 12 deletions.
diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
@@ -2,43 +2,40 @@ 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
 }
 
 export const ListItemDescriptor = (
   props: ListItemDescriptorProps
 ): JSX.Element => {
-  const { description, content, type } = props
+  const { description, content, type, paddingType } = props
   return (
     <Flex
       flexDirection={DIRECTION_ROW}
       gridGap={SPACING.spacing8}
       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
@@ -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
@@ -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
@@ -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,13 +104,15 @@ export function InstrumentsInfo({
         </ListItem>
         <ListItem type="noActive" key={`ProtocolOverview_left`}>
           <ListItemDescriptor
+            paddingType="large"
             type="default"
             description={t('left_pip')}
             content={pipetteInfo(leftPipette)}
           />
         </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
@@ -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
@@ -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
@@ -33,6 +33,7 @@ export function StepsInfo({ savedStepForms }: StepsInfoProps): JSX.Element {
         ) : (
           <ListItem type="noActive" key="ProtocolOverview_Step">
             <ListItemDescriptor
+              paddingType="large"
               type="default"
               description={
                 <StyledText