key and value for select knob match key/value of options

fixes #799
add selectV2 for backwards compatibility

addons/knobs/README.md

@@ -217,6 +217,28 @@ const value = select(label, options, defaultValue);
 
 > You can also provide options as an array like this: `['red', 'blue', 'yellow']`
 
+### selectV2
+
+Future replacement for `select`. The value from the select now uses the values from the `options` object.
+
+```js
+import { selectV2 } from '@storybook/addon-knobs';
+
+const label = 'Colors';
+const options = {
+  Red: 'red',
+  Blue: 'blue',
+  Yellow: 'yellow',
+  Rainbow: ['red', 'orange', 'etc'],
+  Black: null,
+};
+const defaultValue = 'Red';
+
+const value = select(label, options, defaultValue);
+```
+
+> You can also provide options as an array like this: `['red', 'blue', 'yellow']`
+
 ### date
 
 Allow you to get date (and time) from the user.

addons/knobs/src/components/types/Select.js

@@ -18,20 +18,32 @@ const styles = {
 };
 
 class SelectType extends React.Component {
-  _makeOpt(key, val) {
+  _makeOpt(key, value, displayValue) {
     const opts = {
       key,
       value: key,
     };
 
-    return <option {...opts}>{val}</option>;
+    let display = value;
+
+    if (displayValue) {
+      opts.value = value;
+      display = key;
+    }
+
+    return (
+      <option {...opts}>
+        {display}
+      </option>
+    );
   }
-  _options(values) {
+
+  _options({ options, displayValue }) {
     let data = [];
-    if (Array.isArray(values)) {
-      data = values.map(val => this._makeOpt(val, val));
+    if (Array.isArray(options)) {
+      data = options.map(val => this._makeOpt(val, val, displayValue));
     } else {
-      data = Object.keys(values).map(key => this._makeOpt(key, values[key]));
+      data = Object.keys(options).map(key => this._makeOpt(key, options[key], displayValue));
     }
 
     return data;
@@ -49,7 +61,7 @@ class SelectType extends React.Component {
         value={knob.value}
         onChange={e => onChange(e.target.value)}
       >
-        {this._options(knob.options)}
+        {this._options(knob)}
       </select>
     );
   }
@@ -64,6 +76,8 @@ SelectType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string,
+    options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+    displayValue: PropTypes.bool,
   }),
   onChange: PropTypes.func,
 };

addons/knobs/src/index.js

@@ -49,6 +49,10 @@ export function select(name, options, value) {
   return manager.knob(name, { type: 'select', options, value });
 }
 
+export function selectV2(name, options, value) {
+  return manager.knob(name, { type: 'select', displayValue: true, options, value });
+}
+
 export function array(name, value, separator = ',') {
   return manager.knob(name, { type: 'array', value, separator });
 }