feat(protocol-designer): update transfer form design (#3221)

* update Transfer form design * expand use of i18n in PD forms * add colon and capitalization by default for form component labels via CSS
Opentrons · Mar 20, 2019 · 775ec4b · 775ec4b
1 parent 55e332e
commit 775ec4b
Show file tree

Hide file tree

Showing 30 changed files with 384 additions and 216 deletions.
diff --git a/app/src/components/ConfigurePipette/ConfigForm.js b/app/src/components/ConfigurePipette/ConfigForm.js
@@ -170,7 +170,7 @@ export default class ConfigForm extends React.Component<Props> {
               </FormColumn>
               <FormColumn>
                 <ConfigFormGroup
-                  groupLabel="Tip Pickup / Drop "
+                  groupLabel="Tip Pickup / Drop"
                   formFields={tipFields}
                 />
                 {this.props.showHiddenFields && (

diff --git a/components/src/forms/CheckboxField.js b/components/src/forms/CheckboxField.js
@@ -13,6 +13,8 @@ type Props = {
   value?: boolean,
   /** classes to apply */
   className?: string,
+  /** classes to apply to inner label text div */
+  labelTextClassName?: ?string,
   /** name of field in form */
   name?: string,
   /** label text for checkbox */
@@ -27,21 +29,21 @@ type Props = {
 
 export default function CheckboxField (props: Props) {
   const error = props.error != null
-  const labelClassName = cx(
+  const outerClassName = cx(
     styles.form_field,
     props.className,
     {[styles.checkbox_disabled]: props.disabled})
 
-  const innerClassName = cx(
+  const innerDivClassName = cx(
     styles.checkbox_icon,
     {
       [styles.error]: error,
       [styles.checkbox_disabled]: props.disabled,
     })
 
   return (
-    <label className={labelClassName}>
-      <div className={innerClassName}>
+    <label className={outerClassName}>
+      <div className={innerDivClassName}>
         <Icon name={props.value ? 'checkbox-marked' : 'checkbox-blank-outline'} width='100%' />
       </div>
       <input
@@ -52,7 +54,7 @@ export default function CheckboxField (props: Props) {
         disabled={props.disabled}
         onChange={props.onChange}
       />
-      <div {...props.hoverTooltipHandlers} className={styles.label_text}>
+      <div {...props.hoverTooltipHandlers} className={cx(props.labelTextClassName, styles.label_text)}>
         {props.label}
       </div>
     </label>

diff --git a/components/src/forms/FormGroup.js b/components/src/forms/FormGroup.js
@@ -32,14 +32,14 @@ export default function FormGroup (props: Props) {
 
   return (
     <div className={className}>
-      <div {...props.hoverTooltipHandlers} className={styles.form_group_label}>
+      {props.label && <div {...props.hoverTooltipHandlers} className={styles.form_group_label}>
         {error &&
           <div className={styles.error_icon}>
             <Icon name='alert' />
           </div>
         }
         {props.label}
-      </div>
+      </div>}
       {props.children}
     </div>
   )

diff --git a/components/src/forms/InputField.js b/components/src/forms/InputField.js
@@ -11,10 +11,12 @@ type Props = {
   disabled?: boolean,
   /** change handler */
   onChange?: (event: SyntheticInputEvent<*>) => mixed,
-  /** classes to apply */
+  /** classes to apply to outer element */
   className?: string,
   /** inline label text. DEPRECATED */
   label?: string,
+  /** classes to apply to inner label text div */
+  labelTextClassName?: ?string,
   /** name of field in form */
   name?: string,
   /** optional ID of <input> element */
@@ -64,7 +66,7 @@ export default function InputField (props: Props) {
 
   return (
     <label className={labelClass}>
-      <div className={styles.label_text}>
+      <div className={cx(props.labelTextClassName, styles.label_text)}>
         {props.label &&
           error && (
           <div className={styles.error_icon}>

diff --git a/components/src/forms/RadioGroup.js b/components/src/forms/RadioGroup.js
@@ -18,8 +18,10 @@ type Props = {
   }>,
   /** Show radio buttons inline instead of stacked */
   inline?: boolean,
-  /** classes to apply */
+  /** classes to apply to outer div */
   className?: string,
+  /** classes to apply to inner label text div */
+  labelTextClassName?: ?string,
   /** if is included, RadioGroup will use error style. The content of the string is ignored. */
   error?: ?string,
 }
@@ -56,7 +58,8 @@ export default function RadioGroup (props: Props) {
             checked={radio.value === props.value}
             onChange={props.onChange}
           />
-          <div className={styles.label_text}>{radio.name}</div>
+          <div className={cx(props.labelTextClassName, styles.label_text)}>
+            {radio.name}</div>
           {radio.children}
         </label>
       )}

diff --git a/components/src/forms/forms.css b/components/src/forms/forms.css
@@ -47,6 +47,11 @@
 
   font-weight: var(--fw-semibold);
   margin-bottom: 0.15rem;
+  text-transform: capitalize;
+
+  &::after {
+    content: ":";
+  }
 }
 
 .checkbox_icon {

diff --git a/protocol-designer/src/components/FilePage.js b/protocol-designer/src/components/FilePage.js
@@ -31,6 +31,7 @@ type State = { isEditPipetteModalOpen: boolean }
 const DATE_ONLY_FORMAT = 'MMM DD, YYYY'
 const DATETIME_FORMAT = 'MMM DD, YYYY | h:mm A'
 
+// TODO: Ian 2019-03-15 use i18n for labels
 class FilePage extends React.Component<Props, State> {
   state = {isEditPipetteModalOpen: false}
 
@@ -56,17 +57,17 @@ class FilePage extends React.Component<Props, State> {
             render={({handleBlur, handleChange, handleSubmit, dirty, errors, setFieldValue, touched, values}) => (
               <form onSubmit={handleSubmit} className={styles.card_content}>
                 <div className={cx(formStyles.row_wrapper, formStyles.stacked_row)}>
-                  <FormGroup label='Date Created:' className={formStyles.column_1_2}>
+                  <FormGroup label='Date Created' className={formStyles.column_1_2}>
                     {values.created && moment(values.created).format(DATE_ONLY_FORMAT)}
                   </FormGroup>
 
-                  <FormGroup label='Last Exported:' className={formStyles.column_1_2}>
+                  <FormGroup label='Last Exported' className={formStyles.column_1_2}>
                     {values['last-modified'] && moment(values['last-modified']).format(DATETIME_FORMAT)}
                   </FormGroup>
                 </div>
 
                 <div className={cx(formStyles.row_wrapper, formStyles.stacked_row)}>
-                  <FormGroup label='Protocol Name:' className={formStyles.column_1_2}>
+                  <FormGroup label='Protocol Name' className={formStyles.column_1_2}>
                     <InputField
                       placeholder='Untitled'
                       name='protocol-name'
@@ -75,15 +76,15 @@ class FilePage extends React.Component<Props, State> {
                     />
                   </FormGroup>
 
-                  <FormGroup label='Organization/Author:' className={formStyles.column_1_2}>
+                  <FormGroup label='Organization/Author' className={formStyles.column_1_2}>
                     <InputField
                       name='author'
                       onChange={handleChange}
                       value={values.author} />
                   </FormGroup>
                 </div>
 
-                <FormGroup label='Description:' className={formStyles.stacked_row}>
+                <FormGroup label='Description' className={formStyles.stacked_row}>
                   <InputField
                     name='description'
                     value={values.description}

diff --git a/protocol-designer/src/components/IngredientsList/index.js b/protocol-designer/src/components/IngredientsList/index.js
@@ -4,6 +4,7 @@ import React from 'react'
 
 import {IconButton, SidePanel, swatchColors} from '@opentrons/components'
 import {sortWells} from '@opentrons/shared-data'
+import i18n from '../../localization'
 import {PDTitledList, PDListItem} from '../lists'
 import StepDescription from '../StepDescription'
 import LabwareDetailsCard from './LabwareDetailsCard'
@@ -71,7 +72,7 @@ class IngredGroupCard extends React.Component<CardProps, CardState> {
       >
         <PDListItem className={styles.ingredient_row_header}>
           <span>Well</span>
-          <span>μL</span>
+          <span>{i18n.t('application.units.microliter')}</span>
           <span>Name</span>
           <span />
         </PDListItem>

diff --git a/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.js b/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.js
@@ -14,6 +14,7 @@ import {
 import i18n from '../../localization'
 import styles from './LiquidPlacementForm.css'
 import formStyles from '../forms/forms.css'
+import stepEditFormStyles from '../StepEditForm/StepEditForm.css'
 import type {Options} from '@opentrons/components'
 
 export type ValidFormValues = {
@@ -100,6 +101,7 @@ export default class LiquidPlacementForm extends React.Component <Props> {
                   className={styles.liquid_field}>
                   <DropdownField
                     name='selectedLiquidId'
+                    className={stepEditFormStyles.large_field}
                     options={liquidSelectionOptions}
                     error={touched.selectedLiquidId && errors.selectedLiquidId}
                     value={values.selectedLiquidId}
@@ -113,7 +115,7 @@ export default class LiquidPlacementForm extends React.Component <Props> {
                 >
                   <InputField
                     name='volume'
-                    units='μL'
+                    units={i18n.t('application.units.microliter')}
                     error={touched.volume && errors.volume}
                     value={values.volume}
                     onChange={this.handleChangeVolume(setFieldValue)}

diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.js b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.js
@@ -60,7 +60,7 @@ export default function LiquidEditForm (props: Props) {
               <div className={formStyles.header}>{i18n.t('form.liquid_edit.details')}</div>
               <div className={formStyles.row_wrapper}>
                 <FormGroup
-                  label={`${i18n.t('form.liquid_edit.name')}:`}
+                  label={i18n.t('form.liquid_edit.name')}
                   className={formStyles.column_1_2}>
                   <InputField
                     name='name'
@@ -71,7 +71,7 @@ export default function LiquidEditForm (props: Props) {
                   />
                 </FormGroup>
                 <FormGroup
-                  label={`${i18n.t('form.liquid_edit.description')}:`}
+                  label={i18n.t('form.liquid_edit.description')}
                   className={formStyles.column_1_2}>
                   <InputField
                     name='description'

diff --git a/protocol-designer/src/components/StepEditForm/ButtonRow.js b/protocol-designer/src/components/StepEditForm/ButtonRow.js
@@ -23,12 +23,12 @@ type Props = OP & SP & DP
 const ButtonRow = (props: Props) => {
   const {canSave, onDelete, onSave, onCancel, onClickMoreOptions} = props
   return (
-    <div className={cx(styles.form_row, styles.form_footer)}>
-      <div className={styles.start_group}>
+    <div className={cx(styles.button_row, styles.form_wrapper, styles.form_footer)}>
+      <div>
         <OutlineButton className={styles.form_button} onClick={onDelete}>DELETE</OutlineButton>
         <OutlineButton className={styles.form_button} onClick={onClickMoreOptions}>NOTES</OutlineButton>
       </div>
-      <div className={styles.end_group}>
+      <div>
         <PrimaryButton className={styles.form_button} onClick={onCancel}>CLOSE</PrimaryButton>
         <PrimaryButton className={styles.form_button} disabled={!canSave} onClick={onSave}>SAVE</PrimaryButton>
       </div>