fix(app): Fix robot list scroll clipping (#2288)

closes #2046
Opentrons · Sep 18, 2018 · 28556ef · 28556ef
1 parent 9ec91a4
commit 28556ef
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 59 deletions.
diff --git a/app/src/components/ConnectPanel/RobotLink.js b/app/src/components/ConnectPanel/RobotLink.js
@@ -0,0 +1,29 @@
+// @flow
+// Robot and Instrument links specific to RobotListItem
+import * as React from 'react'
+import {NavLink} from 'react-router-dom'
+
+import cx from 'classnames'
+import styles from './connect-panel.css'
+
+type LinkProps = {
+  children: React.Node,
+  url: string,
+  className?: string,
+  activeClassName?: string,
+}
+
+export default function RobotLink (props: LinkProps) {
+  const {url} = props
+  const className = cx(styles.robot_link, props.className)
+  return (
+    <NavLink
+      to={url}
+      className={className}
+      activeClassName={styles.active}
+      exact
+    >
+      {props.children}
+    </NavLink>
+  )
+}
diff --git a/app/src/components/ConnectPanel/RobotList.js b/app/src/components/ConnectPanel/RobotList.js
@@ -3,13 +3,13 @@
 import * as React from 'react'
 
 import {
-  ListItem,
   NotificationIcon,
   Icon,
 } from '@opentrons/components'
 
 import type {Robot} from '../../robot'
 import {ToggleButton} from '../controls'
+import RobotLink from './RobotLink'
 import styles from './connect-panel.css'
 
 type ListProps = {
@@ -37,43 +37,41 @@ export function RobotListItem (props: ItemProps) {
     : connect
 
   return (
-    <ol className={styles.robot_group}>
-    <ListItem
-      url={`/robots/${name}`}
-      className={styles.robot_item}
-      activeClassName={styles.active}
-      exact
-    >
-      <NotificationIcon
-        name={wired ? 'usb' : 'wifi'}
-        className={styles.robot_item_icon}
-        childName={availableUpdate ? 'circle' : null}
-        childClassName={styles.notification}
-      />
+    <li className={styles.robot_group}>
+      <RobotLink
+        url={`/robots/${name}`}
+        className={styles.robot_item}
+        exact
+      >
+        <NotificationIcon
+          name={wired ? 'usb' : 'wifi'}
+          className={styles.robot_item_icon}
+          childName={availableUpdate ? 'circle' : null}
+          childClassName={styles.notification}
+        />
 
-      <p className={styles.robot_name}>
-        {name}
-      </p>
+        <p className={styles.link_text}>
+          {name}
+        </p>
 
-      <ToggleButton
-        toggledOn={isConnected}
-        onClick={onClick}
-        className={styles.robot_item_icon}
-      />
-    </ListItem>
-    <ListItem
-      url={`/robots/${name}/instruments`}
-      className={styles.instrument_item}
-      activeClassName={styles.active}
-    >
-      <p className={styles.robot_name}>
-        Pipettes & Modules
-      </p>
-      <Icon
-        name='chevron-right'
-        className={styles.robot_item_icon}
-      />
-    </ListItem>
-    </ol>
+        <ToggleButton
+          toggledOn={isConnected}
+          onClick={onClick}
+          className={styles.robot_item_icon}
+        />
+      </RobotLink>
+      <RobotLink
+        url={`/robots/${name}/instruments`}
+        className={styles.instrument_item}
+      >
+        <p className={styles.link_text}>
+          Pipettes & Modules
+        </p>
+        <Icon
+          name='chevron-right'
+          className={styles.robot_item_icon}
+        />
+      </RobotLink>
+    </li>
   )
 }
diff --git a/app/src/components/ConnectPanel/connect-panel.css b/app/src/components/ConnectPanel/connect-panel.css
@@ -6,24 +6,27 @@
 }
 
 .robot_group {
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+}
+
+.robot_link {
+  @apply --font-body-1-dark;
 
-  & > li {
-    max-height: 3rem;
-  }
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 0.75rem;
+  border-bottom: 1px solid var(--c-light-gray);
+  text-transform: uppercase;
 }
 
 .robot_item {
-  max-height: 3rem;
-  text-transform: uppercase;
-  border-bottom: 1px solid var(--c-light-gray);
+  height: 3rem;
 }
 
 .instrument_item {
-  max-height: 2.5rem;
-  text-transform: uppercase;
-  border-bottom: 1px solid var(--c-light-gray);
+  height: 2.5rem;
 }
 
 .robot_item_icon {
@@ -36,10 +39,10 @@
   color: var(--c-orange);
 }
 
-.robot_name {
+.link_text {
   flex: 1;
   margin: 0 0.5rem;
-  font-weight: bold;
+  font-weight: var(--fw-semibold);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/app/src/components/ConnectPanel/index.js b/app/src/components/ConnectPanel/index.js
@@ -30,15 +30,12 @@ export default connect(mapStateToProps, mapDispatchToProps)(ConnectPanel)
 function ConnectPanel (props: Props) {
   return (
     <SidePanel title='Robots'>
-      <div>
-        <ScanStatus {...props} />
-        <RobotList>
-          {props.robots.map((robot) => (
-            // $FlowFixMe: flow-typed withRouter def throwing bogus errors
-            <RobotItem key={robot.name} {...robot} />
-          ))}
-        </RobotList>
-      </div>
+      <ScanStatus {...props} />
+      <RobotList>
+        {props.robots.map((robot) => (
+          <RobotItem key={robot.name} {...robot} />
+        ))}
+      </RobotList>
     </SidePanel>
   )
 }

diff --git a/components/src/nav/SidePanel.css b/components/src/nav/SidePanel.css
@@ -33,7 +33,7 @@
 
 .panel_contents {
   width: var(--sidebar-width);
-  height: calc(100vh - 2.625rem);
+  height: calc(100vh - 3.5rem);
   overflow-x: hidden;
   overflow-y: auto;
 }