refactor(components): adjust config fixture base stroke and position (#…

…14316) provides additional spacing between config fixtures by adding a stroke to the base SVG and adjusting positioning accordingly closes RAUT-867
Opentrons · Jan 18, 2024 · c897edd · c897edd
1 parent cb819ee
commit c897edd
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 131 deletions.
diff --git a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx
@@ -58,13 +58,9 @@ describe('SecondaryButton', () => {
   it('applies the correct states to the button - focus-visible', () => {
     const { getByText } = render(props)
     const button = getByText('secondary button')
-    expect(button).toHaveStyleRule(
-      'box-shadow',
-      `0 0 0 3px ${COLORS.yellow50}`,
-      {
-        modifier: ':focus-visible',
-      }
-    )
+    expect(button).toHaveStyleRule('box-shadow', `0 0 0 3px ${COLORS.blue50}`, {
+      modifier: ':focus-visible',
+    })
   })
 
   it('renders secondary button with text and different background color', () => {

diff --git a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
@@ -7,7 +7,13 @@ import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import { FIXTURE_HEIGHT, SINGLE_SLOT_FIXTURE_WIDTH } from './constants'
+import {
+  COLUMN_1_X_ADJUSTMENT,
+  COLUMN_3_X_ADJUSTMENT,
+  FIXTURE_HEIGHT,
+  SINGLE_SLOT_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
+} from './constants'
 
 import type { CutoutId, DeckDefinition } from '@opentrons/shared-data'
 
@@ -34,15 +40,17 @@ export function EmptyConfigFixture(
   const [xSlotPosition = 0, ySlotPosition = 0] =
     standardSlotCutout?.position ?? []
 
-  const isLeftSideofDeck =
+  const isColumnOne =
     fixtureLocation === 'cutoutA1' ||
     fixtureLocation === 'cutoutB1' ||
     fixtureLocation === 'cutoutC1' ||
     fixtureLocation === 'cutoutD1'
-  const xAdjustment = isLeftSideofDeck ? -101.5 : -17
+  const xAdjustment = isColumnOne
+    ? COLUMN_1_X_ADJUSTMENT
+    : COLUMN_3_X_ADJUSTMENT
   const x = xSlotPosition + xAdjustment
-  const yAdjustment = -10
-  const y = ySlotPosition + yAdjustment
+
+  const y = ySlotPosition + Y_ADJUSTMENT
 
   return (
     <RobotCoordsForeignObject

diff --git a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
@@ -1,16 +1,18 @@
 import * as React from 'react'
-import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
-import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
-import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+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,
   FIXTURE_HEIGHT,
   STAGING_AREA_DISPLAY_NAME,
   STAGING_AREA_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
 } from './constants'
 
 import type { CutoutId, DeckDefinition } from '@opentrons/shared-data'
@@ -37,10 +39,8 @@ export function StagingAreaConfigFixture(
   const [xSlotPosition = 0, ySlotPosition = 0] =
     stagingAreaCutout?.position ?? []
 
-  const xAdjustment = -17
-  const x = xSlotPosition + xAdjustment
-  const yAdjustment = -10
-  const y = ySlotPosition + yAdjustment
+  const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
+  const y = ySlotPosition + Y_ADJUSTMENT
 
   return (
     <RobotCoordsForeignObject
@@ -54,8 +54,8 @@ export function StagingAreaConfigFixture(
       <Btn
         css={
           handleClickRemove != null
-            ? STAGING_AREA_CONFIG_STYLE_EDITABLE
-            : STAGING_AREA_CONFIG_STYLE_READ_ONLY
+            ? CONFIG_STYLE_EDITABLE
+            : CONFIG_STYLE_READ_ONLY
         }
         cursor={handleClickRemove != null ? 'pointer' : 'default'}
         onClick={
@@ -74,30 +74,3 @@ export function StagingAreaConfigFixture(
     </RobotCoordsForeignObject>
   )
 }
-
-const STAGING_AREA_CONFIG_STYLE_READ_ONLY = css`
-  display: ${DISPLAY_FLEX};
-  align-items: ${ALIGN_CENTER};
-  background-color: ${COLORS.grey50};
-  border-radius: ${BORDERS.borderRadiusSize1};
-  color: ${COLORS.white};
-  grid-gap: ${SPACING.spacing8};
-  justify-content: ${JUSTIFY_CENTER};
-  width: 100%;
-`
-
-const STAGING_AREA_CONFIG_STYLE_EDITABLE = css`
-  ${STAGING_AREA_CONFIG_STYLE_READ_ONLY}
-
-  &:active {
-    background-color: ${COLORS.grey60};
-  }
-
-  &:hover {
-    background-color: ${COLORS.grey55};
-  }
-
-  &:focus-visible {
-    border: 3px solid ${COLORS.blue50};
-  }
-`
diff --git a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx
@@ -1,16 +1,19 @@
 import * as React from 'react'
-import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
-import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
-import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
+  COLUMN_1_X_ADJUSTMENT,
+  COLUMN_3_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
   FIXTURE_HEIGHT,
   SINGLE_SLOT_FIXTURE_WIDTH,
   TRASH_BIN_DISPLAY_NAME,
+  Y_ADJUSTMENT,
 } from './constants'
 
 import type { CutoutId, DeckDefinition } from '@opentrons/shared-data'
@@ -37,15 +40,17 @@ export function TrashBinConfigFixture(
    */
   const [xSlotPosition = 0, ySlotPosition = 0] = trashBinCutout?.position ?? []
 
-  const isLeftSideofDeck =
+  const isColumnOne =
     fixtureLocation === 'cutoutA1' ||
     fixtureLocation === 'cutoutB1' ||
     fixtureLocation === 'cutoutC1' ||
     fixtureLocation === 'cutoutD1'
-  const xAdjustment = isLeftSideofDeck ? -101.5 : -17
+  const xAdjustment = isColumnOne
+    ? COLUMN_1_X_ADJUSTMENT
+    : COLUMN_3_X_ADJUSTMENT
   const x = xSlotPosition + xAdjustment
-  const yAdjustment = -10
-  const y = ySlotPosition + yAdjustment
+
+  const y = ySlotPosition + Y_ADJUSTMENT
 
   return (
     <RobotCoordsForeignObject
@@ -59,8 +64,8 @@ export function TrashBinConfigFixture(
       <Btn
         css={
           handleClickRemove != null
-            ? TRASH_BIN_CONFIG_STYLE_EDTIABLE
-            : TRASH_BIN_CONFIG_STYLE_READ_ONLY
+            ? CONFIG_STYLE_EDITABLE
+            : CONFIG_STYLE_READ_ONLY
         }
         cursor={handleClickRemove != null ? 'pointer' : 'default'}
         onClick={
@@ -79,29 +84,3 @@ export function TrashBinConfigFixture(
     </RobotCoordsForeignObject>
   )
 }
-
-const TRASH_BIN_CONFIG_STYLE_READ_ONLY = css`
-  display: ${DISPLAY_FLEX};
-  align-items: ${ALIGN_CENTER};
-  background-color: ${COLORS.grey50};
-  border-radius: ${BORDERS.borderRadiusSize1};
-  color: ${COLORS.white};
-  justify-content: ${JUSTIFY_CENTER};
-  grid-gap: ${SPACING.spacing8};
-  width: 100%;
-`
-
-const TRASH_BIN_CONFIG_STYLE_EDTIABLE = css`
-  ${TRASH_BIN_CONFIG_STYLE_READ_ONLY}
-
-  &:active {
-    background-color: ${COLORS.grey60};
-  }
-
-  &:hover {
-    background-color: ${COLORS.grey55};
-  }
-
-  &:focus-visible {
-  }
-`
diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
@@ -1,17 +1,19 @@
 import * as React from 'react'
-import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
 import { Btn, Text } from '../../primitives'
-import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
-import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import {
-  WASTE_CHUTE_DISPLAY_NAME,
+  COLUMN_3_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
   FIXTURE_HEIGHT,
   STAGING_AREA_FIXTURE_WIDTH,
   SINGLE_SLOT_FIXTURE_WIDTH,
+  WASTE_CHUTE_DISPLAY_NAME,
+  Y_ADJUSTMENT,
 } from './constants'
 
 import type { CutoutId, DeckDefinition } from '@opentrons/shared-data'
@@ -44,10 +46,8 @@ export function WasteChuteConfigFixture(
   const [xSlotPosition = 0, ySlotPosition = 0] =
     wasteChuteCutout?.position ?? []
 
-  const xAdjustment = -17
-  const x = xSlotPosition + xAdjustment
-  const yAdjustment = -10
-  const y = ySlotPosition + yAdjustment
+  const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
+  const y = ySlotPosition + Y_ADJUSTMENT
 
   return (
     <RobotCoordsForeignObject
@@ -63,8 +63,8 @@ export function WasteChuteConfigFixture(
       <Btn
         css={
           handleClickRemove != null
-            ? WASTE_CHUTE_CONFIG_STYLE_EDITABLE
-            : WASTE_CHUTE_CONFIG_STYLE_READ_ONLY
+            ? CONFIG_STYLE_EDITABLE
+            : CONFIG_STYLE_READ_ONLY
         }
         cursor={handleClickRemove != null ? 'pointer' : 'default'}
         onClick={
@@ -83,30 +83,3 @@ export function WasteChuteConfigFixture(
     </RobotCoordsForeignObject>
   )
 }
-
-const WASTE_CHUTE_CONFIG_STYLE_READ_ONLY = css`
-  display: ${DISPLAY_FLEX};
-  align-items: ${ALIGN_CENTER};
-  background-color: ${COLORS.grey50};
-  border-radius: ${BORDERS.borderRadiusSize1};
-  color: ${COLORS.white};
-  justify-content: ${JUSTIFY_CENTER};
-  grid-gap: ${SPACING.spacing8};
-  width: 100%;
-`
-
-const WASTE_CHUTE_CONFIG_STYLE_EDITABLE = css`
-  ${WASTE_CHUTE_CONFIG_STYLE_READ_ONLY}
-
-  &:active {
-    background-color: ${COLORS.grey60};
-  }
-
-  &:hover {
-    background-color: ${COLORS.grey55};
-  }
-
-  &:focus-visible {
-    border: 3px solid ${COLORS.blue50};
-  }
-`
diff --git a/components/src/hardware-sim/DeckConfigurator/constants.ts b/components/src/hardware-sim/DeckConfigurator/constants.ts
@@ -1,6 +1,49 @@
-export const FIXTURE_HEIGHT = 106.0
-export const SINGLE_SLOT_FIXTURE_WIDTH = 246.5
-export const STAGING_AREA_FIXTURE_WIDTH = 318.5
+import { css } from 'styled-components'
+
+import { COLORS } from '../../helix-design-system'
+import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
+import { BORDERS, SPACING } from '../../ui-style-constants'
+
+/**
+ * These are Flex deck configurator-only values to position a foreign object
+ * Position is relative to deck definition slot positions and a custom stroke applied to the single slot fixture SVG
+ */
+export const FIXTURE_HEIGHT = 102.0
+export const SINGLE_SLOT_FIXTURE_WIDTH = 243.5
+export const STAGING_AREA_FIXTURE_WIDTH = 314.5
+
+export const COLUMN_1_X_ADJUSTMENT = -100
+export const COLUMN_3_X_ADJUSTMENT = -15.5
+export const Y_ADJUSTMENT = -8
+
 export const STAGING_AREA_DISPLAY_NAME = 'Staging area'
 export const TRASH_BIN_DISPLAY_NAME = 'Trash bin'
 export const WASTE_CHUTE_DISPLAY_NAME = 'Waste chute'
+
+// common config styles for staging area, trash bin, waste chute
+export const CONFIG_STYLE_READ_ONLY = css`
+  display: ${DISPLAY_FLEX};
+  align-items: ${ALIGN_CENTER};
+  background-color: ${COLORS.grey50};
+  border-radius: ${BORDERS.borderRadiusSize1};
+  color: ${COLORS.white};
+  grid-gap: ${SPACING.spacing8};
+  justify-content: ${JUSTIFY_CENTER};
+  width: 100%;
+`
+
+export const CONFIG_STYLE_EDITABLE = css`
+  ${CONFIG_STYLE_READ_ONLY}
+
+  &:active {
+    background-color: ${COLORS.grey60};
+  }
+
+  &:hover {
+    background-color: ${COLORS.grey55};
+  }
+
+  &:focus-visible {
+    border: 3px solid ${COLORS.blue50};
+  }
+`
diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx
@@ -91,14 +91,16 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
     >
       {deckDef.locations.cutouts.map(cutout => (
-        <SingleSlotFixture
-          key={cutout.id}
-          cutoutId={cutout.id as CutoutId}
-          deckDefinition={deckDef}
-          slotClipColor={COLORS.transparent}
-          fixtureBaseColor={lightFill}
-          showExpansion={showExpansion}
-        />
+        // give the outside of the base fixture svgs a stroke for extra spacing
+        <g key={cutout.id} stroke={COLORS.white} strokeWidth="4">
+          <SingleSlotFixture
+            cutoutId={cutout.id}
+            deckDefinition={deckDef}
+            slotClipColor={COLORS.transparent}
+            fixtureBaseColor={lightFill}
+            showExpansion={showExpansion}
+          />
+        </g>
       ))}
       {stagingAreaFixtures.map(({ cutoutId }) => (
         <StagingAreaConfigFixture