Introduce MultiInputButton

src/components/fields/SpecField.jsx

@@ -7,6 +7,9 @@ import NumberInput from '../inputs/NumberInput'
 import CheckboxInput from '../inputs/CheckboxInput'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import MultiButtonInput from '../inputs/MultiButtonInput'
+import capitalize from 'lodash.capitalize'
+
 
 import input from '../../config/input.js'
 
@@ -52,12 +55,19 @@ export default class SpecField extends React.Component {
           max={this.props.fieldSpec.maximum}
         />
       )
-      case 'enum': return (
-        <SelectInput
-          {...commonProps}
-          options={Object.keys(this.props.fieldSpec.values).map(v => [v, v])}
-        />
-      )
+      case 'enum':
+        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
+        if(options.length < 3) {
+          return <MultiButtonInput
+            {...commonProps}
+            options={options}
+          />
+        } else {
+          return <SelectInput
+            {...commonProps}
+            options={options}
+          />
+        }
       case 'string': return (
         <StringInput
           {...commonProps}

src/components/fields/ZoomSpecField.jsx

@@ -8,6 +8,7 @@ import DocLabel from './DocLabel'
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
 import DeleteIcon from 'react-icons/lib/md/delete'
 
+import capitalize from 'lodash.capitalize'
 import input from '../../config/input.js'
 import colors from '../../config/colors.js'
 import { margins, fontSizes } from '../../config/scales.js'
@@ -104,8 +105,5 @@ export default class ZoomSpecField extends React.Component {
 
 function labelFromFieldName(fieldName) {
   let label = fieldName.split('-').slice(1).join(' ')
-  if(label.length > 0) {
-    label = label.charAt(0).toUpperCase() + label.slice(1);
-  }
-  return label
+  return capitalize(label)
 }