From 5589015b07ae5778596cedd4d1f429a71c3c34ea Mon Sep 17 00:00:00 2001
From: Brian Cooper <brian@allegro.com>
Date: Wed, 14 Oct 2020 15:54:42 -0400
Subject: [PATCH 1/2] fix(app): remove redundant tip rack display name from
 tooltip

---
 .../CalibratePanel/PipetteTiprackListItem.js  | 62 +++++++------------
 components/src/lists/ListItem.js              |  6 ++
 2 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/app/src/components/CalibratePanel/PipetteTiprackListItem.js b/app/src/components/CalibratePanel/PipetteTiprackListItem.js
index 71270ab5287..3f91dc8c1a9 100644
--- a/app/src/components/CalibratePanel/PipetteTiprackListItem.js
+++ b/app/src/components/CalibratePanel/PipetteTiprackListItem.js
@@ -4,10 +4,14 @@ import { useSelector } from 'react-redux'
 
 import {
   ListItem,
-  HoverTooltip,
+  useHoverTooltip,
+  TOOLTIP_BOTTOM,
+  Tooltip,
   Box,
   Text,
   FONT_WEIGHT_SEMIBOLD,
+  FONT_SIZE_BODY_1,
+  C_WHITE,
 } from '@opentrons/components'
 import styles from './styles.css'
 
@@ -52,44 +56,26 @@ export function PipetteTiprackListItem(
         )
       : null
   )
-  return (
-    <HoverTooltip
-      placement="bottom"
-      tooltipComponent={
-        <TiprackNameTooltip name={name} displayName={displayName} />
-      }
-    >
-      {tooltipHandlers => (
-        <ListItem
-          key={name}
-          ref={tooltipHandlers?.ref}
-          onMouseEnter={tooltipHandlers?.onMouseEnter}
-          onMouseLeave={tooltipHandlers?.onMouseLeave}
-          url={calibrateUrl}
-          activeClassName={styles.active}
-        >
-          <Box marginLeft={MARGIN_LEFT_SIZE}>
-            <Text fontWeight={FONT_WEIGHT_SEMIBOLD}>{displayName}</Text>
-            <TipLengthCalibrationData
-              calibrationData={tipLengthCalibration}
-              // the definitionHash will only be absent if old labware
-              // or robot version <= 3.19
-              calDataAvailable={definitionHash != null}
-            />
-          </Box>
-        </ListItem>
-      )}
-    </HoverTooltip>
-  )
-}
-
-function TiprackNameTooltip(props: {| name: string, displayName: string |}) {
-  const { name, displayName } = props
 
+  const [targetProps, tooltipProps] = useHoverTooltip({
+    placement: TOOLTIP_BOTTOM,
+  })
   return (
-    <div className={styles.item_info_tooltip}>
-      <p>{name}</p>
-      <p>{displayName}</p>
-    </div>
+    <ListItem key={name} url={calibrateUrl} activeClassName={styles.active}>
+      <Box {...targetProps} marginLeft={MARGIN_LEFT_SIZE}>
+        <Text fontWeight={FONT_WEIGHT_SEMIBOLD}>{displayName}</Text>
+        <TipLengthCalibrationData
+          calibrationData={tipLengthCalibration}
+          // the definitionHash will only be absent if old labware
+          // or robot version <= 3.19
+          calDataAvailable={definitionHash != null}
+        />
+      </Box>
+      <Tooltip {...tooltipProps}>
+        <Text fontSize={FONT_SIZE_BODY_1} color={C_WHITE}>
+          {name}
+        </Text>
+      </Tooltip>
+    </ListItem>
   )
 }
