From 756d7f6c54bc7c23ad919bdbb946bacbf5cc1fef Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Wed, 6 Dec 2017 01:54:02 +0300
Subject: [PATCH] Number knob: apply default min/max/step values only in range
 mode

---
 addons/knobs/src/index.js                              | 10 +++++++---
 .../src/stories/addon-knobs.stories.js                 |  2 ++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/addons/knobs/src/index.js b/addons/knobs/src/index.js
index 84df833e5c5..36d8c146e09 100644
--- a/addons/knobs/src/index.js
+++ b/addons/knobs/src/index.js
@@ -19,14 +19,18 @@ export function boolean(name, value) {
 }
 
 export function number(name, value, options = {}) {
-  const defaults = {
-    range: false,
+  const rangeDefaults = {
     min: 0,
     max: 10,
     step: 1,
   };
 
-  const mergedOptions = { ...defaults, ...options };
+  const mergedOptions = options.range
+    ? {
+        ...rangeDefaults,
+        ...options,
+      }
+    : options;
 
   const finalOptions = {
     ...mergedOptions,
diff --git a/examples/cra-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/cra-kitchen-sink/src/stories/addon-knobs.stories.js
index d97e2ee4eda..cdbe4d9cacd 100644
--- a/examples/cra-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -57,6 +57,7 @@ storiesOf('Addon Knobs.withKnobs', module)
     };
     const fruit = select('Fruit', fruits, 'apple');
     const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
+    const years = number('Years in NY', 9);
 
     const backgroundColor = color('background', '#ffff00');
     const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
@@ -79,6 +80,7 @@ storiesOf('Addon Knobs.withKnobs', module)
       <div style={style}>
         <p>{intro}</p>
         <p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
+        <p>I live in NY for {years} years.</p>
         <p>My wallet contains: ${dollars.toFixed(2)}</p>
         <p>In my backpack, I have:</p>
         <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>