From 402de56029f6c400df335e8182be65c79cc5dd9f Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 27 Jan 2022 08:00:32 -0800
Subject: [PATCH] fix(number-input): value `0` should not be converted to
 `null` (#1046)

---
 docs/src/pages/components/NumberInput.svx | 26 +++++++++++++----------
 src/NumberInput/NumberInput.svelte        |  2 +-
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx
index ea017fe3..3cbba1df 100644
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@@ -9,11 +9,15 @@ components: ["NumberInput", "NumberInputSkeleton"]
 
 ### Default
 
-<NumberInput label="Clusters" />
+This component requires a numerical value for `value`.
+
+See [#no-value](#no-value) to allow for an empty value.
+
+<NumberInput label="Clusters" value={0} />
 
 ### With helper text
 
-<NumberInput label="Clusters" helperText="Clusters provisioned in your region" />
+<NumberInput label="Clusters" value={0} helperText="Clusters provisioned in your region" />
 
 ### Minimum and maximum values
 
@@ -29,39 +33,39 @@ Set `value` to `null` to denote "no value."
 
 ### Hidden label
 
-<NumberInput hideLabel label="Clusters" />
+<NumberInput hideLabel label="Clusters" value={0} />
 
 ### Hidden steppers
 
-<NumberInput hideSteppers label="Clusters" />
+<NumberInput hideSteppers label="Clusters" value={0} />
 
 ### Light variant
 
-<NumberInput light label="Clusters" />
+<NumberInput light label="Clusters" value={0} />
 
 ### Read-only variant
 
-<NumberInput readonly label="Clusters" />
+<NumberInput readonly label="Clusters" value={0} />
 
 ### Extra-large size
 
-<NumberInput size="xl" label="Clusters" />
+<NumberInput size="xl" label="Clusters" value={0} />
 
 ### Small size
 
-<NumberInput size="sm" label="Clusters" />
+<NumberInput size="sm" label="Clusters" value={0} />
 
 ### Invalid state
 
-<NumberInput invalid invalidText="Invalid value" label="Clusters" />
+<NumberInput invalid invalidText="Invalid value" label="Clusters" value={0} />
 
 ### Warning state
 
-<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value="25" />
+<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value={25} />
 
 ### Disabled state
 
-<NumberInput disabled label="Clusters" />
+<NumberInput disabled label="Clusters" value={0} />
 
 ### Skeleton
 
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 210fb7a6..a508f062 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -135,7 +135,7 @@
   $: dispatch("change", value);
   $: incrementLabel = translateWithId("increment");
   $: decrementLabel = translateWithId("decrement");
-  $: value = inputValue ? Number(inputValue) : null;
+  $: value = inputValue != null ? Number(inputValue) : null;
   $: error =
     invalid || (!allowEmpty && value == null) || value > max || value < min;
   $: errorId = `error-${id}`;