fix(protocol-designer): add vertical spacing back to form fields (#2644)

Fix the field spacing regression introduced in #2580 Closes #2597
Opentrons · Nov 8, 2018 · c7173da · c7173da
1 parent b4ba600
commit c7173da
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 13 deletions.
diff --git a/protocol-designer/src/components/FilePage.js b/protocol-designer/src/components/FilePage.js
@@ -8,6 +8,7 @@ import {
   OutlineButton,
   PrimaryButton,
 } from '@opentrons/components'
+import cx from 'classnames'
 import i18n from '../localization'
 import type {FormConnector} from '../utils'
 import {Portal} from './portals/MainPageModalPortal'
@@ -46,7 +47,7 @@ class FilePage extends React.Component<Props, State> {
       <div className={styles.file_page}>
         <Card title='Information'>
           <form onSubmit={this.handleSubmit} className={styles.card_content}>
-            <div className={formStyles.row_wrapper}>
+            <div className={cx(formStyles.row_wrapper, formStyles.stacked_row)}>
               <FormGroup label='Protocol Name:' className={formStyles.column_1_2}>
                 <InputField placeholder='Untitled' {...formConnector('protocol-name')} />
               </FormGroup>
@@ -56,7 +57,7 @@ class FilePage extends React.Component<Props, State> {
               </FormGroup>
             </div>
 
-            <FormGroup label='Description:'>
+            <FormGroup label='Description:' className={formStyles.stacked_row}>
               <InputField {...formConnector('description')}/>
             </FormGroup>
             <div className={styles.button_row}>

diff --git a/protocol-designer/src/components/StepEditForm/PauseForm.js b/protocol-designer/src/components/StepEditForm/PauseForm.js
@@ -19,9 +19,15 @@ function PauseForm (props: PauseFormProps): React.Element<'div'> {
           name="pauseForAmountOfTime"
           options={[{name: 'Pause for an amount of time', value: 'true'}]}
           {...focusHandlers} />
-        <StepInputField units="hr" name="pauseHour" {...focusHandlers} />
-        <StepInputField units="m" name="pauseMinute" {...focusHandlers} />
-        <StepInputField units="s" name="pauseSecond" {...focusHandlers} />
+        <FormGroup className={formStyles.stacked_row}>
+          <StepInputField units="hr" name="pauseHour" {...focusHandlers} />
+        </FormGroup>
+        <FormGroup className={formStyles.stacked_row}>
+          <StepInputField units="m" name="pauseMinute" {...focusHandlers} />
+        </FormGroup>
+        <FormGroup className={formStyles.stacked_row}>
+          <StepInputField units="s" name="pauseSecond" {...focusHandlers} />
+        </FormGroup>
       </div>
       <div className={formStyles.column_1_2}>
         <StepRadioGroup

diff --git a/protocol-designer/src/components/forms.css b/protocol-designer/src/components/forms.css
@@ -15,6 +15,10 @@
   padding-bottom: 1rem;
 }
 
+.stacked_row {
+  margin-bottom: 0.5rem;
+}
+
 /* NOTE: explicit column classes should only be used for forms with a layout
  * that doesn't match the layout of transfer/distribute/consolidate/mix.
  * Eg the Pause form is an example of an exceptional layout.

diff --git a/protocol-designer/src/components/modals/EditPipettesModal/index.js b/protocol-designer/src/components/modals/EditPipettesModal/index.js
@@ -26,6 +26,7 @@ import {
 
 import PipetteDiagram from '../NewFileModal/PipetteDiagram'
 import TiprackDiagram from '../NewFileModal/TiprackDiagram'
+import formStyles from '../../forms.css'
 import styles from './EditPipettesModal.css'
 import modalStyles from '../modal.css'
 import StepChangesWarningModal from './StepChangesWarningModal'
@@ -139,14 +140,18 @@ class EditPipettesModal extends React.Component<Props, State> {
 
             <div className={styles.mount_fields_row}>
               <div className={styles.mount_column}>
-                <FormGroup key="leftPipetteModel" label="Left Pipette">
+                <FormGroup key="leftPipetteModel" label="Left Pipette" className={formStyles.stacked_row}>
                   <DropdownField
                     tabIndex={2}
                     options={pipetteOptionsWithNone}
                     value={this.state.left.pipetteModel}
                     onChange={this.makeHandleMountChange('left', 'pipetteModel')} />
                 </FormGroup>
-                <FormGroup disabled={isEmpty(this.state.left.pipetteModel)} key={'leftTiprackModel'} label={`${startCase('left')} Tiprack*`}>
+                <FormGroup
+                  disabled={isEmpty(this.state.left.pipetteModel)}
+                  key={'leftTiprackModel'}
+                  label={`${startCase('left')} Tiprack*`}
+                  className={formStyles.stacked_row}>
                   <DropdownField
                     tabIndex={3}
                     disabled={isEmpty(this.state.left.pipetteModel)}
@@ -156,14 +161,18 @@ class EditPipettesModal extends React.Component<Props, State> {
                 </FormGroup>
               </div>
               <div className={styles.mount_column}>
-                <FormGroup key="rightPipetteModel" label="Right Pipette">
+                <FormGroup key="rightPipetteModel" label="Right Pipette" className={formStyles.stacked_row}>
                   <DropdownField
                     tabIndex={4}
                     options={pipetteOptionsWithNone}
                     value={this.state.right.pipetteModel}
                     onChange={this.makeHandleMountChange('right', 'pipetteModel')} />
                 </FormGroup>
-                <FormGroup disabled={isEmpty(this.state.right.pipetteModel)} key={'rightTiprackModel'} label={`${startCase('right')} Tiprack*`}>
+                <FormGroup
+                  disabled={isEmpty(this.state.right.pipetteModel)}
+                  key={'rightTiprackModel'}
+                  label={`${startCase('right')} Tiprack*`}
+                  className={formStyles.stacked_row}>
                   <DropdownField
                     tabIndex={5}
                     disabled={isEmpty(this.state.right.pipetteModel)}

diff --git a/protocol-designer/src/components/modals/NewFileModal/index.js b/protocol-designer/src/components/modals/NewFileModal/index.js
@@ -14,6 +14,7 @@ import {pipetteOptions} from '../../../pipettes/pipetteData'
 import PipetteDiagram from './PipetteDiagram'
 import TiprackDiagram from './TiprackDiagram'
 import styles from './NewFileModal.css'
+import formStyles from '../../forms.css'
 import modalStyles from '../modal.css'
 import type {NewProtocolFields, PipetteFields} from '../../../load-file'
 
@@ -125,14 +126,18 @@ export default class NewFileModal extends React.Component<Props, State> {
 
           <div className={styles.mount_fields_row}>
             <div className={styles.mount_column}>
-              <FormGroup key="leftPipetteModel" label="Left Pipette">
+              <FormGroup key="leftPipetteModel" label="Left Pipette" className={formStyles.stacked_row}>
                 <DropdownField
                   tabIndex={2}
                   options={this.state.left.pipetteModel === USER_HAS_NOT_SELECTED ? pipetteOptionsWithInvalid : pipetteOptionsWithNone}
                   value={this.state.left.pipetteModel}
                   onChange={this.makeHandleMountChange('left', 'pipetteModel')} />
               </FormGroup>
-              <FormGroup disabled={isEmpty(this.state.left.pipetteModel)} key={'leftTiprackModel'} label={`${startCase('left')} Tiprack*`}>
+              <FormGroup
+                disabled={isEmpty(this.state.left.pipetteModel)}
+                key={'leftTiprackModel'}
+                label={`${startCase('left')} Tiprack*`}
+                className={formStyles.stacked_row}>
                 <DropdownField
                   tabIndex={3}
                   disabled={isEmpty(this.state.left.pipetteModel)}
@@ -142,14 +147,18 @@ export default class NewFileModal extends React.Component<Props, State> {
               </FormGroup>
             </div>
             <div className={styles.mount_column}>
-              <FormGroup key="rightPipetteModel" label="Right Pipette">
+              <FormGroup key="rightPipetteModel" label="Right Pipette" className={formStyles.stacked_row}>
                 <DropdownField
                   tabIndex={4}
                   options={this.state.right.pipetteModel === USER_HAS_NOT_SELECTED ? pipetteOptionsWithInvalid : pipetteOptionsWithNone}
                   value={this.state.right.pipetteModel}
                   onChange={this.makeHandleMountChange('right', 'pipetteModel')} />
               </FormGroup>
-              <FormGroup disabled={isEmpty(this.state.right.pipetteModel)} key={'rightTiprackModel'} label={`${startCase('right')} Tiprack*`}>
+              <FormGroup
+                disabled={isEmpty(this.state.right.pipetteModel)}
+                key={'rightTiprackModel'}
+                label={`${startCase('right')} Tiprack*`}
+                className={formStyles.stacked_row}>
                 <DropdownField
                   tabIndex={5}
                   disabled={isEmpty(this.state.right.pipetteModel)}