From 007bdad70a12950509666d1e0dff5bac97e214af Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 29 Dec 2016 22:12:36 +0100
Subject: [PATCH] Also show MultiButton for 3 options

---
 src/components/fields/SpecField.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/fields/SpecField.jsx b/src/components/fields/SpecField.jsx
index 2e921a3..90f1fac 100644
--- a/src/components/fields/SpecField.jsx
+++ b/src/components/fields/SpecField.jsx
@@ -21,6 +21,14 @@ function labelFromFieldName(fieldName) {
   return label
 }
 
+function optionsLabelLength(options) {
+  let sum = 0;
+  options.forEach(([_, label]) => {
+    sum += label.length
+  })
+  return sum
+}
+
 /** Display any field from the Mapbox GL style spec and
  * choose the correct field component based on the @{fieldSpec}
  * to display @{value}. */
@@ -56,7 +64,8 @@ export default class SpecField extends React.Component {
       )
       case 'enum':
         const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
-        if(options.length < 3) {
+
+        if(options.length <= 3 && optionsLabelLength(options) <= 20) {
           return <MultiButtonInput
             {...commonProps}
             options={options}