fix(number-input): support floating point values (#1555)

Fixes #233, fixes #486, fixes #1554

docs/src/pages/components/NumberInput.svx

@@ -23,6 +23,10 @@ See [#no-value](#no-value) to allow for an empty value.
 
 <NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
 
+## With step value
+
+<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
+
 ## No value
 
 Set `allowEmpty` to `true` to allow for no value.

src/NumberInput/NumberInput.svelte

@@ -113,16 +113,13 @@
 
   const dispatch = createEventDispatcher();
 
-  function updateValue(direction) {
-    const nextValue = (value += direction * step);
-
-    if (nextValue < min) {
-      value = min;
-    } else if (nextValue > max) {
-      value = max;
+  function updateValue(isIncrementing) {
+    if (isIncrementing) {
+      ref.stepUp();
     } else {
-      value = nextValue;
+      ref.stepDown();
     }
+    value = ref.value;
 
     dispatch("input", value);
     dispatch("change", value);
@@ -235,7 +232,7 @@
             class:bx--number__control-btn="{true}"
             class:down-icon="{true}"
             on:click="{() => {
-              updateValue(-1);
+              updateValue(false);
             }}"
             disabled="{disabled}"
           >
@@ -250,7 +247,7 @@
             class:bx--number__control-btn="{true}"
             class:up-icon="{true}"
             on:click="{() => {
-              updateValue(1);
+              updateValue(true);
             }}"
             disabled="{disabled}"
           >

tests/NumberInput.test.svelte

@@ -16,6 +16,30 @@
   label="Clusters"
   helperText="Clusters provisioned in your region"
   invalidText="Number must be between 4 and 20."
+  on:input="{(e) => {
+    console.log({ input: e.detail }); // null | number
+  }}"
+  on:change="{(e) => {
+    console.log({ change: e.detail }); // null | number
+  }}"
+  on:keydown
+  on:keyup
+  on:paste
+/>
+
+<NumberInput
+  disabled
+  light
+  min="{1}"
+  max="{10}"
+  value="{4}"
+  step="{0.1}"
+  label="Clusters"
+  helperText="Clusters provisioned in your region"
+  invalidText="Number must be between 1 and 10."
+  on:input="{(e) => {
+    console.log({ input: e.detail }); // null | number
+  }}"
   on:change="{(e) => {
     console.log(e.detail); // null | number
   }}"