diff --git a/components/src/lists/ListItem.js b/components/src/lists/ListItem.js
index 50196d7d988..32abcbe6919 100644
--- a/components/src/lists/ListItem.js
+++ b/components/src/lists/ListItem.js
@@ -14,6 +14,10 @@ type ListItemProps = {|
   onMouseEnter?: (event: SyntheticMouseEvent<>) => mixed,
   /** mouse leave handler */
   onMouseLeave?: (event: SyntheticMouseEvent<>) => mixed,
+  /** mouse enter handler */
+  onPointerEnter?: (event: SyntheticPointerEvent<>) => mixed,
+  /** mouse leave handler */
+  onPointerLeave?: (event: SyntheticPointerEvent<>) => mixed,
   /** if URL is specified, ListItem is wrapped in a React Router NavLink */
   url?: string | null,
   /** if URL is specified NavLink can receive an active class name */
@@ -26,6 +30,8 @@ type ListItemProps = {|
   isDisabled?: boolean,
   /** name constant of the icon to display */
   iconName?: IconName,
+  'aria-describedby'?: string,
+  ref?: {| current: Element | null |} | ((current: Element | null) => mixed),
   children: React.Node,
 |}
 

From beef05b8bc05d7f5f9fa8ca64ae40e38ddb06e3c Mon Sep 17 00:00:00 2001
From: Brian Cooper <brian@allegro.com>
Date: Wed, 14 Oct 2020 17:09:49 -0400
Subject: [PATCH 2/2] update labware list item tooltip as well

---
 .../CalibratePanel/LabwareListItem.js         | 99 +++++++++----------
 1 file changed, 44 insertions(+), 55 deletions(-)

diff --git a/app/src/components/CalibratePanel/LabwareListItem.js b/app/src/components/CalibratePanel/LabwareListItem.js
index 09344cd063b..e1ae27d23ed 100644
--- a/app/src/components/CalibratePanel/LabwareListItem.js
+++ b/app/src/components/CalibratePanel/LabwareListItem.js
@@ -8,7 +8,15 @@ import {
   getModuleType,
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
-import { ListItem, HoverTooltip } from '@opentrons/components'
+import {
+  ListItem,
+  Flex,
+  Tooltip,
+  Text,
+  useHoverTooltip,
+  FONT_SIZE_BODY_1,
+  C_WHITE,
+} from '@opentrons/components'
 import { CalibrationData } from './CalibrationData'
 import type { BaseProtocolLabware } from '../../calibration/labware/types'
 import styles from './styles.css'
@@ -44,6 +52,8 @@ export function LabwareListItem(props: LabwareListItemProps): React.Node {
   }
   const moduleDisplayName = parent && getModuleDisplayName(parent)
 
+  const [targetProps, tooltipProps] = useHoverTooltip()
+
   return (
     <ListItem
       url={!isDisabled ? url : undefined}
@@ -52,61 +62,40 @@ export function LabwareListItem(props: LabwareListItemProps): React.Node {
       className={cx(styles.labware_item, { [styles.disabled]: isDisabled })}
       activeClassName={styles.active}
     >
-      <HoverTooltip
-        tooltipComponent={
-          <LabwareNameTooltip
-            name={name}
-            displayName={
-              moduleDisplayName
-                ? `${displayName} on ${moduleDisplayName}`
-                : displayName
-            }
-          />
-        }
-      >
-        {handlers => (
-          <div {...handlers} className={styles.item_info}>
-            <span className={styles.item_info_location}>{displaySlot}</span>
-            <div className={styles.slot_contents_names}>
-              {parent && (
-                <span className={styles.module_name}>{moduleDisplayName}</span>
-              )}
-              <span className={styles.labware_item_name}>
-                {isTiprack ? (
-                  <span className={styles.tiprack_item_mount}>
-                    <span className={styles.tiprack_item_mount}>
-                      {calibratorMount
-                        ? calibratorMount.charAt(0).toUpperCase()
-                        : ''}
-                    </span>
-                    {displayName}
-                  </span>
-                ) : (
-                  displayName
-                )}
+      <Flex {...targetProps} className={styles.item_info}>
+        <span className={styles.item_info_location}>{displaySlot}</span>
+        <div className={styles.slot_contents_names}>
+          {parent && (
+            <span className={styles.module_name}>{moduleDisplayName}</span>
+          )}
+          <span className={styles.labware_item_name}>
+            {isTiprack ? (
+              <span className={styles.tiprack_item_mount}>
+                <span className={styles.tiprack_item_mount}>
+                  {calibratorMount
+                    ? calibratorMount.charAt(0).toUpperCase()
+                    : ''}
+                </span>
+                {displayName}
               </span>
-              <CalibrationData
-                calibrationData={calibrationData}
-                calibratedThisSession={confirmed}
-                // the definitionHash will only be absent if old labware
-                // or robot version <= 3.19
-                calDataAvailable={definitionHash !== null}
-              />
-            </div>
-          </div>
-        )}
-      </HoverTooltip>
+            ) : (
+              displayName
+            )}
+          </span>
+          <CalibrationData
+            calibrationData={calibrationData}
+            calibratedThisSession={confirmed}
+            // the definitionHash will only be absent if old labware
+            // or robot version <= 3.19
+            calDataAvailable={definitionHash !== null}
+          />
+        </div>
+      </Flex>
+      <Tooltip {...tooltipProps}>
+        <Text fontSize={FONT_SIZE_BODY_1} color={C_WHITE}>
+          {name}
+        </Text>
+      </Tooltip>
     </ListItem>
   )
 }
-
-function LabwareNameTooltip(props: {| name: string, displayName: string |}) {
-  const { name, displayName } = props
-
-  return (
-    <div className={styles.item_info_tooltip}>
-      <p>{name}</p>
-      <p>{displayName}</p>
-    </div>
-  )
-}