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

package/src/forms/forms.module.css

@@ -3,20 +3,20 @@
 .accessibly_hidden {
   position: absolute;
   overflow: hidden;
-  clip: rect(0 0 0 0);
-  height: 1px;
   width: 1px;
-  margin: -1px;
+  height: 1px;
   padding: 0;
   border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 0);
 }
 
 .form_field {
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
-  font-weight: var(--fw-regular); /* from legacy --font-form-default */
-  color: var(--c-font-dark); /* from legacy --font-form-default */
   display: flex;
   align-items: center;
+  color: var(--c-font-dark); /* from legacy --font-form-default */
+  font-size: var(--fs-body-1); /* from legacy --font-form-default */
+  font-weight: var(--fw-regular); /* from legacy --font-form-default */
   line-height: 1;
 }
 
@@ -30,10 +30,10 @@
 }
 
 .form_group_label {
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
+  margin-bottom: 0.15rem;
   color: var(--c-font-dark); /* from legacy --font-form-default */
+  font-size: var(--fs-body-1); /* from legacy --font-form-default */
   font-weight: var(--fw-semibold);
-  margin-bottom: 0.15rem;
   text-transform: capitalize;
 
   &::after {
@@ -42,21 +42,22 @@
 }
 
 .form_group_label_pipette_settings_slideout {
-  font-weight: var(--fw-semibold);
   margin-bottom: 0.5rem;
-  text-transform: capitalize;
-  font-size: 13px;
   color: #16212d;
+  font-size: 13px;
+  font-weight: var(--fw-semibold);
+  text-transform: capitalize;
 }
 
 .checkbox_icon {
+  display: flex;
+
   /* Icon for radiobutton and for checkbox */
   width: 1.25rem;
   min-width: 1.25rem;
-  color: var(--c-font-dark);
-  display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  color: var(--c-font-dark);
 
   &:not(.checkbox_disabled):hover {
     cursor: pointer;
@@ -96,20 +97,20 @@
 .input_field {
   display: flex;
   flex: 1 1;
-  background-color: var(--c-light-gray);
-  border-radius: var(--bd-radius-form-field);
   padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+  border-radius: var(--bd-radius-form-field);
+  background-color: var(--c-light-gray);
 
   & input {
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    font-weight: var(--fw-regular); /* from legacy --font-form-default */
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    background-color: inherit;
-    border-radius: inherit;
-    border: none;
-    flex: 1 1 auto;
     width: 100%;
     height: 1rem;
+    flex: 1 1 auto;
+    border: none;
+    border-radius: inherit;
+    background-color: inherit;
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: var(--fw-regular); /* from legacy --font-form-default */
 
     /* TODO: Ian 2018-09-14 Firefox has 1px padding on input element,
     * but I can't figure out how to fix it in Firefox without breaking it in Chrome.
@@ -133,20 +134,20 @@
   }
 
   & .suffix {
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    font-weight: var(--fw-semibold);
     display: inline-block;
     flex: 1 0;
-    text-align: right;
     align-self: center;
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: var(--fw-semibold);
+    text-align: right;
   }
 }
 
 .input_caption {
+  color: var(--c-med-gray); /* from legacy --font-form-caption */
   font-size: var(--fs-caption); /* from legacy --font-form-caption */
   font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
-  color: var(--c-med-gray); /* from legacy --font-form-caption */
   line-height: 1.2;
 
   & .right {
@@ -184,18 +185,18 @@
   position: relative;
 
   & select {
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    font-weight: var(--fw-regular); /* from legacy --font-form-default */
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    border: 0;
-    padding: 0.25rem 0.5rem;
-    outline: none;
+    overflow: hidden;
+    width: 100%;
     height: 1.5rem;
+    padding: 0.25rem 0.5rem;
+    border: 0;
     border-radius: var(--bd-radius-form-field);
-    font-family: inherit;
-    width: 100%;
     appearance: none;
-    overflow: hidden;
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    font-family: inherit;
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: var(--fw-regular); /* from legacy --font-form-default */
+    outline: none;
 
     &:focus {
       background-color: var(--c-white);

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

@@ -19,7 +19,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import type * as React from 'react'
 import type {
   DeckConfiguration,
-  LabwareDefinition2,
+  LabwareDefinition,
 } from '@opentrons/shared-data'
 
 const meta: Meta<React.ComponentProps<typeof BaseDeckComponent>> = {
@@ -54,34 +54,34 @@ export const BaseDeck: Story = {
     labwareOnDeck: [
       {
         labwareLocation: { slotName: 'C2' },
-        definition: fixture96Plate as LabwareDefinition2,
+        definition: fixture96Plate as LabwareDefinition,
       },
       {
         labwareLocation: { slotName: 'C3' },
-        definition: fixtureTiprack1000ul as LabwareDefinition2,
+        definition: fixtureTiprack1000ul as LabwareDefinition,
       },
     ],
     modulesOnDeck: [
       {
         moduleLocation: { slotName: 'B1' },
         moduleModel: THERMOCYCLER_MODULE_V2,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition,
         innerProps: { lidMotorState: 'open' },
       },
       {
         moduleLocation: { slotName: 'D1' },
         moduleModel: TEMPERATURE_MODULE_V2,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition,
       },
       {
         moduleLocation: { slotName: 'B3' },
         moduleModel: HEATERSHAKER_MODULE_V1,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition,
       },
       {
         moduleLocation: { slotName: 'D2' },
         moduleModel: MAGNETIC_BLOCK_V1,
-        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition,
       },
     ],
     darkFill: 'rebeccapurple',

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

@@ -4,7 +4,7 @@ import partition from 'lodash/partition'
 import {
   FLEX_STACKER_MODULE_TYPE,
   getDeckDefFromRobotType,
-  getModuleDef2,
+  getModuleDef,
   getModuleType,
   getPositionFromSlotId,
   HEATERSHAKER_MODULE_V1,
@@ -18,6 +18,7 @@ import {
   STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
   TRASH_BIN_ADAPTER_FIXTURE,
   WASTE_CHUTE_CUTOUT,
+  WASTE_CHUTE_FLEX_STACKER_FIXTURES,
   WASTE_CHUTE_ONLY_FIXTURES,
   WASTE_CHUTE_STAGING_AREA_FIXTURES,
 } from '@opentrons/shared-data'
@@ -40,20 +41,19 @@ import type { ComponentProps, ReactNode } from 'react'
 import type {
   CutoutFixtureId,
   DeckConfiguration,
-  LabwareDefinition2,
+  LabwareDefinition,
   LabwareLocation,
   ModuleLocation,
   ModuleModel,
   RobotType,
 } from '@opentrons/shared-data'
-import type { Svg } from '../../primitives'
 import type { TrashCutoutId } from '../Deck/FlexTrash'
 import type { WellFill, WellGroup } from '../Labware'
 import type { StagingAreaLocation } from './StagingAreaFixture'
 
 export interface LabwareOnDeck {
   labwareLocation: LabwareLocation
-  definition: LabwareDefinition2
+  definition: LabwareDefinition
   wellFill?: WellFill
   missingTips?: WellGroup
   /** generic prop to render self-positioned children for each labware */
@@ -67,7 +67,7 @@ export interface LabwareOnDeck {
 export interface ModuleOnDeck {
   moduleModel: ModuleModel
   moduleLocation: ModuleLocation
-  nestedLabwareDef?: LabwareDefinition2 | null
+  nestedLabwareDef?: LabwareDefinition | null
   nestedLabwareWellFill?: WellFill
   innerProps?: ComponentProps<typeof Module>['innerProps']
   /** generic prop to render self-positioned children for each module */
@@ -79,7 +79,7 @@ export interface ModuleOnDeck {
   hopperLabware?: HopperLabwareProps
 }
 export interface HopperLabwareProps {
-  hopperLabwareDef: LabwareDefinition2 | null
+  hopperLabwareDef: LabwareDefinition | null
   hopperLabwareWellFill: WellFill
   hopperOnLabwareClick: () => void
   hopperHighlightLabware: boolean
@@ -89,9 +89,15 @@ export interface HopperLabwareProps {
 // these ugly consts are unfortunately necessary as the hopper location exists
 // outside of our deck definition so the render doesn't follow our normal conventions
 export const STACKER_MODULE_Y_OFFSET = -6
-export const STACKER_HOPPER_LABWARE_X_OFFSET = 178.5
-export const STACKER_HOPPER_LABWARE_Y_OFFSET = 7
+// todo(mm, 2025-07-16): 17.5 mm is a by-eye adjustment that takes us from a little bit
+// left of the hopper to inside the hopper. The fact that we were 17.5 mm left in the
+// first place is weird, and suggests we're doing wrong math somewhere. A more normal
+// thing to expect here would be starting at the extended shuttle position and needing
+// an offset of hundreds of mm to go from there to inside the hopper.
+export const STACKER_HOPPER_LABWARE_X_OFFSET = 17.5
+export const STACKER_HOPPER_LABWARE_Y_OFFSET = 6
 export const STACKER_DECK_VIEW_BOX_EXPANSION = 220
+
 interface BaseDeckProps {
   deckConfig: DeckConfiguration
   robotType: RobotType
@@ -107,7 +113,10 @@ interface BaseDeckProps {
   /** whether to make wrapping svg tag animatable via @react-spring/web, defaults to false */
   animatedSVG?: boolean
   /** extra props to pass to svg tag */
-  svgProps?: ComponentProps<typeof Svg>
+  /** NOTE: typing as any because running into some TS issues with React-spring,
+   * CSS Modules & Styled-components not playing together nicely
+   */
+  svgProps?: any
 }
 
 const LABWARE_OFFSET_DISPLAY_THRESHOLD = 2
@@ -166,6 +175,12 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
       WASTE_CHUTE_STAGING_AREA_FIXTURES.includes(fixture.cutoutFixtureId) &&
       fixture.cutoutId === WASTE_CHUTE_CUTOUT
   )
+  const wasteChuteStackerFixtures = deckConfig.filter(
+    fixture =>
+      fixture.cutoutFixtureId != null &&
+      WASTE_CHUTE_FLEX_STACKER_FIXTURES.includes(fixture.cutoutFixtureId) &&
+      fixture.cutoutId === WASTE_CHUTE_CUTOUT
+  )
 
   const [singleLocationModules, stackerModules] = partition(
     modulesOnDeck,
@@ -275,56 +290,6 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
         </>
       )}
       <>
-        {/* render modules, nested labware, and overlays */}
-        {singleLocationModules.map(
-          ({
-            moduleModel,
-            moduleLocation,
-            nestedLabwareDef,
-            nestedLabwareWellFill,
-            innerProps,
-            moduleChildren,
-            onLabwareClick,
-            highlightLabware,
-            highlightShadowLabware,
-          }) => {
-            const slotPosition = getPositionFromSlotId(
-              moduleLocation.slotName,
-              deckDef
-            )
-            const moduleDef = getModuleDef2(moduleModel)
-            return slotPosition != null ? (
-              <Module
-                key={`${moduleModel} ${moduleLocation.slotName}`}
-                def={moduleDef}
-                x={slotPosition[0]}
-                y={slotPosition[1]}
-                orientation={inferModuleOrientationFromXCoordinate(
-                  slotPosition[0]
-                )}
-                innerProps={innerProps}
-              >
-                {nestedLabwareDef != null ? (
-                  <g cursor={onLabwareClick != null ? 'pointer' : ''}>
-                    <LabwareRender
-                      definition={nestedLabwareDef}
-                      onLabwareClick={onLabwareClick}
-                      wellFill={nestedLabwareWellFill}
-                      shouldRotateAdapterOrientation={
-                        inferModuleOrientationFromXCoordinate(
-                          slotPosition[0]
-                        ) === 'left' && moduleModel === HEATERSHAKER_MODULE_V1
-                      }
-                      highlight={highlightLabware}
-                      highlightShadow={highlightShadowLabware}
-                    />
-                  </g>
-                ) : null}
-                {moduleChildren}
-              </Module>
-            ) : null
-          }
-        )}
         {stackerModules.map(
           ({
             moduleModel,
@@ -341,7 +306,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
               moduleLocation.slotName
             )
             const slotPosition = getPositionFromSlotId(stackerSlotName, deckDef)
-            const moduleDef = getModuleDef2(moduleModel)
+            const moduleDef = getModuleDef(moduleModel)
             return slotPosition != null ? (
               <>
                 <StagingAreaFixture
@@ -352,6 +317,19 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   slotClipColor={darkFill}
                   fixtureBaseColor={lightFill}
                 />
+                {wasteChuteStackerFixtures.map(fixture => {
+                  if (fixture.cutoutId === WASTE_CHUTE_CUTOUT) {
+                    return (
+                      <WasteChuteFixture
+                        key={fixture.cutoutId}
+                        cutoutId={fixture.cutoutId}
+                        deckDefinition={deckDef}
+                        fixtureBaseColor={lightFill}
+                        wasteChuteColor={mediumFill}
+                      />
+                    )
+                  }
+                })}
                 <Module
                   key={`${moduleModel} ${moduleLocation.slotName}`}
                   def={moduleDef}
@@ -361,6 +339,9 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                     slotPosition[0]
                   )}
                   innerProps={innerProps}
+                  targetDeckId={deckDef.otId}
+                  targetSlotId={moduleLocation.slotName}
+                  childrenPositioningMode="offsetToSlot"
                 >
                   {nestedLabwareDef != null ? (
                     <g
@@ -369,6 +350,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                     >
                       <LabwareRender
                         definition={nestedLabwareDef}
+                        positioningMode="offsetInSlot"
                         onLabwareClick={onLabwareClick}
                         wellFill={nestedLabwareWellFill}
                         shouldRotateAdapterOrientation={
@@ -387,6 +369,60 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
             ) : null
           }
         )}
+        {/* render modules, nested labware, and overlays */}
+        {singleLocationModules.map(
+          ({
+            moduleModel,
+            moduleLocation,
+            nestedLabwareDef,
+            nestedLabwareWellFill,
+            innerProps,
+            moduleChildren,
+            onLabwareClick,
+            highlightLabware,
+            highlightShadowLabware,
+          }) => {
+            const slotPosition = getPositionFromSlotId(
+              moduleLocation.slotName,
+              deckDef
+            )
+            const moduleDef = getModuleDef(moduleModel)
+            return slotPosition != null ? (
+              <Module
+                key={`${moduleModel} ${moduleLocation.slotName}`}
+                def={moduleDef}
+                x={slotPosition[0]}
+                y={slotPosition[1]}
+                orientation={inferModuleOrientationFromXCoordinate(
+                  slotPosition[0]
+                )}
+                innerProps={innerProps}
+                targetDeckId={deckDef.otId}
+                targetSlotId={moduleLocation.slotName}
+                childrenPositioningMode="offsetToSlot"
+              >
+                {nestedLabwareDef != null ? (
+                  <g cursor={onLabwareClick != null ? 'pointer' : ''}>
+                    <LabwareRender
+                      definition={nestedLabwareDef}
+                      positioningMode="offsetInSlot"
+                      onLabwareClick={onLabwareClick}
+                      wellFill={nestedLabwareWellFill}
+                      shouldRotateAdapterOrientation={
+                        inferModuleOrientationFromXCoordinate(
+                          slotPosition[0]
+                        ) === 'left' && moduleModel === HEATERSHAKER_MODULE_V1
+                      }
+                      highlight={highlightLabware}
+                      highlightShadow={highlightShadowLabware}
+                    />
+                  </g>
+                ) : null}
+                {moduleChildren}
+              </Module>
+            ) : null
+          }
+        )}
         {/* render non-module labware and overlays */}
         {labwareOnDeck.map(
           ({
@@ -423,6 +459,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
               >
                 <LabwareRender
                   definition={definition}
+                  positioningMode="offsetInSlot"
                   onLabwareClick={onLabwareClick}
                   wellFill={wellFill ?? undefined}
                   missingTips={missingTips}
@@ -437,7 +474,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
         {/* render stacked badge on module labware */}
         {modulesOnDeck.map(
           ({ moduleModel, moduleLocation, stacked = false }) => {
-            const moduleDef = getModuleDef2(moduleModel)
+            const moduleDef = getModuleDef(moduleModel)
             const slotPosition = getPositionFromSlotId(
               moduleDef.moduleType === FLEX_STACKER_MODULE_TYPE
                 ? getStackerLocationFromSlot(moduleLocation.slotName)

package/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx

@@ -1,15 +1,11 @@
+import clsx from 'clsx'
+
+import { PlaceholderStyledText } from '../../atoms'
 import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { DeckLabelSet } from '../../organisms'
-import { Flex, Text } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  JUSTIFY_CENTER,
-  TEXT_ALIGN_CENTER,
-} from '../../styles'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import styles from './basedeck.module.css'
 import { SlotBase } from './SlotBase'
 
 import type { SVGProps } from 'react'
@@ -116,32 +112,30 @@ export function WasteChute(props: WasteChuteProps): JSX.Element {
         x={WASTE_CHUTE_X}
         y={-51}
         flexProps={{ flex: '1' }}
-        foreignObjectProps={{ opacity: opacity ?? '1.0', flex: '1' }}
+        foreignObjectProps={{ opacity: opacity ?? 1, flex: '1' }}
       >
         {overlay != null ? (
           overlay
         ) : (
-          <Flex
-            alignItems={ALIGN_CENTER}
-            backgroundColor={backgroundColor}
-            borderRadius="6px"
-            color={wasteIconColor}
-            flexDirection={DIRECTION_COLUMN}
-            gridGap={SPACING.spacing4}
-            justifyContent={JUSTIFY_CENTER}
-            padding={SPACING.spacing8}
-            width="100%"
-            border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
+          <div
+            className={clsx(styles.waste_chute_fixture_container, {
+              [styles.waste_chute_fixture_container_highlight]: showHighlight,
+            })}
+            style={{
+              backgroundColor,
+              color: wasteIconColor,
+            }}
           >
             <Icon name="trash" color={wasteIconColor} height="2rem" />
-            <Text
-              color={COLORS.white}
-              textAlign={TEXT_ALIGN_CENTER}
-              css={TYPOGRAPHY.bodyTextSemiBold}
-            >
-              Waste chute
-            </Text>
-          </Flex>
+            <div className={styles.waste_chute_copy_container}>
+              <PlaceholderStyledText
+                desktopStyle="bodyRegularSemiBold"
+                color={COLORS.white}
+              >
+                Waste chute
+              </PlaceholderStyledText>
+            </div>
+          </div>
         )}
       </RobotCoordsForeignObject>
       {tagInfo != null && tagInfo.length > 0 ? (

package/src/hardware-sim/BaseDeck/basedeck.module.css

@@ -0,0 +1,20 @@
+.waste_chute_copy_container {
+  display: flex;
+  text-align: center;
+}
+
+.waste_chute_fixture_container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  gap: var(--spacing-4);
+  padding-inline: var(--spacing-8);
+}
+
+.waste_chute_fixture_container_highlight {
+  border: 3px solid var(--blue-50);
+}