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

package/src/molecules/InfoScreen/index.tsx

@@ -1,9 +1,9 @@
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { SPACING } from '../../ui-style-constants/index'
 import { StyledText } from '../../atoms/StyledText'
+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, 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/LiquidIcon/LiquidIcon.stories.tsx

@@ -1,7 +1,8 @@
+import { LiquidIcon } from '.'
+import { customViewports } from '../../../../.storybook/preview'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
-import { customViewports } from '../../../../.storybook/preview'
-import { LiquidIcon } from '.'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof LiquidIcon> = {

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

@@ -1,10 +1,10 @@
-import { describe, it, expect } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
 import { screen } from '@testing-library/react'
-import { SPACING } from '../../../ui-style-constants'
-import { BORDERS, COLORS } from '../../../helix-design-system'
+import { describe, expect, it } from 'vitest'
 
 import { LiquidIcon } from '..'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING } from '../../../ui-style-constants'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/LiquidIcon/index.tsx

@@ -1,13 +1,14 @@
 import { css } from 'styled-components'
-import { Btn, Flex } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
+import { Btn, Flex } from '../../primitives'
 import { FLEX_MAX_CONTENT } from '../../styles'
+import { SPACING } from '../../ui-style-constants'
 
-type LiquidIconSize = 'small' | 'medium'
+type LiquidIconSize = 'xSmall' | 'small' | 'medium'
 
