update magnet tools listitem and add line clamp sytle to atoms

Opentrons · Oct 22, 2024 · 43f721a · 43f721a
1 parent 8175add
commit 43f721a
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 42 deletions.
diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
@@ -11,12 +11,13 @@ 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 } = props
+  const { description, content, type, isInSlideout = false } = props
   return (
     <Flex
       flexDirection={DIRECTION_ROW}
@@ -26,7 +27,9 @@ export const ListItemDescriptor = (
       justifyContent={type === 'default' ? JUSTIFY_SPACE_BETWEEN : 'none'}
       padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
     >
-      <Flex minWidth="13.75rem">{description}</Flex>
+      <Flex minWidth={isInSlideout ? undefined : '13.75rem'}>
+        {description}
+      </Flex>
       <Flex width="100%">{content}</Flex>
     </Flex>
   )

diff --git a/protocol-designer/src/atoms/constants.ts b/protocol-designer/src/atoms/constants.ts
@@ -1,9 +1,21 @@
 import { css } from 'styled-components'
-import { COLORS } from '@opentrons/components'
+import { COLORS, OVERFLOW_HIDDEN } from '@opentrons/components'
+import type { FlattenSimpleInterpolation } from 'styled-components'
 
 export const BUTTON_LINK_STYLE = css`
   color: ${COLORS.grey60};
   &:hover {
     color: ${COLORS.grey40};
   }
 `
+
+export const LINE_CLAMP_TEXT_STYLE = (
+  lineClamp: number
+): FlattenSimpleInterpolation => css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: ${OVERFLOW_HIDDEN};
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  -webkit-line-clamp: ${lineClamp};
+`
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
@@ -2,11 +2,12 @@ import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   COLORS,
-  DIRECTION_COLUMN,
   DeckInfoLabel,
+  DIRECTION_COLUMN,
   Divider,
   Flex,
   ListItem,
+  ListItemDescriptor,
   SPACING,
   StyledText,
 } from '@opentrons/components'
@@ -30,6 +31,7 @@ import {
   getModuleEntities,
 } from '../../../../../../step-forms/selectors'
 import { getModulesOnDeckByType } from '../../../../../../ui/modules/utils'
+import { LINE_CLAMP_TEXT_STYLE } from '../../../../../../atoms'
 
 import type { StepFormProps } from '../../types'
 
@@ -80,22 +82,31 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
           {t('protocol_steps:module')}
         </StyledText>
         <ListItem type="noActive">
-          <Flex padding={SPACING.spacing12} gridGap={SPACING.spacing32}>
-            <Flex>
-              <DeckInfoLabel deckLabel={slotLocation} />
-            </Flex>
-            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {slotInfo[0]}
-              </StyledText>
-              <StyledText
-                desktopStyle="bodyDefaultRegular"
-                color={COLORS.grey60}
-              >
-                {slotInfo[1]}
-              </StyledText>
-            </Flex>
-          </Flex>
+          <ListItemDescriptor
+            type="large"
+            isInSlideout
+            content={
+              <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  css={LINE_CLAMP_TEXT_STYLE(2)}
+                >
+                  {slotInfo[0]}
+                </StyledText>
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  color={COLORS.grey60}
+                >
+                  {slotInfo[1]}
+                </StyledText>
+              </Flex>
+            }
+            description={
+              <Flex width="2.875rem">
+                <DeckInfoLabel deckLabel={slotLocation} />
+              </Flex>
+            }
+          />
         </ListItem>
       </Flex>
       <Divider marginY="0" />

diff --git a/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx b/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
@@ -8,10 +7,10 @@ import {
   LiquidIcon,
   ListItem,
   ListItemDescriptor,
-  OVERFLOW_HIDDEN,
   SPACING,
   StyledText,
 } from '@opentrons/components'
+import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 
 import type { AllIngredGroupFields } from '../../labware-ingred/types'
 
@@ -44,7 +43,7 @@ export function LiquidDefinitions({
                       desktopStyle="bodyDefaultRegular"
                       overflowWrap="anywhere"
                       id="liquid-name"
-                      css={LIQUID_DEFINITION_TEXT}
+                      css={LINE_CLAMP_TEXT_STYLE(3)}
                     >
                       {liquid.name}
                     </StyledText>
@@ -61,11 +60,3 @@ export function LiquidDefinitions({
     </Flex>
   )
 }
-
-const LIQUID_DEFINITION_TEXT = css`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: ${OVERFLOW_HIDDEN};
-  text-overflow: ellipsis;
-`
diff --git a/protocol-designer/src/pages/ProtocolOverview/index.tsx b/protocol-designer/src/pages/ProtocolOverview/index.tsx
@@ -41,7 +41,7 @@ import {
   getUnusedTrash,
 } from '../../components/FileSidebar/utils'
 import { MaterialsListModal } from '../../organisms/MaterialsListModal'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { BUTTON_LINK_STYLE, LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../../components/portals/MainPageModalPortal'
 import {
   EditProtocolMetadataModal,
@@ -292,7 +292,7 @@ export function ProtocolOverview(): JSX.Element {
           <Flex flex="1">
             <StyledText
               desktopStyle="displayBold"
-              css={PROTOCOL_NAME_TEXT_STYLE}
+              css={LINE_CLAMP_TEXT_STYLE(3)}
             >
               {protocolName != null && protocolName !== ''
                 ? protocolName
@@ -418,15 +418,6 @@ export function ProtocolOverview(): JSX.Element {
   )
 }
 
-const PROTOCOL_NAME_TEXT_STYLE = css`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  -webkit-line-clamp: 3;
-`
-
 const MIN_OVERVIEW_WIDTH = '64rem'
 const COLUMN_GRID_GAP = '5rem'
 const COLUMN_STYLE = css`