fix(protocol-designer): fix ListItemDescriptor content and descriptio…

…n alignment issue fix ListItemDescriptor content and description alignment issue close RQA-3424
Opentrons · Oct 23, 2024 · 5bd0b5c · 5bd0b5c
1 parent 1d7b1f7
commit 5bd0b5c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 22 deletions.
diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
@@ -10,13 +10,12 @@ interface ListItemDescriptorProps {
   type: 'default' | 'large'
   description: JSX.Element | string
   content: JSX.Element | string
-  isInSlideout?: boolean
 }
 
 export const ListItemDescriptor = (
   props: ListItemDescriptorProps
 ): JSX.Element => {
-  const { description, content, type, isInSlideout = false } = props
+  const { description, content, type } = props
   return (
     <Flex
       flexDirection={DIRECTION_ROW}
@@ -26,10 +25,8 @@ export const ListItemDescriptor = (
       justifyContent={type === 'default' ? JUSTIFY_SPACE_BETWEEN : 'none'}
       padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
     >
-      <Flex minWidth={isInSlideout ? undefined : '13.75rem'}>
-        {description}
-      </Flex>
-      <Flex width="100%">{content}</Flex>
+      {description}
+      {content}
     </Flex>
   )
 }
diff --git a/protocol-designer/src/organisms/SlotInformation/index.tsx b/protocol-designer/src/organisms/SlotInformation/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 import {
@@ -12,6 +11,7 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
+import type { FC } from 'react'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 import type { RobotType } from '@opentrons/shared-data'
 
@@ -25,7 +25,7 @@ interface SlotInformationProps {
   fixtures?: string[]
 }
 
-export const SlotInformation: React.FC<SlotInformationProps> = ({
+export const SlotInformation: FC<SlotInformationProps> = ({
   location,
   robotType,
   liquids = [],
@@ -50,10 +50,10 @@ export const SlotInformation: React.FC<SlotInformationProps> = ({
       </Flex>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
         {liquids.length > 1 ? (
-          <ListItem type="noActive">
+          <ListItem type="noActive" width="max-content">
             <ListItemDescriptor
               type="default"
-              content={liquids.join(', ')}
+              content={<StyledText>liquids.join(', ')</StyledText>}
               description={t('liquid')}
             />
           </ListItem>
@@ -115,18 +115,14 @@ function StackInfo({ title, stackInformation }: StackInfoProps): JSX.Element {
       <ListItemDescriptor
         type="default"
         content={
-          stackInformation != null ? (
-            <StyledText
-              desktopStyle="bodyDefaultRegular"
-              textAlign={TYPOGRAPHY.textAlignRight}
-            >
-              {stackInformation}
-            </StyledText>
-          ) : (
-            t('none')
-          )
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            textAlign={TYPOGRAPHY.textAlignRight}
+          >
+            {stackInformation ?? t('none')}
+          </StyledText>
         }
-        description={title}
+        description={<Flex width="7.40625rem">{title}</Flex>}
       />
     </ListItem>
   )

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx
@@ -83,7 +83,6 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
         <ListItem type="noActive">
           <ListItemDescriptor
             type="large"
-            isInSlideout
             content={
               <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
                 <StyledText