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

package/src/hardware-sim/Deck/RobotWorkSpace.tsx

@@ -1,11 +1,13 @@
 import { useRef } from 'react'
+
 import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
+
 import { Svg } from '../../primitives'
 import { DeckFromLayers } from './DeckFromLayers'
 
 import type { ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
 import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
+import type { StyleProps } from '../../primitives'
 
 export interface RobotWorkSpaceRenderProps {
   deckSlotsById: { [slotId: string]: DeckSlot }

package/src/hardware-sim/Deck/SlotLabels.tsx

@@ -1,10 +1,12 @@
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+
 import { DeckInfoLabel } from '../../molecules'
 import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_COLUMN, JUSTIFY_CENTER } from '../../styles'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
 import type { RobotType } from '@opentrons/shared-data'
+
 interface SlotLabelsProps {
   robotType: RobotType
   color?: string

package/src/hardware-sim/DeckConfigurator/AbsorbanceReaderFixture.tsx

@@ -1,16 +1,16 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_3_X_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
   STAGING_AREA_FIXTURE_WIDTH,
   Y_ADJUSTMENT,
-  CONFIG_STYLE_SELECTED,
 } from './constants'
 
 import type {

package/src/hardware-sim/DeckConfigurator/DeckConfigurator.stories.tsx

@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   SINGLE_CENTER_SLOT_FIXTURE,
   SINGLE_LEFT_SLOT_FIXTURE,
@@ -10,7 +8,8 @@ import {
 
 import { DeckConfigurator } from '.'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 import type { CutoutConfig } from '@opentrons/shared-data'
 
 export default {

package/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx

@@ -1,17 +1,17 @@
 import { css } from 'styled-components'
 
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { RESPONSIVENESS } from '../../ui-style-constants'
-import { BORDERS, COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_1_X_ADJUSTMENT,
+  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_2_X_ADJUSTMENT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_3_X_ADJUSTMENT,
   FIXTURE_HEIGHT,
   Y_ADJUSTMENT,
@@ -86,6 +86,7 @@ export function EmptyConfigFixture(
         onClick={() => {
           handleClickAdd(fixtureLocation)
         }}
+        data-testid={fixtureLocation}
       >
         <Icon name="add" color={COLORS.blue50} size="2rem" />
       </Btn>

package/src/hardware-sim/DeckConfigurator/FlexStackerFixture.tsx

@@ -1,16 +1,16 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_3_X_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
   STAGING_AREA_FIXTURE_WIDTH,
   Y_ADJUSTMENT,
-  CONFIG_STYLE_SELECTED,
 } from './constants'
 
 import type {

package/src/hardware-sim/DeckConfigurator/HeaterShakerFixture.tsx

@@ -1,17 +1,17 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_1_X_ADJUSTMENT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_3_X_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   Y_ADJUSTMENT,
-  CONFIG_STYLE_SELECTED,
 } from './constants'
 
 import type {

package/src/hardware-sim/DeckConfigurator/MagneticBlockFixture.tsx

@@ -1,21 +1,21 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_1_X_ADJUSTMENT,
+  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_2_X_ADJUSTMENT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_3_X_ADJUSTMENT,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
-  STAGING_AREA_FIXTURE_WIDTH,
   CONFIG_STYLE_SELECTED,
+  FIXTURE_HEIGHT,
+  STAGING_AREA_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
 } from './constants'
 
 import type {

package/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx

@@ -1,7 +1,7 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_3_X_ADJUSTMENT,

package/src/hardware-sim/DeckConfigurator/StaticFixture.tsx

@@ -2,11 +2,11 @@ import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
+  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
+  COLUMN_2_X_ADJUSTMENT,
   CONFIG_STYLE_READ_ONLY,
   FIXTURE_HEIGHT,
-  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
   Y_ADJUSTMENT,
-  COLUMN_2_X_ADJUSTMENT,
 } from './constants'
 
 import type { CutoutId, DeckDefinition } from '@opentrons/shared-data'

package/src/hardware-sim/DeckConfigurator/TemperatureModuleFixture.tsx

@@ -1,17 +1,17 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_1_X_ADJUSTMENT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_3_X_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   Y_ADJUSTMENT,
-  CONFIG_STYLE_SELECTED,
 } from './constants'
 
 import type {

package/src/hardware-sim/DeckConfigurator/ThermocyclerFixture.tsx

@@ -1,16 +1,16 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_1_X_ADJUSTMENT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
-  Y_ADJUSTMENT,
-  THERMOCYCLER_FIXTURE_HEIGHT,
   CONFIG_STYLE_SELECTED,
+  THERMOCYCLER_FIXTURE_HEIGHT,
+  Y_ADJUSTMENT,
 } from './constants'
 
 import type {

package/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx

@@ -1,18 +1,18 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
   COLUMN_1_X_ADJUSTMENT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_3_X_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   TRASH_BIN_DISPLAY_NAME,
   Y_ADJUSTMENT,
-  CONFIG_STYLE_SELECTED,
 } from './constants'
 
 import type {

package/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx

@@ -1,18 +1,18 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
 import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   COLUMN_3_X_ADJUSTMENT,
   CONFIG_STYLE_EDITABLE,
   CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
   FIXTURE_HEIGHT,
   STAGING_AREA_FIXTURE_WIDTH,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
   WASTE_CHUTE_DISPLAY_NAME,
   Y_ADJUSTMENT,
-  CONFIG_STYLE_SELECTED,
 } from './constants'
 
 import type {

package/src/hardware-sim/DeckConfigurator/index.tsx

@@ -1,37 +1,37 @@
 import {
-  getDeckDefFromRobotType,
+  ABSORBANCE_READER_V1_FIXTURE,
   FLEX_ROBOT_TYPE,
+  FLEX_STACKER_FIXTURES,
+  FLEX_STACKER_V1_FIXTURE,
+  getDeckDefFromRobotType,
+  HEATERSHAKER_MODULE_V1_FIXTURE,
+  MAGNETIC_BLOCK_V1_FIXTURE,
   SINGLE_SLOT_FIXTURES,
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
+  TEMPERATURE_MODULE_V2_FIXTURE,
+  THERMOCYCLER_MODULE_CUTOUTS,
+  THERMOCYCLER_V2_FRONT_FIXTURE,
   TRASH_BIN_ADAPTER_FIXTURE,
   WASTE_CHUTE_ONLY_FIXTURES,
   WASTE_CHUTE_STAGING_AREA_FIXTURES,
-  THERMOCYCLER_V2_FRONT_FIXTURE,
-  HEATERSHAKER_MODULE_V1_FIXTURE,
-  TEMPERATURE_MODULE_V2_FIXTURE,
-  MAGNETIC_BLOCK_V1_FIXTURE,
-  ABSORBANCE_READER_V1_FIXTURE,
-  FLEX_STACKER_V1_FIXTURE,
-  FLEX_STACKER_FIXTURES,
-  STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
-  THERMOCYCLER_MODULE_CUTOUTS,
 } from '@opentrons/shared-data'
 
 import { COLORS } from '../../helix-design-system'
 import { SingleSlotFixture } from '../BaseDeck/SingleSlotFixture'
 import { SlotLabels } from '../Deck'
 import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
+import { AbsorbanceReaderFixture } from './AbsorbanceReaderFixture'
 import { EmptyConfigFixture } from './EmptyConfigFixture'
+import { FlexStackerFixture } from './FlexStackerFixture'
+import { HeaterShakerFixture } from './HeaterShakerFixture'
+import { MagneticBlockFixture } from './MagneticBlockFixture'
 import { StagingAreaConfigFixture } from './StagingAreaConfigFixture'
-import { TrashBinConfigFixture } from './TrashBinConfigFixture'
-import { WasteChuteConfigFixture } from './WasteChuteConfigFixture'
 import { StaticFixture } from './StaticFixture'
 import { TemperatureModuleFixture } from './TemperatureModuleFixture'
-import { HeaterShakerFixture } from './HeaterShakerFixture'
-import { MagneticBlockFixture } from './MagneticBlockFixture'
 import { ThermocyclerFixture } from './ThermocyclerFixture'
-import { AbsorbanceReaderFixture } from './AbsorbanceReaderFixture'
-import { FlexStackerFixture } from './FlexStackerFixture'
+import { TrashBinConfigFixture } from './TrashBinConfigFixture'
+import { WasteChuteConfigFixture } from './WasteChuteConfigFixture'
 
 import type { ReactNode } from 'react'
 import type {
@@ -132,6 +132,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
         // give the outside of the base fixture svgs a stroke for extra spacing
         <g key={cutout.id} stroke={COLORS.white} strokeWidth="4">
           <SingleSlotFixture
+            data-testid={cutout.id}
             cutoutId={cutout.id}
             deckDefinition={deckDef}
             slotClipColor={COLORS.transparent}
@@ -142,6 +143,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {stagingAreaFixtures.map(({ cutoutId, cutoutFixtureId }) => (
         <StagingAreaConfigFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickRemove={
@@ -154,6 +156,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {emptyCutouts.map(({ cutoutId }) => (
         <EmptyConfigFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickAdd={handleClickAdd}
@@ -162,6 +165,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {wasteChuteFixtures.map(({ cutoutId, cutoutFixtureId }) => (
         <WasteChuteConfigFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickRemove={
@@ -174,6 +178,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {wasteChuteStagingAreaFixtures.map(({ cutoutId, cutoutFixtureId }) => (
         <WasteChuteConfigFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickRemove={
@@ -187,6 +192,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {trashBinFixtures.map(({ cutoutId, cutoutFixtureId }) => (
         <TrashBinConfigFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickRemove={
@@ -199,6 +205,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {temperatureModuleFixtures.map(({ cutoutId, cutoutFixtureId }) => (
         <TemperatureModuleFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickRemove={
@@ -211,6 +218,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {heaterShakerFixtures.map(({ cutoutId, cutoutFixtureId }) => (
         <HeaterShakerFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickRemove={
@@ -223,6 +231,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {magneticBlockFixtures.map(({ cutoutId, cutoutFixtureId }) => (
         <MagneticBlockFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickRemove={
@@ -239,6 +248,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       {thermocyclerFixtures.map(({ cutoutId, cutoutFixtureId }) => {
         return (
           <ThermocyclerFixture
+            data-testid={cutoutId}
             key={cutoutId}
             deckDefinition={deckDef}
             handleClickRemove={
@@ -258,6 +268,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       })}
       {absorbanceReaderFixtures.map(({ cutoutId, cutoutFixtureId }) => (
         <AbsorbanceReaderFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickRemove={
@@ -270,6 +281,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {flexStackerFixtures.map(({ cutoutId, cutoutFixtureId }) => (
         <FlexStackerFixture
+          data-testid={cutoutId}
           key={cutoutId}
           deckDefinition={deckDef}
           handleClickRemove={
@@ -283,6 +295,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       ))}
       {additionalStaticFixtures?.map(staticFixture => (
         <StaticFixture
+          data-testid={staticFixture.location}
           key={staticFixture.location}
           deckDefinition={deckDef}
           label={staticFixture.label}

package/src/hardware-sim/Labware/Labware.tsx

@@ -1,28 +1,26 @@
 import { Fragment, memo } from 'react'
-import styled from 'styled-components'
 import map from 'lodash/map'
+import styled from 'styled-components'
 
 import { COLORS } from '../../helix-design-system'
-
+import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
 import {
   LabwareOutline,
   LabwareWellLabels,
   STYLE_BY_WELL_CONTENTS,
   Well,
 } from './labwareInternals'
-import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
 
+import type { RefObject } from 'react'
 import type { LabwareDefinition2, LabwareWell } from '@opentrons/shared-data'
+import type { LabwareAdapterLoadName } from './LabwareAdapter'
 import type {
   HighlightedWellLabels,
-  WellMouseEvent,
   WellFill,
+  WellMouseEvent,
   WellStroke,
 } from './labwareInternals/types'
 
-import type { RefObject } from 'react'
-import type { LabwareAdapterLoadName } from './LabwareAdapter'
-
 export interface LabwareProps {
   /** Labware definition to render */
   definition: LabwareDefinition2

package/src/hardware-sim/Labware/LabwareAdapter/index.tsx

@@ -1,12 +1,13 @@
+import { COLORS } from '../../../helix-design-system'
+import { LabwareOutline } from '../labwareInternals'
 import { Opentrons96DeepWellAdapter } from './Opentrons96DeepWellAdapter'
 import { Opentrons96FlatBottomAdapter } from './Opentrons96FlatBottomAdapter'
-import { OpentronsUniversalFlatAdapter } from './OpentronsUniversalFlatAdapter'
 import { OpentronsAluminumFlatBottomPlate } from './OpentronsAluminumFlatBottomPlate'
+import { OpentronsAutoclavableDeckRiser } from './OpentronsAutoclavableDeckRiser'
 import { OpentronsFlex96TiprackAdapter } from './OpentronsFlex96TiprackAdapter'
 import { OpentronsToughPCRAutoSealingLid } from './OpentronsToughPCRAutoSealingLid'
-import { OpentronsAutoclavableDeckRiser } from './OpentronsAutoclavableDeckRiser'
-import { COLORS } from '../../../helix-design-system'
-import { LabwareOutline } from '../labwareInternals'
+import { OpentronsUniversalFlatAdapter } from './OpentronsUniversalFlatAdapter'
+
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 const LABWARE_ADAPTER_LOADNAME_PATHS = {

package/src/hardware-sim/Labware/LabwareRender.stories.tsx

@@ -1,9 +1,7 @@
-import type * as React from 'react'
-
 import {
-  fixture96Plate as _fixture96Plate,
-  fixture24Tuberack as _fixture24Tuberack,
   fixture12Trough as _fixture12Trough,
+  fixture24Tuberack as _fixture24Tuberack,
+  fixture96Plate as _fixture96Plate,
   fixtureTiprack10ul as _fixtureTiprack10ul,
   fixtureTiprack300ul as _fixtureTiprack300ul,
   fixtureTiprack1000ul as _fixtureTiprack1000ul,
@@ -12,7 +10,8 @@ import {
 import { RobotWorkSpace } from '../Deck'
 import { LabwareRender } from './LabwareRender'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 const fixture96Plate = _fixture96Plate as LabwareDefinition2

package/src/hardware-sim/Labware/LabwareRender.tsx

@@ -1,25 +1,24 @@
+import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
 import {
-  WellLabels,
-  StyledWells,
   FilledWells,
-  StrokedWells,
   StaticLabware,
+  StrokedWells,
+  StyledWells,
+  WellLabels,
 } from './labwareInternals'
-import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
 
 import type { CSSProperties } from 'styled-components'
+import type { RefObject } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareAdapterLoadName } from './LabwareAdapter'
 import type {
   HighlightedWellLabels,
-  WellMouseEvent,
   WellFill,
-  WellStroke,
   WellGroup,
+  WellMouseEvent,
+  WellStroke,
 } from './labwareInternals/types'
 
-import type { RefObject } from 'react'
-import type { LabwareAdapterLoadName } from './LabwareAdapter'
-
 export const WELL_LABEL_OPTIONS = {
   SHOW_LABEL_INSIDE: 'SHOW_LABEL_INSIDE',
   SHOW_LABEL_OUTSIDE: 'SHOW_LABEL_OUTSIDE',

package/src/hardware-sim/Labware/__tests__/Labware.test.tsx

@@ -1,12 +1,16 @@
-import { describe, it, vi, beforeEach } from 'vitest'
 import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { fixture12Trough } from '@opentrons/shared-data'
+
+import { Labware } from '../Labware'
 import {
   LabwareOutline,
   LabwareWellLabelsComponent as LabwareWellLabels,
 } from '../labwareInternals'
-import { Labware } from '../Labware'
+
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 vi.mock('../labwareInternals')

package/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx

@@ -1,13 +1,17 @@
-import { describe, it, vi, beforeEach } from 'vitest'
 import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { fixture12Trough } from '@opentrons/shared-data'
+
 import {
   StaticLabwareComponent as StaticLabware,
-  WellLabelsComponent as WellLabels,
   StrokedWellsComponent as StrokedWells,
+  WellLabelsComponent as WellLabels,
 } from '../labwareInternals'
 import { LabwareRender, WELL_LABEL_OPTIONS } from '../LabwareRender'
+
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 vi.mock('../labwareInternals')

package/src/hardware-sim/Labware/index.ts

@@ -1,6 +1,5 @@
 export * from './labwareInternals/index'
 export * from './LabwareRender'
-export * from './LabwareStackRender'
 export * from './Labware'
 
 export * from './labwareInternals/types'

package/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx

@@ -1,10 +1,11 @@
 import { memo } from 'react'
 import map from 'lodash/map'
+
 import { COLORS } from '../../../helix-design-system'
 import { Well } from './Well'
 
-import type { MemoExoticComponent, ReactNode } from 'react'
 import type { CSSProperties } from 'styled-components'
+import type { MemoExoticComponent, ReactNode } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 export interface FilledWellsProps {

package/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx

@@ -1,8 +1,10 @@
-import { SLOT_RENDER_WIDTH, SLOT_RENDER_HEIGHT } from '@opentrons/shared-data'
+import { SLOT_RENDER_HEIGHT, SLOT_RENDER_WIDTH } from '@opentrons/shared-data'
+
 import { COLORS } from '../../../helix-design-system'
+import { getTiprackBackgroundColor } from './getTiprackBackgroundColor'
 
-import type { SVGProps } from 'react'
 import type { CSSProperties } from 'styled-components'
+import type { SVGProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 export interface LabwareOutlineProps {
@@ -39,7 +41,7 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
     showRadius = true,
   } = props
   const {
-    parameters = { isTiprack },
+    parameters = { isTiprack, loadName: '' },
     dimensions = { xDimension: width, yDimension: height },
   } = definition ?? {}
 
@@ -47,8 +49,11 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
   if (fill != null) {
     backgroundFill = fill
   } else {
-    backgroundFill = parameters.isTiprack ? '#CCCCCC' : COLORS.white
+    backgroundFill = parameters.isTiprack
+      ? getTiprackBackgroundColor(parameters.loadName)
+      : COLORS.white
   }
+
   return (
     <>
       {highlight ? (

package/src/hardware-sim/Labware/labwareInternals/LabwareWellLabels.tsx

@@ -1,7 +1,8 @@
 import { memo } from 'react'
+
 import { C_BLACK, C_BLUE } from '../../../styles/colors'
-import { RobotCoordsText } from '../../Deck'
 import { TYPOGRAPHY } from '../../../ui-style-constants'
+import { RobotCoordsText } from '../../Deck'
 
 import type { MemoExoticComponent } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'