-interface LiquidIconProps {
+export interface LiquidIconProps {
   color: string
   size?: LiquidIconSize
   onClick?: () => void
@@ -17,6 +18,15 @@ interface LiquidIconProps {
 export function LiquidIcon(props: LiquidIconProps): JSX.Element {
   const { color, size = 'small', onClick, hasError = false } = props
 
+  const sizeStylesMap: Record<
+    LiquidIconSize,
+    { iconSize: string; padding: string }
+  > = {
+    xSmall: { iconSize: SPACING.spacing6, padding: SPACING.spacing6 },
+    small: { iconSize: '0.5rem', padding: SPACING.spacing8 },
+    medium: { iconSize: '1rem', padding: SPACING.spacing12 },
+  }
+
   const LIQUID_ICON_CONTAINER_STYLE = css`
     height: max-content;
     width: max-content;
@@ -37,14 +47,10 @@ export function LiquidIcon(props: LiquidIconProps): JSX.Element {
   const liquid = (
     <Flex
       css={LIQUID_ICON_CONTAINER_STYLE}
-      padding={size === 'medium' ? SPACING.spacing12 : SPACING.spacing8}
+      padding={sizeStylesMap[size].padding}
       data-testid={`LiquidIcon_${color}`}
     >
-      <Icon
-        name="circle"
-        color={color}
-        size={size === 'medium' ? '1rem' : '0.5rem'}
-      />
+      <Icon name="circle" color={color} size={sizeStylesMap[size].iconSize} />
     </Flex>
   )
 

package/src/molecules/ListAccordion/ListAccordion.stories.tsx

@@ -2,17 +2,17 @@ import { css } from 'styled-components'
 
 import {
   Flex,
-  Tag,
   Icon,
-  VIEWPORT,
   RESPONSIVENESS,
+  Tag,
+  VIEWPORT,
 } from '@opentrons/components'
 
 import { ListAccordion as ListAccordionComponent } from '.'
 import { DISPLAY_FLEX, DISPLAY_GRID } from '../../styles'
 
+import type { Meta, Story } from '@storybook/react'
 import type { ComponentProps } from 'react'
-import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Helix/Molecules/ListAccordion',

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

@@ -1,10 +1,10 @@
-import { describe, expect, it, beforeEach, vi } from 'vitest'
-import { screen, fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { ListAccordion } from '..'
 import { ListTable } from '../../../atoms/ListTable'
 import { Icon } from '../../../icons'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/ListAccordion/index.tsx

@@ -2,19 +2,19 @@ import { useState } from 'react'
 import { css } from 'styled-components'
 
 import { ListTable } from '../../atoms/ListTable'
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
+import { Box, Flex } from '../../primitives'
 import {
-  DIRECTION_COLUMN,
-  JUSTIFY_SPACE_BETWEEN,
   ALIGN_CENTER,
   CURSOR_POINTER,
+  DIRECTION_COLUMN,
+  JUSTIFY_SPACE_BETWEEN,
 } from '../../styles'
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
-import { Flex, Box } from '../../primitives'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
-import type { ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ReactNode } from 'react'
 import type { ListTableProps } from '../../atoms/ListTable'
 
 const TRANSITION_STYLE = 'all 150ms ease-in'

package/src/molecules/ParametersTable/ParametersTable.stories.tsx

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import * as React from 'react-remove-scroll'
+
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 import { ParametersTable } from './index'

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

@@ -1,6 +1,7 @@
-import { renderWithProviders } from '../../../testing/utils'
-import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, it } from 'vitest'
+
+import { renderWithProviders } from '../../../testing/utils'
 import { ParametersTable } from '../index'
 
 import type { ComponentProps } from 'react'

package/src/molecules/ParametersTable/index.tsx

@@ -1,21 +1,23 @@
 import styled, { css } from 'styled-components'
+
 import {
   formatRunTimeParameterDefaultValue,
   formatRunTimeParameterMinMax,
   orderRuntimeParameterRangeOptions,
 } from '@opentrons/shared-data'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import {
-  SPACING,
-  TYPOGRAPHY as LEGACY_TYPOGERAPHY,
-} from '../../ui-style-constants/index'
-import { TYPOGRAPHY } from '../../helix-design-system/product'
+
 import { Chip } from '../../atoms/Chip'
 import { StyledText } from '../../atoms/StyledText'
-import { LegacyTooltip, useHoverTooltip } from '../../tooltips'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { TYPOGRAPHY } from '../../helix-design-system/product'
 import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
 import { DISPLAY_INLINE, FLEX_MAX_CONTENT } from '../../styles'
+import { LegacyTooltip, useHoverTooltip } from '../../tooltips'
+import {
+  TYPOGRAPHY as LEGACY_TYPOGERAPHY,
+  SPACING,
+} from '../../ui-style-constants/index'
 
 import type { RunTimeParameter } from '@opentrons/shared-data'
 

package/src/molecules/ReleaseNotes/index.tsx

@@ -1,9 +1,9 @@
 import Markdown from 'react-markdown'
+
 import { LegacyStyledText } from '../../atoms'
 import { COLORS } from '../../helix-design-system'
 import { Box } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
-
 import styles from './styles.module.css'
 
 export interface ReleaseNotesProps {

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/Tabs/Tabs.stories.tsx

@@ -1,6 +1,8 @@
 import { useArgs } from '@storybook/preview-api'
-import { VIEWPORT } from '../../ui-style-constants'
+
 import { Tabs as TabsComponent } from '.'
+import { VIEWPORT } from '../../ui-style-constants'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof TabsComponent> = {

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

@@ -1,9 +1,10 @@
-import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { BORDERS, COLORS } from '../../../helix-design-system'
-import { SPACING } from '../../../ui-style-constants'
 import { POSITION_RELATIVE } from '../../../styles'
 import { renderWithProviders } from '../../../testing/utils'
+import { SPACING } from '../../../ui-style-constants'
 import { Tabs } from '../index'
 
 import type { ComponentProps } from 'react'

package/src/molecules/Tabs/index.tsx

@@ -1,10 +1,11 @@
 import { css } from 'styled-components'
+
 import { Tooltip } from '../../atoms'
-import { COLORS, BORDERS } from '../../helix-design-system'
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Btn, Flex } from '../../primitives'
-import { POSITION_RELATIVE, DIRECTION_ROW } from '../../styles'
+import { DIRECTION_ROW, POSITION_RELATIVE } from '../../styles'
 import { useHoverTooltip } from '../../tooltips'
-import { TYPOGRAPHY, SPACING, RESPONSIVENESS } from '../../ui-style-constants'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
 const DEFAULT_TAB_STYLE = css`
   ${TYPOGRAPHY.pSemiBold}

package/src/molecules/TextListTableContent/TextListTableContent.stories.tsx

@@ -5,8 +5,8 @@ import { StyledText } from '../../atoms'
 import { DISPLAY_GRID } from '../../styles'
 import { SPACING, VIEWPORT } from '../../ui-style-constants'
 
+import type { Meta, Story } from '@storybook/react'
 import type { ComponentProps } from 'react'
-import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Helix/Molecules/TextListTableContent',

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

@@ -1,9 +1,9 @@
-import { describe, it, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, it, vi } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { TextListTableContent } from '..'
 import { ListTable } from '../../../atoms/ListTable'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/TextListTableContent/index.tsx

@@ -1,10 +1,10 @@
 import { css } from 'styled-components'
 
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
-import { ListTable } from '../../atoms/ListTable'
 import { StyledText } from '../../atoms'
+import { ListTable } from '../../atoms/ListTable'
 import { Flex } from '../../primitives'
 import { DIRECTION_COLUMN } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
 import type { ReactNode } from 'react'
 import type { ListTableProps } from '../../atoms/ListTable'

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/nav/SidePanel.stories.tsx

@@ -1,8 +1,9 @@
-import type * as React from 'react'
+import { ALIGN_CENTER, Flex, JUSTIFY_CENTER, Text } from '@opentrons/components'
+
 import { SidePanel as SidePanelComponent } from './SidePanel'
-import { Text, Flex, JUSTIFY_CENTER, ALIGN_CENTER } from '@opentrons/components'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Side Panel',

package/src/organisms/CommandText/CommandText.stories.tsx

@@ -1,9 +1,10 @@
 import * as Fixtures from '../../../../app/src/molecules/Command/__fixtures__'
-import { getLabwareDefinitionsFromCommands } from './useCommandTextString/utils'
 import { Box } from '../../primitives'
 import { CommandText as CommandTextComponent } from './index'
-import type { RobotType } from '@opentrons/shared-data'
+import { getLabwareDefinitionsFromCommands } from './useCommandTextString/utils'
+
 import type { Meta, StoryObj } from '@storybook/react'
+import type { RobotType } from '@opentrons/shared-data'
 
 interface StorybookArgs {
   onDevice: boolean

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

@@ -1,13 +1,16 @@
-import { it, expect, describe } from 'vitest'
 import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
 
 import {
   FLEX_ROBOT_TYPE,
-  OT2_ROBOT_TYPE,
   GRIPPER_WASTE_CHUTE_ADDRESSABLE_AREA,
+  OT2_ROBOT_TYPE,
 } from '@opentrons/shared-data'
+
 import { i18n } from '../../../i18n'
 import { renderWithProviders } from '../../../testing/utils'
+import { getCommandTextData } from '../../ProtocolTimelineScrubber/utils'
+import { mockRobotSideAnalysis } from '../fixtures'
 import { CommandText } from '../index'
 
 import type {
@@ -20,19 +23,17 @@ import type {
   DispenseRunTimeCommand,
   DropTipInPlaceRunTimeCommand,
   DropTipRunTimeCommand,
-  LabwareDefinition2,
+  LabwareDefinition,
   LoadLabwareRunTimeCommand,
+  LoadLiquidClassRunTimeCommand,
   LoadLiquidRunTimeCommand,
+  MoveToAddressableAreaForDropTipRunTimeCommand,
   MoveToAddressableAreaRunTimeCommand,
   MoveToWellRunTimeCommand,
   PrepareToAspirateRunTimeCommand,
   RunTimeCommand,
-  MoveToAddressableAreaForDropTipRunTimeCommand,
-  LoadLiquidClassRunTimeCommand,
 } from '@opentrons/shared-data'
 import type { CommandTextData } from '../../ProtocolTimelineScrubber'
-import { getCommandTextData } from '../../ProtocolTimelineScrubber/utils'
-import { mockRobotSideAnalysis } from '../fixtures'
 
 const mockCommandTextData: CommandTextData = {
   commands: mockRobotSideAnalysis.commands,
@@ -59,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'
       )
     }
   })
@@ -79,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'
       )
     }
   })
