refactor(components): Make positioningMode required on <Labware> and <LabwareRender> (#18923)

SyntaxColoring · web-flow · commit 29460745f658 · 2025-07-16T15:01:47.000-04:00
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx
@@ -165,7 +165,10 @@ export function TwoColLwInfoAndDeck(
                     >
                       {nestedLabwareDef != null &&
                       nestedLabwareId !== failedLwId ? (
-                        <LabwareRender definition={nestedLabwareDef} />
+                        <LabwareRender
+                          definition={nestedLabwareDef}
+                          positioningMode="offsetInSlot"
+                        />
                       ) : null}
                     </Module>
                   )
diff --git a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx
@@ -225,7 +225,10 @@ export function MoveLabwareInterventionContent({
                       >
                         {nestedLabwareDef != null &&
                         nestedLabwareId !== command.params.labwareId ? (
-                          <LabwareRender definition={nestedLabwareDef} />
+                          <LabwareRender
+                            definition={nestedLabwareDef}
+                            positioningMode="offsetInSlot"
+                          />
                         ) : null}
                       </Module>
                     )
diff --git a/app/src/organisms/LabwarePositionCheck/steps/HandleLabware/EditOffset/CheckLabware/LPCLabwareJogRender.tsx b/app/src/organisms/LabwarePositionCheck/steps/HandleLabware/EditOffset/CheckLabware/LPCLabwareJogRender.tsx
@@ -45,6 +45,7 @@ export function LPCLabwareJogRender({
           <>
             <LabwareRender
               definition={itemLwDef}
+              positioningMode="offsetInSlot"
               wellStroke={{ A1: COLORS.blue50 }}
               wellLabelOption={WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE}
               highlightedWellLabels={{ wells: ['A1'] }}
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LegacyLabwarePositionCheck/JogToWell.tsx
@@ -152,6 +152,7 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
               <>
                 <LabwareRender
                   definition={labwareDef}
+                  positioningMode="offsetInSlot"
                   wellStroke={wellStroke}
                   wellLabelOption={WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE}
                   highlightedWellLabels={{ wells: wellsToHighlight }}
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/SetupLabwareStackView.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/SetupLabwareStackView.tsx
@@ -194,6 +194,7 @@ export function SetupLabwareStackView({
             >
               <LabwareRender
                 definition={labwareDefinition}
+                positioningMode="offsetInSlot"
                 wellFill={wellFill}
               />
             </g>
diff --git a/app/src/pages/Desktop/Protocols/ProtocolPreview/LabwareOnDeck.tsx b/app/src/pages/Desktop/Protocols/ProtocolPreview/LabwareOnDeck.tsx
@@ -52,6 +52,7 @@ export function LabwareOnDeck(props: LabwareOnDeckProps): JSX.Element {
   return (
     <g transform={`translate(${x}, ${y})`}>
       <LabwareRender
+        positioningMode="offsetInSlot"
         definition={labwareDef}
         wellFill={wellFill}
         highlightedWells={wellGroup}
diff --git a/app/src/pages/Desktop/Protocols/ProtocolPreview/LabwareSlotDetails.tsx b/app/src/pages/Desktop/Protocols/ProtocolPreview/LabwareSlotDetails.tsx
@@ -157,6 +157,7 @@ export function LabwareSlotDetails(
                 <g>
                   <LabwareRender
                     definition={labwareDef}
+                    positioningMode="offsetInSlot"
                     wellFill={wellFill}
                     missingTips={missingTips}
                     highlightedWells={wellGroup}
diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
@@ -310,6 +310,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   <g cursor={onLabwareClick != null ? 'pointer' : ''}>
                     <LabwareRender
                       definition={nestedLabwareDef}
+                      positioningMode="offsetInSlot"
                       onLabwareClick={onLabwareClick}
                       wellFill={nestedLabwareWellFill}
                       shouldRotateAdapterOrientation={
@@ -373,6 +374,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                     >
                       <LabwareRender
                         definition={nestedLabwareDef}
+                        positioningMode="offsetInSlot"
                         onLabwareClick={onLabwareClick}
                         wellFill={nestedLabwareWellFill}
                         shouldRotateAdapterOrientation={
@@ -427,6 +429,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
               >
                 <LabwareRender
                   definition={definition}
+                  positioningMode="offsetInSlot"
                   onLabwareClick={onLabwareClick}
                   wellFill={wellFill ?? undefined}
                   missingTips={missingTips}
diff --git a/components/src/hardware-sim/Labware/Labware.tsx b/components/src/hardware-sim/Labware/Labware.tsx
@@ -30,7 +30,7 @@ export interface LabwareProps {
   /** Labware definition to render */
   definition: LabwareDefinition
   /* See docs on LabwareRender. */
-  positioningMode?: 'passThrough' | 'offsetInSlot'
+  positioningMode: 'passThrough' | 'offsetInSlot'
   /** See docs on LabwareRender. */
   shouldRotateAdapterOrientation?: boolean
   /** boolean to show well labels */
@@ -89,7 +89,7 @@ const LabwareDetailGroup = styled.g`
 export const Labware = (props: LabwareProps): JSX.Element => {
   const {
     definition,
-    positioningMode = 'offsetInSlot',
+    positioningMode,
     gRef,
     hideOutline = false,
     highlight,
diff --git a/components/src/hardware-sim/Labware/LabwareRender.tsx b/components/src/hardware-sim/Labware/LabwareRender.tsx
@@ -65,10 +65,9 @@ export interface LabwareRenderProps {
    *   how labware are positioned. It's also clunky when rendering a labware on its
    *   own.
    */
-  // todo(mm, 2025-06-09): Make this prop required after the dust settles on
-  // v8.5.0/PD-v8.5.0 mergebacks, to force new callers to consider passThrough mode.
+  // todo(mm, 2025-06-09):
   // Remove uses of offsetInSlot mode as we're able, and delete it when none are left.
-  positioningMode?: 'passThrough' | 'offsetInSlot'
+  positioningMode: 'passThrough' | 'offsetInSlot'
   /**
    * Special handling for opentrons_universal_flat_adapter. Unlike other labware,
    * it rotates to match the underlying module, and that rotation actually matters
@@ -114,7 +113,7 @@ export interface LabwareRenderProps {
 }
 
 export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
-  const { gRef, definition, positioningMode = 'offsetInSlot' } = props
+  const { gRef, definition, positioningMode } = props
 
   const cornerOffsetFromSlot = getSchema2CornerOffsetFromSlot(definition)
   const labwareLoadName = definition.parameters.loadName
diff --git a/components/src/hardware-sim/Labware/__tests__/Labware.test.tsx b/components/src/hardware-sim/Labware/__tests__/Labware.test.tsx
@@ -11,6 +11,7 @@ import {
   LabwareWellLabelsComponent as LabwareWellLabels,
 } from '../labwareInternals'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition } from '@opentrons/shared-data'
 
 vi.mock('../labwareInternals')
@@ -23,7 +24,10 @@ describe('Labware', () => {
   })
 
   it('should render a labware outline', () => {
-    const props = { definition: troughFixture12 }
+    const props: ComponentProps<typeof Labware> = {
+      definition: troughFixture12,
+      positioningMode: 'passThrough',
+    }
     render(
       <svg>
         <Labware {...props} />
@@ -32,8 +36,9 @@ describe('Labware', () => {
     screen.getByText('mock labware outline')
   })
   it('should render well labels', () => {
-    const props = {
+    const props: ComponentProps<typeof Labware> = {
       definition: troughFixture12,
+      positioningMode: 'passThrough',
       showLabels: true,
     }
     vi.mocked(LabwareWellLabels).mockReturnValue(<div>mock well labels</div>)
diff --git a/components/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx b/components/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx
@@ -12,6 +12,7 @@ import {
 } from '../labwareInternals'
 import { LabwareRender, WELL_LABEL_OPTIONS } from '../LabwareRender'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition } from '@opentrons/shared-data'
 
 vi.mock('../labwareInternals')
@@ -24,7 +25,10 @@ describe('LabwareRender', () => {
   })
 
   it('should render a static labware component', () => {
-    const props = { definition: troughFixture12 }
+    const props: ComponentProps<typeof LabwareRender> = {
+      definition: troughFixture12,
+      positioningMode: 'passThrough',
+    }
     render(
       <svg>
         <LabwareRender {...props} />
@@ -33,7 +37,11 @@ describe('LabwareRender', () => {
     screen.getByText('mock static labware')
   })
   it('should render stroked wells', () => {
-    const props = { definition: troughFixture12, wellStroke: { A1: 'blue' } }
+    const props: ComponentProps<typeof LabwareRender> = {
+      definition: troughFixture12,
+      positioningMode: 'passThrough',
+      wellStroke: { A1: 'blue' },
+    }
     vi.mocked(StrokedWells).mockReturnValue(<div>mock stroked wells</div>)
     render(
       <svg>
@@ -43,8 +51,9 @@ describe('LabwareRender', () => {
     screen.getByText('mock stroked wells')
   })
   it('should render well labels', () => {
-    const props = {
+    const props: ComponentProps<typeof LabwareRender> = {
       definition: troughFixture12,
+      positioningMode: 'passThrough',
       wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
     }
     vi.mocked(WellLabels).mockReturnValue(<div>mock well labels</div>)
diff --git a/labware-designer/src/organisms/CreateLabwareSandbox/index.tsx b/labware-designer/src/organisms/CreateLabwareSandbox/index.tsx
@@ -212,6 +212,7 @@ export function CreateLabwareSandbox(): JSX.Element {
                     >
                       <LabwareRender
                         definition={labwareToRender}
+                        positioningMode="offsetInSlot"
                         wellLabelOption={WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE}
                       />
                     </g>
@@ -227,6 +228,7 @@ export function CreateLabwareSandbox(): JSX.Element {
               >
                 <LabwareRender
                   definition={labwareToRender}
+                  positioningMode="offsetInSlot"
                   wellLabelOption={WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE}
                 />
               </svg>
diff --git a/labware-library/src/labware-creator/components/ConditionalLabwareRender.tsx b/labware-library/src/labware-creator/components/ConditionalLabwareRender.tsx
@@ -93,7 +93,13 @@ const PopulatedPreview = (props: {
         bBox == null ? '0 0 0 0' : calculateViewBox(bBox)
       }
     >
-      {() => <LabwareRender definition={definition} gRef={gRef} />}
+      {() => (
+        <LabwareRender
+          definition={definition}
+          positioningMode="offsetInSlot"
+          gRef={gRef}
+        />
+      )}
     </RobotWorkSpace>
   )
 }
diff --git a/protocol-designer/src/components/organisms/AssignLiquidsModal/index.tsx b/protocol-designer/src/components/organisms/AssignLiquidsModal/index.tsx
@@ -149,6 +149,7 @@ export function AssignLiquidsModal(
                   labwareProps={{
                     wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
                     definition: labwareDef,
+                    positioningMode: 'offsetInSlot',
                     highlightedWells,
                     wellFill: wellFillFromWellContents(
                       wellContents,
diff --git a/protocol-designer/src/components/organisms/LabwareOnDeck/index.tsx b/protocol-designer/src/components/organisms/LabwareOnDeck/index.tsx
@@ -40,6 +40,7 @@ export function LabwareOnDeck(props: LabwareOnDeckProps): JSX.Element {
     <g transform={`translate(${x}, ${y})`}>
       <LabwareRender
         definition={labwareOnDeck.def}
+        positioningMode="offsetInSlot"
         wellFill={wellContentsSelectors.wellFillFromWellContents(
           wellContents,
           liquidDisplayColors
diff --git a/protocol-designer/src/components/organisms/SelectWellsModal/index.tsx b/protocol-designer/src/components/organisms/SelectWellsModal/index.tsx
@@ -150,6 +150,7 @@ export const SelectWellsModal = (
           labwareProps={{
             wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
             definition: labwareDef,
+            positioningMode: 'offsetInSlot',
             highlightedWells,
             wellFill: wellFillFromWellContents(
               wellContents,
diff --git a/protocol-designer/src/components/organisms/SlotDetailModal/index.tsx b/protocol-designer/src/components/organisms/SlotDetailModal/index.tsx
@@ -160,6 +160,7 @@ export const SlotDetailModal = (
                           }
                         }}
                         definition={labwareOnDeck.def}
+                        positioningMode="offsetInSlot"
                         wellFill={allWellFill}
                         highlightedWells={wellContentsWithLiquidId}
                       />
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/LabwareRenderOnDeck.tsx b/protocol-designer/src/pages/Designer/DeckSetup/LabwareRenderOnDeck.tsx
@@ -13,7 +13,7 @@ export function LabwareRenderOnDeck(
   const { x, y, labwareDef } = props
   return (
     <g transform={`translate(${x}, ${y})`}>
-      <LabwareRender definition={labwareDef} />
+      <LabwareRender definition={labwareDef} positioningMode="offsetInSlot" />
     </g>
   )
 }
diff --git a/protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx
@@ -135,6 +135,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
                       <>
                         <LabwareRender
                           definition={definition}
+                          positioningMode="offsetInSlot"
                           wellFill={wellFillFromWellContents(
                             wellContents,
                             liquidDisplayColors
diff --git a/protocol-designer/src/pages/ProtocolOverview/OffdeckThumbnail.tsx b/protocol-designer/src/pages/ProtocolOverview/OffdeckThumbnail.tsx
@@ -121,6 +121,7 @@ export function OffDeckThumbnail(props: OffDeckThumbnailProps): JSX.Element {
                         <>
                           <LabwareRender
                             definition={definition}
+                            positioningMode="offsetInSlot"
                             wellFill={wellFillFromWellContents(
                               wellContents,
                               liquidDisplayColors

Original file line number	Diff line number	Diff line change
`@@ -165,7 +165,10 @@ export function TwoColLwInfoAndDeck(`
`165`	`165`	`>`
`166`	`166`	`{nestedLabwareDef != null &&`
`167`	`167`	`nestedLabwareId !== failedLwId ? (`
`168`		`- <LabwareRender definition={nestedLabwareDef} />`
	`168`	`+ <LabwareRender`
	`169`	`+ definition={nestedLabwareDef}`
	`170`	`+ positioningMode="offsetInSlot"`
	`171`	`+ />`
`169`	`172`	`) : null}`
`170`	`173`	`</Module>`
`171`	`174`	`)`
Original file line number	Diff line number	Diff line change
`@@ -225,7 +225,10 @@ export function MoveLabwareInterventionContent({`
`225`	`225`	`>`
`226`	`226`	`{nestedLabwareDef != null &&`
`227`	`227`	`nestedLabwareId !== command.params.labwareId ? (`
`228`		`- <LabwareRender definition={nestedLabwareDef} />`
	`228`	`+ <LabwareRender`
	`229`	`+ definition={nestedLabwareDef}`
	`230`	`+ positioningMode="offsetInSlot"`
	`231`	`+ />`
`229`	`232`	`) : null}`
`230`	`233`	`</Module>`
`231`	`234`	`)`
Original file line number	Diff line number	Diff line change
`@@ -194,6 +194,7 @@ export function SetupLabwareStackView({`
`194`	`194`	`>`
`195`	`195`	`<LabwareRender`
`196`	`196`	`definition={labwareDefinition}`
	`197`	`+ positioningMode="offsetInSlot"`
`197`	`198`	`wellFill={wellFill}`
`198`	`199`	`/>`
`199`	`200`	`</g>`