update other labwareInternals components to accommodate passing fill

Opentrons · Jul 30, 2024 · 4368f3d · 4368f3d
1 parent 89e036f
commit 4368f3d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
@@ -18,6 +18,7 @@ export interface LabwareOutlineProps {
   highlight?: boolean
   /** [legacy] override the border color */
   stroke?: CSSProperties['stroke']
+  fill?: CSSProperties['fill']
 }
 
 const OUTLINE_THICKNESS_MM = 1
@@ -30,13 +31,19 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
     isTiprack = false,
     highlight = false,
     stroke,
+    fill,
   } = props
   const {
     parameters = { isTiprack },
     dimensions = { xDimension: width, yDimension: height },
   } = definition ?? {}
 
-  const backgroundFill = parameters.isTiprack ? '#CCCCCC' : COLORS.white
+  let backgroundFill
+  if (fill != null) {
+    backgroundFill = fill
+  } else {
+    backgroundFill = parameters.isTiprack ? '#CCCCCC' : COLORS.white
+  }
   return (
     <>
       {highlight ? (

diff --git a/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx b/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx
@@ -1,6 +1,6 @@
 // Render labware definition to SVG. XY is in robot coordinates.
 import * as React from 'react'
-import styled from 'styled-components'
+import styled, { CSSProperties } from 'styled-components'
 import flatMap from 'lodash/flatMap'
 
 import { LabwareOutline } from './LabwareOutline'
@@ -22,6 +22,7 @@ export interface StaticLabwareProps {
   onMouseEnterWell?: (e: WellMouseEvent) => unknown
   /** Optional callback to be executed when mouse leaves a well element */
   onMouseLeaveWell?: (e: WellMouseEvent) => unknown
+  fill?: CSSProperties['fill']
 }
 
 const TipDecoration = React.memo(function TipDecoration(props: {
@@ -55,13 +56,18 @@ export function StaticLabwareComponent(props: StaticLabwareProps): JSX.Element {
     onLabwareClick,
     onMouseEnterWell,
     onMouseLeaveWell,
+    fill,
   } = props
 
   const { isTiprack } = definition.parameters
   return (
     <g onClick={onLabwareClick}>
       <LabwareDetailGroup>
-        <LabwareOutline definition={definition} highlight={highlight} />
+        <LabwareOutline
+          definition={definition}
+          highlight={highlight}
+          fill={fill}
+        />
       </LabwareDetailGroup>
       <g>
         {flatMap(
@@ -78,6 +84,7 @@ export function StaticLabwareComponent(props: StaticLabwareProps): JSX.Element {
                     {...(isTiprack
                       ? STYLE_BY_WELL_CONTENTS.tipPresent
                       : STYLE_BY_WELL_CONTENTS.defaultWell)}
+                    fill={fill}
                   />
 
                   {isTiprack ? (

diff --git a/components/src/hardware-sim/Labware/labwareInternals/Well.tsx b/components/src/hardware-sim/Labware/labwareInternals/Well.tsx
@@ -26,13 +26,15 @@ export function WellComponent(props: WellProps): JSX.Element {
     wellName,
     stroke = COLORS.black90,
     strokeWidth = 1,
-    fill = COLORS.white,
+    fill,
     onMouseEnterWell,
     onMouseLeaveWell,
     isInteractive = onMouseEnterWell != null || onMouseLeaveWell != null,
   } = props
   const { x, y } = well
 
+  const wellFill = fill ?? COLORS.white
+
   const pointerEvents: React.CSSProperties['pointerEvents'] = isInteractive
     ? 'auto'
     : 'none'
@@ -46,7 +48,7 @@ export function WellComponent(props: WellProps): JSX.Element {
       onMouseLeaveWell != null
         ? (event: React.MouseEvent) => onMouseLeaveWell({ wellName, event })
         : undefined,
-    style: { pointerEvents, stroke, strokeWidth, fill },
+    style: { pointerEvents, stroke, strokeWidth, fill: wellFill },
   }
 
   if (well.shape === 'circular') {