refactor(components): make entire fixture area clickable in deckconfi…

…gurator make entire fixture area clickable in deckconfigurator close RAUT-873
Opentrons · Nov 20, 2023 · df4b436 · df4b436
1 parent e348535
commit df4b436
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 46 deletions.
diff --git a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
-import { Btn, Flex } from '../../primitives'
+import { Btn } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
@@ -48,20 +48,18 @@ export function EmptyConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex css={EMPTY_CONFIG_STYLE}>
-        <Btn
-          display={DISPLAY_FLEX}
-          justifyContent={JUSTIFY_CENTER}
-          onClick={() => handleClickAdd(fixtureLocation)}
-        >
-          <Icon name="add" color={COLORS.blueEnabled} height="2rem" />
-        </Btn>
-      </Flex>
+      <Btn
+        css={EMPTY_CONFIG_STYLE}
+        onClick={() => handleClickAdd(fixtureLocation)}
+      >
+        <Icon name="add" color={COLORS.blueEnabled} size="2rem" />
+      </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
 const EMPTY_CONFIG_STYLE = css`
+  display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   justify-content: ${JUSTIFY_CENTER};
   background-color: ${COLORS.mediumBlueEnabled};

diff --git a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
-import { Btn, Flex, Text } from '../../primitives'
+import { Btn, Text } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
@@ -44,25 +44,26 @@ export function StagingAreaConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex css={STAGING_AREA_CONFIG_STYLE}>
+      <Btn
+        css={STAGING_AREA_CONFIG_STYLE}
+        cursor={handleClickRemove != null ? 'pointer' : 'none'}
+        onClick={
+          handleClickRemove != null
+            ? () => handleClickRemove(fixtureLocation)
+            : () => {}
+        }
+      >
         <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
           {STAGING_AREA_DISPLAY_NAME}
         </Text>
-        {handleClickRemove != null ? (
-          <Btn
-            display={DISPLAY_FLEX}
-            justifyContent={JUSTIFY_CENTER}
-            onClick={() => handleClickRemove(fixtureLocation)}
-          >
-            <Icon name="remove" color={COLORS.white} height="2.25rem" />
-          </Btn>
-        ) : null}
-      </Flex>
+        <Icon name="remove" color={COLORS.white} size="2rem" />
+      </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
 const STAGING_AREA_CONFIG_STYLE = css`
+  display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   background-color: ${COLORS.grey2};
   border-radius: ${BORDERS.borderRadiusSize1};

diff --git a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
-import { Btn, Flex, Text } from '../../primitives'
+import { Btn, Text } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
@@ -50,25 +50,26 @@ export function TrashBinConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex css={TRASH_BIN_CONFIG_STYLE}>
+      <Btn
+        css={TRASH_BIN_CONFIG_STYLE}
+        cursor={handleClickRemove != null ? 'pointer' : 'none'}
+        onClick={
+          handleClickRemove != null
+            ? () => handleClickRemove(fixtureLocation)
+            : () => {}
+        }
+      >
         <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
           {TRASH_BIN_DISPLAY_NAME}
         </Text>
-        {handleClickRemove != null ? (
-          <Btn
-            display={DISPLAY_FLEX}
-            justifyContent={JUSTIFY_CENTER}
-            onClick={() => handleClickRemove(fixtureLocation)}
-          >
-            <Icon name="remove" color={COLORS.white} height="2.25rem" />
-          </Btn>
-        ) : null}
-      </Flex>
+        <Icon name="remove" color={COLORS.white} size="2rem" />
+      </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
 const TRASH_BIN_CONFIG_STYLE = css`
+  display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   background-color: ${COLORS.grey2};
   border-radius: ${BORDERS.borderRadiusSize1};

diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
-import { Btn, Flex, Text } from '../../primitives'
+import { Btn, Text } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
@@ -53,25 +53,26 @@ export function WasteChuteConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex css={WASTE_CHUTE_CONFIG_STYLE}>
+      <Btn
+        css={WASTE_CHUTE_CONFIG_STYLE}
+        cursor={handleClickRemove != null ? 'pointer' : 'none'}
+        onClick={
+          handleClickRemove != null
+            ? () => handleClickRemove(fixtureLocation)
+            : () => {}
+        }
+      >
         <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
           {WASTE_CHUTE_DISPLAY_NAME}
         </Text>
-        {handleClickRemove != null ? (
-          <Btn
-            display={DISPLAY_FLEX}
-            justifyContent={JUSTIFY_CENTER}
-            onClick={() => handleClickRemove(fixtureLocation)}
-          >
-            <Icon name="remove" color={COLORS.white} height="2.25rem" />
-          </Btn>
-        ) : null}
-      </Flex>
+        <Icon name="remove" color={COLORS.white} size="2rem" />
+      </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
 const WASTE_CHUTE_CONFIG_STYLE = css`
+  display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   background-color: ${COLORS.grey2};
   border-radius: ${BORDERS.borderRadiusSize1};