App: refactor app to use TitledButton

Opentrons · Jun 18, 2020 · 625f433 · 625f433
1 parent 6fc6f68
commit 625f433
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 26 deletions.
diff --git a/app/src/components/RobotSettings/ControlsCard.js b/app/src/components/RobotSettings/ControlsCard.js
@@ -11,6 +11,7 @@ import {
   useHoverTooltip,
   TOOLTIP_BOTTOM,
   TOOLTIP_FIXED,
+  BORDER_SOLID_LIGHT,
 } from '@opentrons/components'
 
 import { startDeckCalibration } from '../../http-api-client'
@@ -29,6 +30,7 @@ import { CONNECTABLE } from '../../discovery'
 
 import type { State, Dispatch } from '../../types'
 import type { ViewableRobot } from '../../discovery/types'
+import { TitledButton } from '../TitledButton'
 import { CheckCalibrationControl } from './CheckCalibrationControl'
 import { DeckCalibrationWarning } from './DeckCalibrationWarning'
 
@@ -42,8 +44,6 @@ const TITLE = 'Robot Controls'
 const CALIBRATE_DECK_DESCRIPTION =
   "Calibrate the position of the robot's deck. Recommended for all new robots and after moving robots."
 
-const CHECK_ROBOT_CAL_DESCRIPTION = "Check the robot's calibration state"
-
 const DECK_CAL_TOOL_TIP_MESSAGE =
   'Perform a deck calibration to enable this feature.'
 
@@ -76,21 +76,22 @@ export function ControlsCard(props: Props): React.Node {
 
   const buttonDisabled = notConnectable || !canControl
   const calCheckDisabled =
-    buttonDisabled || (health && health.calibration !== 'OK')
+    buttonDisabled || !!(health && health.calibration !== 'OK')
 
   return (
     <Card title={TITLE} disabled={notConnectable}>
-      <LabeledButton
-        label="Calibrate deck"
+      <TitledButton
+        borderBottom={BORDER_SOLID_LIGHT}
+        title="Calibrate deck"
+        description={CALIBRATE_DECK_DESCRIPTION}
         buttonProps={{
           onClick: startCalibration,
           disabled: buttonDisabled,
           children: 'Calibrate',
         }}
       >
-        <p>{CALIBRATE_DECK_DESCRIPTION}</p>
         <DeckCalibrationWarning robot={robot} />
-      </LabeledButton>
+      </TitledButton>
       <LabeledButton
         label="Home all axes"
         buttonProps={{
@@ -126,16 +127,6 @@ export function ControlsCard(props: Props): React.Node {
               robotName={robotName}
               disabled={calCheckDisabled}
             />
-            {/* <LabeledButton
-              label="Check deck calibration"
-              buttonProps={{
-                onClick: () => setIsCheckingRobotCal(true),
-                disabled: calCheckDisabled,
-                children: 'Check',
-              }}
-            >
-              <p>{CHECK_ROBOT_CAL_DESCRIPTION}</p>
-            </LabeledButton> */}
           </span>
 
           {calCheckDisabled && (

diff --git a/app/src/components/RobotSettings/__tests__/ControlsCard.test.js b/app/src/components/RobotSettings/__tests__/ControlsCard.test.js
@@ -57,10 +57,7 @@ describe('ControlsCard', () => {
   let render
 
   const getDeckCalButton = wrapper =>
-    wrapper
-      .find({ label: 'Calibrate deck' })
-      .find(LabeledButton)
-      .find('button')
+    wrapper.find('TitledButton[title="Calibrate deck"]').find('button')
 
   const getCheckCalibrationControl = wrapper =>
     wrapper.find(CheckCalibrationControl)
@@ -153,7 +150,6 @@ describe('ControlsCard', () => {
 
     const wrapper = render()
 
-    console.log(wrapper.exists('LabeledButton[label="Check deck calibration"]'))
     expect(getDeckCalButton(wrapper).prop('disabled')).toBe(false)
     expect(getCheckCalibrationControl(wrapper).prop('disabled')).toBe(false)
     expect(getHomeButton(wrapper).prop('disabled')).toBe(false)
@@ -213,7 +209,7 @@ describe('ControlsCard', () => {
       health: { calibration: 'IDENTITY' },
     })
 
-    expect(getDeckCalButton(wrapper).prop('disabled')).toBe(true)
+    expect(getCheckCalibrationControl(wrapper).prop('disabled')).toBe(true)
   })
 
   it('DeckCalibrationWarning component renders if deck calibration is bad', () => {

diff --git a/app/src/components/RobotSettings/__tests__/DeckCalibrationWarning.test.js b/app/src/components/RobotSettings/__tests__/DeckCalibrationWarning.test.js
@@ -83,7 +83,7 @@ describe('Calibration Warning Component', () => {
 
     expect(icon.prop('className')).toEqual('cal_check_error_icon')
     expect(toSplit[0]).toEqual(
-      expect.stringContaining('Bad calibration detected')
+      expect.stringContaining('Bad deck calibration detected')
     )
   })
 })
diff --git a/app/src/components/RobotSettings/styles.css b/app/src/components/RobotSettings/styles.css
@@ -110,4 +110,4 @@
   height: 1.5rem;
   padding-right: 0.25rem;
   padding-left: 0.25rem;
-}
+}
diff --git a/app/src/components/TitledButton/index.js b/app/src/components/TitledButton/index.js
@@ -34,7 +34,7 @@ export function TitledButton({
   return (
     <Box fontSize={FONT_SIZE_BODY_1} padding={SPACING_3} {...styleProps}>
       <Flex alignItems={ALIGN_START}>
-        <Box marginRight={SPACING_AUTO}>
+        <Box marginRight={SPACING_AUTO} maxWidth="75%">
           <Text
             as="h4"
             fontWeight={FONT_WEIGHT_SEMIBOLD}