fix(app): Stop long labware names overflowing calibration screens (#3715

) * fix(app): Stop long labware names overflowing calibration screens
Opentrons · Jul 12, 2019 · 22fd8ad · 22fd8ad
1 parent 31e21e0
commit 22fd8ad
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 41 deletions.
diff --git a/app/src/components/CalibrateLabware/InfoBox.js b/app/src/components/CalibrateLabware/InfoBox.js
@@ -11,16 +11,12 @@ import {
 } from '../../robot'
 
 import { getLabwareDisplayName } from '@opentrons/shared-data'
-import { PrimaryButton } from '@opentrons/components'
-import CalibrationInfoBox from '../CalibrationInfoBox'
-import CalibrationInfoContent from '../CalibrationInfoContent'
+import { Icon, PrimaryButton } from '@opentrons/components'
+import styles from './styles.css'
 
 import type { Mount, Labware, LabwareType } from '../../robot'
 import type { State, Dispatch } from '../../types'
 
-// TODO(mc, 2018-02-05): match screens instead of using this old component
-// import ConfirmCalibrationPrompt from '../deck/ConfirmCalibrationPrompt'
-
 type OP = {| labware: ?Labware |}
 
 type SP = {|
@@ -78,18 +74,26 @@ function InfoBox(props: Props) {
     }
   }
 
+  const iconName = confirmed ? 'check-circle' : 'checkbox-blank-circle-outline'
+
   return (
-    <CalibrationInfoBox confirmed={confirmed} title={title}>
-      <CalibrationInfoContent
-        leftChildren={<p>{description}</p>}
-        rightChildren={
-          button &&
-          showButton && (
-            <PrimaryButton onClick={button.onClick}>{buttonText}</PrimaryButton>
-          )
-        }
-      />
-    </CalibrationInfoBox>
+    <div className={styles.info_box}>
+      <div className={styles.info_box_left}>
+        <h2 className={styles.info_box_title}>
+          <Icon name={iconName} className={styles.info_box_icon} />
+          {title}
+        </h2>
+        <div className={styles.info_box_description}>{description}</div>
+      </div>
+      {button && showButton && (
+        <PrimaryButton
+          className={styles.info_box_button}
+          onClick={button.onClick}
+        >
+          {buttonText}
+        </PrimaryButton>
+      )}
+    </div>
   )
 }
 

diff --git a/app/src/components/CalibrateLabware/styles.css b/app/src/components/CalibrateLabware/styles.css
@@ -7,6 +7,45 @@
   right: 0;
 }
 
+.info_box {
+  display: flex;
+  align-items: center;
+  margin: 1rem;
+  padding: 1.5rem;
+  border: var(--bd-light);
+}
+
+.info_box_left {
+  margin-right: 1rem;
+}
+
+.info_box_title {
+  @apply --font-header-dark;
+
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.info_box_description {
+  @apply --font-body-2-dark;
+}
+
+.info_box_icon {
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 1rem;
+}
+
+.info_box_button {
+  flex: none;
+  width: auto;
+  margin-left: auto;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .modal_contents {
   background-color: white;
 }

diff --git a/app/src/components/CalibratePanel/LabwareList.js b/app/src/components/CalibratePanel/LabwareList.js
@@ -41,7 +41,7 @@ function LabwareList(props: Props) {
   const { labware, disabled, setLabware } = props
 
   return (
-    <TitledList title="labware" disabled={disabled}>
+    <TitledList title="labware">
       {labware.map(lw => (
         <LabwareListItem
           {...lw}

diff --git a/app/src/components/CalibratePanel/LabwareListItem.js b/app/src/components/CalibratePanel/LabwareListItem.js
@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react'
+import cx from 'classnames'
 
 import { getLabwareDisplayName } from '@opentrons/shared-data'
 import { ListItem, HoverTooltip } from '@opentrons/components'
@@ -32,31 +33,31 @@ export default function LabwareListItem(props: LabwareListItemProps) {
 
   return (
     <ListItem
-      isDisabled={isDisabled}
-      url={url}
-      onClick={onClick}
+      url={!isDisabled ? url : undefined}
+      onClick={!isDisabled ? onClick : undefined}
       iconName={iconName}
+      className={cx({ [styles.disabled]: isDisabled })}
       activeClassName={styles.active}
     >
-      <div className={styles.item_info}>
-        <span className={styles.item_info_location}>Slot {slot}</span>
-        {isTiprack && (
-          <span className={styles.tiprack_item_mount}>
-            {calibratorMount && calibratorMount.charAt(0).toUpperCase()}
-          </span>
+      <HoverTooltip
+        placement="bottom-end"
+        tooltipComponent={
+          <LabwareNameTooltip name={name} displayName={displayName} />
+        }
+      >
+        {handlers => (
+          <div {...handlers} className={styles.item_info}>
+            <span className={styles.item_info_location}>Slot {slot}</span>
+            {isTiprack && (
+              <span className={styles.tiprack_item_mount}>
+                {calibratorMount && calibratorMount.charAt(0).toUpperCase()}
+              </span>
+            )}
+
+            <span className={styles.labware_item_name}>{displayName}</span>
+          </div>
         )}
-        <HoverTooltip
-          tooltipComponent={
-            <LabwareNameTooltip name={name} displayName={displayName} />
-          }
-        >
-          {handlers => (
-            <span {...handlers} className={styles.labware_item_name}>
-              {displayName}
-            </span>
-          )}
-        </HoverTooltip>
-      </div>
+      </HoverTooltip>
     </ListItem>
   )
 }

diff --git a/app/src/components/CalibratePanel/styles.css b/app/src/components/CalibratePanel/styles.css
@@ -35,6 +35,15 @@
   width: 100%;
 }
 
+/*
+ * TODO(mc, 2019-07-11): Copy-pasted from components/src/lists/lists.css
+ * as a workaround to fix HoverTooltip not working on ListItems due to
+ * pointer-events: none
+ */
+.disabled * {
+  color: var(--c-font-disabled);
+}
+
 .item_info_tooltip {
   @apply --font-body-1-light;
 

diff --git a/components/src/lists/lists.css b/components/src/lists/lists.css
@@ -17,6 +17,10 @@
 }
 
 .disabled {
+  /*
+   * TODO(mc, 2019-07-11): pointer-events: none should probably be delegated
+   * to the component user (causes hovertooltip problems)
+   */
   pointer-events: none;
   background-color: transparent;
 

diff --git a/components/src/tooltips/Tooltip.js b/components/src/tooltips/Tooltip.js
@@ -65,8 +65,14 @@ export default function Tooltip<ChildProps: {}>(
           positionFixed={props.positionFixed}
         >
           {({ ref, style, placement, arrowProps }) => {
+            // remove optional -start and -end modifiers for arrow style
+            // https://popper.js.org/popper-documentation.html#Popper.placements
+            const arrowPlacement = placement
+              ? placement.replace(/-(?:start|end)/, '')
+              : ''
+
             let { style: arrowStyle } = arrowProps
-            if (placement === 'left' || placement === 'right') {
+            if (arrowPlacement === 'left' || arrowPlacement === 'right') {
               arrowStyle = { top: '0.6em' }
             }
             const tooltipContents = (
@@ -78,7 +84,7 @@ export default function Tooltip<ChildProps: {}>(
               >
                 {props.tooltipComponent}
                 <div
-                  className={cx(styles.arrow, styles[placement])}
+                  className={cx(styles.arrow, styles[arrowPlacement])}
                   ref={arrowProps.ref}
                   style={arrowStyle}
                 />