@@ -106,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'
       )
     }
   })
@@ -129,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(
@@ -151,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'
       )
     }
   })
@@ -173,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(
@@ -186,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(
@@ -216,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'
       )
     }
   })
@@ -588,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/fixtures/index.ts

@@ -1,4 +1,5 @@
 import robotSideAnalysis from './mockRobotSideAnalysis.json'
+
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 
 export const mockRobotSideAnalysis: CompletedProtocolAnalysis = robotSideAnalysis as CompletedProtocolAnalysis

package/src/organisms/CommandText/index.tsx

@@ -1,22 +1,24 @@
 import pick from 'lodash/pick'
 import { css } from 'styled-components'
+
 import { LegacyStyledText, StyledText } from '../../atoms'
+import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_COLUMN } from '../../styles'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-import { Flex } from '../../primitives'
 import { useCommandTextString } from './useCommandTextString'
+
 import type { ComponentProps } from 'react'
 import type {
-  LabwareDefinition2,
+  LabwareDefinition,
   RobotType,
   RunTimeCommand,
 } from '@opentrons/shared-data'
 import type { StyleProps } from '../../primitives'
+import type { CommandTextData } from '../ProtocolTimelineScrubber/types'
 import type {
   GetTCRunExtendedProfileCommandTextResult,
   GetTCRunProfileCommandTextResult,
 } from './useCommandTextString'
-import type { CommandTextData } from '../ProtocolTimelineScrubber/types'
 
 export * from './useCommandTextString'
 interface LegacySTProps {
@@ -34,7 +36,7 @@ type STProps = LegacySTProps | ModernSTProps
 
 interface BaseProps extends StyleProps {
   command: RunTimeCommand
-  allRunDefs: LabwareDefinition2[]
+  allRunDefs: LabwareDefinition[]
   commandTextData: CommandTextData
   robotType: RobotType
   isOnDevice?: boolean