@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.0

package/src/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.tsx

@@ -1,10 +1,8 @@
 import { screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { DeckInfoLabel } from '..'
-import { BORDERS, COLORS } from '../../../helix-design-system'
 import { renderWithProviders } from '../../../testing/utils'
-import { SPACING } from '../../../ui-style-constants'
+import { DeckInfoLabel } from '../index'
 
 import type { ComponentProps } from 'react'
 
@@ -24,13 +22,9 @@ describe('DeckInfoLabel', () => {
   it('should render the proper styles - web style', () => {
     render(props)
     const deckInfoLabel = screen.getByTestId('DeckInfoLabel_A1')
-    expect(deckInfoLabel).toHaveStyle(
-      `padding: ${SPACING.spacing2} ${SPACING.spacing4}`
-    )
-    expect(deckInfoLabel).toHaveStyle(`height: ${SPACING.spacing20}`)
-    expect(deckInfoLabel).toHaveStyle('width: max-content')
-    expect(deckInfoLabel).toHaveStyle(`border: 1px solid ${COLORS.black90}`)
-    expect(deckInfoLabel).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
+    expect(deckInfoLabel.className).toContain('label')
+    expect(deckInfoLabel.className).toContain('deck_info_label_no_highlight')
+    expect(deckInfoLabel.className).toContain('default')
   })
 
   it.todo('should render the proper styles - odd style')
@@ -45,6 +39,16 @@ describe('DeckInfoLabel', () => {
       iconName: 'ot-temperature-v2',
     }
     render(props)
-    screen.getByLabelText(props.iconName)
+    screen.getByLabelText('ot-temperature-v2')
+  })
+
+  it('should render an icon large', () => {
+    props = {
+      iconName: 'ot-temperature-v2',
+      size: 'large',
+    }
+    render(props)
+    const deckInfoLabelIcon = screen.getByLabelText('ot-temperature-v2')
+    expect(deckInfoLabelIcon).toHaveStyle('height: 1.5rem')
   })
 })

package/src/molecules/DeckInfoLabel/deckinfolabel.module.css

@@ -0,0 +1,42 @@
+.label {
+  display: inline-flex;
+  width: max-content;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--border-radius-8);
+  background-color: inherit;
+}
+
+.deck_info_label_highlight {
+  border-color: transparent;
+  background-color: var(--color-blue50);
+}
+
+.deck_info_label_no_highlight {
+  border-color: var(--color-black90);
+}
+
+.large {
+  height: 1.75rem;
+  border-width: 2px;
+}
+
+.default {
+  height: 1.25rem;
+}
+
+@media (height: 600px) and (width: 1024px) {
+  .label {
+    height: var(--spacing-32);
+    padding: var(--spacing-4) var(--spacing-6);
+    border-width: 2px;
+    border-radius: var(--border-radius-12);
+  }
+
+  .has_deck_label {
+    padding-right: var(--spacing-8);
+  }
+}

package/src/molecules/DeckInfoLabel/index.tsx

@@ -1,95 +1,69 @@
-import styled from 'styled-components'
+import clsx from 'clsx'
 
