diff --git a/addons/knobs/README.md b/addons/knobs/README.md
index 2da303546409..6c4763414ac0 100644
--- a/addons/knobs/README.md
+++ b/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.
diff --git a/addons/knobs/src/components/types/Select.js b/addons/knobs/src/components/types/Select.js
index a0a5366af625..0c82471dfe9d 100644
--- a/addons/knobs/src/components/types/Select.js
+++ b/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 ;
+ let display = value;
+
+ if (displayValue) {
+ opts.value = value;
+ display = key;
+ }
+
+ return (
+
+ );
}
- _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)}
);
}
@@ -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,
};
diff --git a/addons/knobs/src/index.js b/addons/knobs/src/index.js
index 2f4c16dcddca..04475c239436 100644
--- a/addons/knobs/src/index.js
+++ b/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 });
}