-import { StyledText } from '../../atoms'
-import { BORDERS, COLORS } from '../../helix-design-system'
+import { PlaceholderStyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
-import { Flex } from '../../primitives'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import styles from './deckinfolabel.module.css'
 
-import type { IconName, ModuleIconName } from '../../icons'
-import type { StyleProps } from '../../primitives'
-
-interface DeckLabelProps extends StyleProps {
-  /** deck label to display */
-  deckLabel: string
-  iconName?: IconName
-}
-
-interface HardwareIconProps extends StyleProps {
-  /** hardware icon name */
-  iconName: ModuleIconName | 'stacked'
+export interface DeckInfoLabelProps {
   deckLabel?: string
-}
-
-// type union requires one of deckLabel or iconName, but not both
-export type DeckInfoLabelProps = (DeckLabelProps | HardwareIconProps) & {
+  iconName?: string
   highlight?: boolean
+  size?: 'large' | 'default'
+  height?: string | number
+  width?: string | number
   svgSize?: string | number
+  transform?: string
 }
 
-export const DeckInfoLabel = styled(DeckInfoLabelComponent)`
-  align-items: ${ALIGN_CENTER};
-  background-color: ${props =>
-    props.highlight ?? false ? COLORS.blue50 : 'inherit'};
-  border: 1px solid
-    ${props => (props.highlight ?? false ? 'transparent' : COLORS.black90)};
-  width: ${props => props.width ?? 'max-content'};
-  padding: ${SPACING.spacing2} ${SPACING.spacing4};
-  border-radius: ${BORDERS.borderRadius8};
-  justify-content: ${JUSTIFY_CENTER};
-  height: ${props =>
-    props.height ?? SPACING.spacing20}; // prevents the icon from being squished
-
-  > svg {
-    height: ${props => props.svgSize ?? '0.875rem'};
-    width: ${props => props.svgSize ?? '0.875rem'};
-  }
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    border-width: 2px;
-    border-radius: ${BORDERS.borderRadius12};
-    height: ${props => props.height ?? SPACING.spacing32};
-    padding: ${SPACING.spacing4}
-      ${props =>
-        props.deckLabel != null ? SPACING.spacing8 : SPACING.spacing6};
-    > svg {
-      height: ${props => props.svgSize ?? '1.25rem'};
-      width: ${props => props.svgSize ?? '1.25rem'};
-    }
-  }
-`
-
-function DeckInfoLabelComponent({
+export function DeckInfoLabel({
   deckLabel,
   iconName,
   highlight = false,
-  ...styleProps
+  size = 'default',
+  height,
+  width,
+  transform,
+  svgSize,
 }: DeckInfoLabelProps): JSX.Element {
+  const labelClass = clsx(
+    styles.label,
+    highlight
+      ? styles.deck_info_label_highlight
+      : styles.deck_info_label_no_highlight,
+    styles[size],
+    {
+      [styles.has_deck_label]: deckLabel != null,
+    }
+  )
+
   return (
-    <Flex
+    <div
+      className={labelClass}
+      style={{ height, width, transform }}
       data-testid={
         deckLabel != null
           ? `DeckInfoLabel_${deckLabel}`
           : `DeckInfoLabel_${iconName}`
       }
-      {...styleProps}
     >
       {iconName != null ? (
         <Icon
           name={iconName}
+          height={svgSize ?? (size === 'large' ? '1.5rem' : '0.875rem')}
+          width={svgSize ?? (size === 'large' ? '1.5rem' : '0.875rem')}
           color={highlight ? COLORS.white : COLORS.black90}
           aria-label={iconName}
         />
       ) : (
-        <StyledText
-          desktopStyle="captionBold"
+        <PlaceholderStyledText
+          desktopStyle={size === 'large' ? 'headingSmallBold' : 'captionBold'}
           oddStyle="smallBodyTextBold"
           color={highlight ? COLORS.white : COLORS.black90}
         >
           {deckLabel}
-        </StyledText>
+        </PlaceholderStyledText>
       )}
-    </Flex>
+    </div>
   )
 }

package/src/molecules/DropdownMenu/index.tsx

@@ -292,7 +292,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
           onFocus={onFocus}
           onBlur={onBlur}
           css={DROPDOWN_STYLE}
-          data-testId="dropdownMenu"
+          data-testid="dropdownMenu"
           tabIndex={tabIndex}
         >
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
@@ -310,12 +310,14 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                   : TYPOGRAPHY.pRegular};
               `}
             >
-              <StyledText
-                desktopStyle="captionRegular"
-                css={LINE_CLAMP_TEXT_STYLE(1)}
-              >
-                {currentOption.name}
-              </StyledText>
+              {currentOption.deckLabel !== currentOption.name ? (
+                <StyledText
+                  desktopStyle="captionRegular"
+                  css={LINE_CLAMP_TEXT_STYLE(1)}
+                >
+                  {currentOption.name}
+                </StyledText>
+              ) : null}
             </Flex>
           </Flex>
           <Icon
@@ -363,12 +365,14 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                       flexDirection={DIRECTION_COLUMN}
                       gridGap={option.subtext != null ? SPACING.spacing4 : '0'}
                     >
-                      <StyledText
-                        desktopStyle="captionRegular"
-                        css={LINE_CLAMP_TEXT_STYLE(3, true)}
-                      >
-                        {option.name}
-                      </StyledText>
+                      {option.deckLabel !== option.name ? (
+                        <StyledText
+                          desktopStyle="captionRegular"
+                          css={LINE_CLAMP_TEXT_STYLE(3, true)}
+                        >
+                          {option.name}
+                        </StyledText>
+                      ) : null}
                       <StyledText
                         desktopStyle="captionRegular"
                         color={COLORS.grey60}

package/src/molecules/InfoScreen/index.tsx

@@ -3,7 +3,7 @@ import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_COLUMN, JUSTIFY_CENTER } from '../../styles'
-import { SPACING } from '../../ui-style-constants/index'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants/index'
 
 interface InfoScreenProps {
   content: string
@@ -44,7 +44,11 @@ export function InfoScreen({
       >
         <StyledText desktopStyle="bodyDefaultSemiBold">{content}</StyledText>
         {subContent != null ? (
-          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            color={COLORS.grey60}
+            textAlign={TYPOGRAPHY.textAlignCenter}
+          >
             {subContent}
           </StyledText>
         ) : null}

package/src/molecules/ReleaseNotes/styles.module.css

@@ -6,50 +6,50 @@
   padding: 0 0.5rem;
 
   & > h1 {
+    margin-bottom: 1rem;
+    color: var(--c-font-dark); /* from legacy --font-header-dark */
     font-size: var(--fs-header); /* from legacy --font-header-dark */
     font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
-    color: var(--c-font-dark); /* from legacy --font-header-dark */
-    margin-bottom: 1rem;
   }
 
   & > h2 {
-    font-size: var(--fs-header); /* from legacy --font-header-dark */
-    color: var(--c-font-dark); /* from legacy --font-header-dark */
-    font-weight: var(--fw-regular);
     margin-top: 1rem;
     margin-bottom: 0.75rem;
+    color: var(--c-font-dark); /* from legacy --font-header-dark */
+    font-size: var(--fs-header); /* from legacy --font-header-dark */
+    font-weight: var(--fw-regular);
   }
 
   & > h3 {
-    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    font-weight: var(--fw-semibold);
     margin-top: 0.75rem;
     margin-bottom: 0.5rem;
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+    font-weight: var(--fw-semibold);
   }
 
   & ul,
   & ol {
-    margin-left: 1.25rem;
     margin-bottom: 0.25rem;
-    font-size: var(--fs-body-2);
+    margin-left: 1.25rem;
     color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    font-size: var(--fs-body-2);
   }
 
   & li {
     margin: 0.25rem 0;
-    font-size: var(--fs-body-2);
     color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    font-size: var(--fs-body-2);
   }
 
   & code {
-    font-family: monospace;
     color: var(--c-font-dark);
+    font-family: monospace;
   }
 
   & pre {
-    margin: 0.5rem 0;
     padding: 0.5rem 0.75rem;
+    margin: 0.5rem 0;
     background-color: var(--c-font-dark);
 
     & code {
@@ -58,9 +58,9 @@
   }
 
   & p {
+    margin-bottom: 1rem;
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
     font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
     font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    margin-bottom: 1rem;
   }
 }

package/src/molecules/index.ts

@@ -1,11 +1,12 @@
 export * from './Banner'
+export * from './CustomizeExpandButton'
 export * from './DeckInfoLabel'
 export * from './DeckLabel'
 export * from './DropdownMenu'
 export * from './InfoScreen'
 export * from './LiquidIcon'
+export * from './ListAccordion'
 export * from './ParametersTable'
 export * from './ReleaseNotes'
 export * from './Tabs'
 export * from './TextListTableContent'
-export * from './ListAccordion'

package/src/nav/SidePanel.module.css

@@ -5,25 +5,25 @@
 }
 
 .panel {
-  flex-shrink: 0;
+  position: relative;
   overflow: visible;
+  flex-shrink: 0;
+  padding: 0 4px;
   border-right: var(--bd-light);
   background-color: var(--c-bg-light);
-  position: relative;
-  padding: 0 4px;
 }
 
 .title_bar {
   display: flex;
-  align-items: center;
   width: var(--sidebar-width);
+  align-items: center;
 }
 
 .title {
+  margin: 1rem auto;
+  color: var(--c-font-dark); /* from legacy --font-header-dark */
   font-size: var(--fs-header); /* from legacy --font-header-dark */
   font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
-  color: var(--c-font-dark); /* from legacy --font-header-dark */
-  margin: 1rem auto;
 }
 
 .panel_contents {

package/src/organisms/CommandText/__tests__/CommandText.test.tsx

@@ -23,7 +23,7 @@ import type {
   DispenseRunTimeCommand,
   DropTipInPlaceRunTimeCommand,
   DropTipRunTimeCommand,
-  LabwareDefinition2,
+  LabwareDefinition,
   LoadLabwareRunTimeCommand,
   LoadLiquidClassRunTimeCommand,
   LoadLiquidRunTimeCommand,
@@ -60,7 +60,7 @@ describe('CommandText', () => {
         { i18nInstance: i18n }
       )
       screen.getByText(
-        'Aspirating 100 µL from well A1 of NEST 1 Well Reservoir 195 mL in Slot 5 at 150 µL/sec'
+        'Aspirating 100.00 µL from well A1 of NEST 1 Well Reservoir 195 mL in Slot 5 at 150.00 µL/sec'
       )
     }
   })
@@ -80,7 +80,7 @@ describe('CommandText', () => {
         { i18nInstance: i18n }
       )
       screen.getByText(
-        'Dispensing 100 µL into well A1 of NEST 96 Well Plate 100 µL PCR Full Skirt (1) in Magnetic Module GEN2 in Slot 1 at 300 µL/sec'
+        'Dispensing 100.00 µL into well A1 of NEST 96 Well Plate 100 µL PCR Full Skirt (1) in Magnetic Module GEN2 in Slot 1 at 300.00 µL/sec'
       )
     }
   })
@@ -107,7 +107,7 @@ describe('CommandText', () => {
         { i18nInstance: i18n }
       )
       screen.getByText(
-        'Dispensing 100 µL into well A1 of NEST 96 Well Plate 100 µL PCR Full Skirt (1) in Magnetic Module GEN2 in Slot 1 at 300 µL/sec and pushing out 10 µL'
+        'Dispensing 100.00 µL into well A1 of NEST 96 Well Plate 100 µL PCR Full Skirt (1) in Magnetic Module GEN2 in Slot 1 at 300.00 µL/sec and pushing out 10.00 µL'
       )
     }
   })
@@ -130,7 +130,7 @@ describe('CommandText', () => {
       />,
       { i18nInstance: i18n }
     )
-    screen.getByText('Dispensing 50 µL in place at 300 µL/sec')
+    screen.getByText('Dispensing 50.00 µL in place at 300.00 µL/sec')
   })
   it('renders correct text for blowout', () => {
     const dispenseCommand = mockCommandTextData.commands.find(
@@ -152,7 +152,7 @@ describe('CommandText', () => {
         { i18nInstance: i18n }
       )
       screen.getByText(
-        'Blowing out at well A1 of NEST 96 Well Plate 100 µL PCR Full Skirt (1) in Magnetic Module GEN2 in Slot 1 at 300 µL/sec'
+        'Blowing out at well A1 of NEST 96 Well Plate 100 µL PCR Full Skirt (1) in Magnetic Module GEN2 in Slot 1 at 300.00 µL/sec'
       )
     }
   })
@@ -174,7 +174,7 @@ describe('CommandText', () => {
       />,
       { i18nInstance: i18n }
     )
-    screen.getByText('Blowing out in place at 300 µL/sec')
+    screen.getByText('Blowing out in place at 300.00 µL/sec')
   })
   it('renders correct text for aspirateInPlace', () => {
     renderWithProviders(
@@ -187,15 +187,15 @@ describe('CommandText', () => {
             commandType: 'aspirateInPlace',
             params: {
               pipetteId: 'f6d1c83c-9d1b-4d0d-9de3-e6d649739cfb',
-              flowRate: 300,
-              volume: 10,
+              flowRate: 300.7653423,
+              volume: 10.12526,
             },
           } as AspirateInPlaceRunTimeCommand
         }
       />,
       { i18nInstance: i18n }
     )
-    screen.getByText('Aspirating 10 µL in place at 300 µL/sec')
+    screen.getByText('Aspirating 10.13 µL in place at 300.77 µL/sec')
   })
   it('renders correct text for moveToWell', () => {
     const dispenseCommand = mockCommandTextData.commands.find(
@@ -217,7 +217,7 @@ describe('CommandText', () => {
         { i18nInstance: i18n }
       )
       screen.getByText(
-        'Moving to well A1 of NEST 1 Well Reservoir 195 mL in Slot 5'
+        'Moving to X 0.00 Y 0.00 Z -24.00 relative to top of well A1 of NEST 1 Well Reservoir 195 mL in Slot 5'
       )
     }
   })
@@ -589,7 +589,7 @@ describe('CommandText', () => {
             labwareId: 'mockId',
             definition: {
               metadata: { displayName: 'mock displayName' },
-            } as LabwareDefinition2,
+            } as LabwareDefinition,
             offset: { x: 0, y: 0, z: 0 },
           },
           status: 'queued',

package/src/organisms/CommandText/index.tsx

@@ -9,7 +9,7 @@ import { useCommandTextString } from './useCommandTextString'
 
 import type { ComponentProps } from 'react'
 import type {
-  LabwareDefinition2,
+  LabwareDefinition,
   RobotType,
   RunTimeCommand,
 } from '@opentrons/shared-data'
@@ -36,7 +36,7 @@ type STProps = LegacySTProps | ModernSTProps
 
 interface BaseProps extends StyleProps {
   command: RunTimeCommand
-  allRunDefs: LabwareDefinition2[]
+  allRunDefs: LabwareDefinition[]
   commandTextData: CommandTextData
   robotType: RobotType
   isOnDevice?: boolean

package/src/organisms/CommandText/useCommandTextString/index.ts

@@ -4,7 +4,7 @@ import * as utils from './utils'
 
 import type { TFunction } from 'i18next'
 import type {
-  LabwareDefinition2,
+  LabwareDefinition,
   RobotType,
   RunTimeCommand,
 } from '@opentrons/shared-data'
@@ -19,7 +19,7 @@ export * from './utils'
 
 export interface UseCommandTextStringParams {
   command: RunTimeCommand | null
-  allRunDefs: LabwareDefinition2[]
+  allRunDefs: LabwareDefinition[]
   commandTextData: CommandTextData | null
   robotType: RobotType
 }

package/src/organisms/CommandText/useCommandTextString/utils/__tests__/getFinalLabwareLocation.test.ts

@@ -4,7 +4,7 @@ import { fixtureTiprack10ul } from '@opentrons/shared-data'
 
 import { getFinalLabwareLocation } from '../getFinalLabwareLocation'
 
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 
 describe('getFinalLabwareLocation', () => {
   it('calculates labware location after only load_labware', () => {
@@ -23,7 +23,7 @@ describe('getFinalLabwareLocation', () => {
           },
           result: {
             labwareId,
-            definition: fixtureTiprack10ul as LabwareDefinition2,
+            definition: fixtureTiprack10ul as LabwareDefinition,
             offset: { x: 1, y: 2, z: 3 },
           },
           status: 'succeeded',
@@ -51,7 +51,7 @@ describe('getFinalLabwareLocation', () => {
           },
           result: {
             labwareId,
-            definition: fixtureTiprack10ul as LabwareDefinition2,
+            definition: fixtureTiprack10ul as LabwareDefinition,
             offset: { x: 1, y: 2, z: 3 },
           },
           status: 'succeeded',
@@ -93,7 +93,7 @@ describe('getFinalLabwareLocation', () => {
           },
           result: {
             labwareId,
-            definition: fixtureTiprack10ul as LabwareDefinition2,
+            definition: fixtureTiprack10ul as LabwareDefinition,
             offset: { x: 1, y: 2, z: 3 },
           },
           status: 'succeeded',

package/src/organisms/CommandText/useCommandTextString/utils/commandText/__tests__/getPipettingCommandText.test.tsx

@@ -92,7 +92,7 @@ describe('getPipettingCommandText', () => {
 
     render(command)
     screen.getByText(
-      /Aspirating 100 µL from well A1 of Test Labware in Slot 1 at 150 µL\/sec/
+      /Aspirating 100.00 µL from well A1 of Test Labware in Slot 1 at 150.00 µL\/sec/
     )
   })
 
@@ -110,7 +110,7 @@ describe('getPipettingCommandText', () => {
 
     render(command)
     screen.getByText(
-      /Dispensing 100 µL into well A1 of Test Labware in Slot 1 at 150 µL\/sec/
+      /Dispensing 100.00 µL into well A1 of Test Labware in Slot 1 at 150.00 µL\/sec/
     )
   })
 
@@ -129,7 +129,7 @@ describe('getPipettingCommandText', () => {
 
     render(command)
     screen.getByText(
-      /Dispensing 100 µL into well A1 of Test Labware in Slot 1 at 150 µL\/sec and pushing out 10 µL/
+      /Dispensing 100.00 µL into well A1 of Test Labware in Slot 1 at 150.00 µL\/sec and pushing out 10.00 µL/
     )
   })
 

package/src/organisms/CommandText/useCommandTextString/utils/commandText/getFlexStackerCommandText.ts

@@ -8,8 +8,7 @@ import type {
   FlexStackerRetrieveRunTimeCommand,
   FlexStackerSetStoredLabwareRunTimeCommand,
   FlexStackerStoreRunTimeCommand,
-  LabwareDefinition2,
-  LabwareDefinition3,
+  LabwareDefinition,
   RunTimeCommand,
 } from '@opentrons/shared-data'
 import type { HandlesCommands } from '../types'
@@ -40,8 +39,7 @@ type GetFlexStackerCommandText = HandlesCommands<HandledCommands>
 
 const getLabwareDisplayName = (labwareUri: string, allRunDefs: any): string => {
   const currentLabwareDef = allRunDefs.find(
-    (def: LabwareDefinition2 | LabwareDefinition3) =>
-      getLabwareDefURI(def) === labwareUri
+    (def: LabwareDefinition) => getLabwareDefURI(def) === labwareUri
   )
   return currentLabwareDef?.metadata.displayName ?? null
 }

package/src/organisms/CommandText/useCommandTextString/utils/commandText/getMoveToWellCommandText.ts

@@ -12,7 +12,12 @@ export function getMoveToWellCommandText({
   commandTextData,
   robotType,
 }: HandlesCommands<MoveToWellRunTimeCommand>): string {
-  const { wellName, labwareId } = command.params
+  const { wellName, labwareId, wellLocation } = command.params
+  const {
+    x: xOffsetUnformatted,
+    y: yOffsetUnformatted,
+    z: zOffsetUnformatted,
+  } = wellLocation?.offset ?? { x: '', y: '', z: '' }
   const allPreviousCommands = commandTextData?.commands.slice(
     0,
     commandTextData.commands.findIndex(c => c.id === command.id)
@@ -31,8 +36,15 @@ export function getMoveToWellCommandText({
     t,
   })
 
+  const xOffset =
+    typeof xOffsetUnformatted === 'number' ? xOffsetUnformatted?.toFixed(2) : ''
+  const yOffset =
+    typeof yOffsetUnformatted === 'number' ? yOffsetUnformatted?.toFixed(2) : ''
+  const zOffset =
+    typeof zOffsetUnformatted === 'number' ? zOffsetUnformatted?.toFixed(2) : ''
+
   return t('move_to_well', {
-    well_name: wellName,
+    wellName,
     labware:
       commandTextData != null
         ? getLabwareName({
@@ -41,6 +53,10 @@ export function getMoveToWellCommandText({
             allRunDefs,
           })
         : null,
-    labware_location: displayLocation,
+    xOffset,
+    yOffset,
+    zOffset,
+    positionRelative: wellLocation?.origin,
+    displayLocation,
   })
 }