mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
fix(number-input): value 0
should not be converted to null
(#1046)
This commit is contained in:
parent
6154e8ba05
commit
402de56029
2 changed files with 16 additions and 12 deletions
|
@ -9,11 +9,15 @@ components: ["NumberInput", "NumberInputSkeleton"]
|
||||||
|
|
||||||
### Default
|
### 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
|
### 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
|
### Minimum and maximum values
|
||||||
|
|
||||||
|
@ -29,39 +33,39 @@ Set `value` to `null` to denote "no value."
|
||||||
|
|
||||||
### Hidden label
|
### Hidden label
|
||||||
|
|
||||||
<NumberInput hideLabel label="Clusters" />
|
<NumberInput hideLabel label="Clusters" value={0} />
|
||||||
|
|
||||||
### Hidden steppers
|
### Hidden steppers
|
||||||
|
|
||||||
<NumberInput hideSteppers label="Clusters" />
|
<NumberInput hideSteppers label="Clusters" value={0} />
|
||||||
|
|
||||||
### Light variant
|
### Light variant
|
||||||
|
|
||||||
<NumberInput light label="Clusters" />
|
<NumberInput light label="Clusters" value={0} />
|
||||||
|
|
||||||
### Read-only variant
|
### Read-only variant
|
||||||
|
|
||||||
<NumberInput readonly label="Clusters" />
|
<NumberInput readonly label="Clusters" value={0} />
|
||||||
|
|
||||||
### Extra-large size
|
### Extra-large size
|
||||||
|
|
||||||
<NumberInput size="xl" label="Clusters" />
|
<NumberInput size="xl" label="Clusters" value={0} />
|
||||||
|
|
||||||
### Small size
|
### Small size
|
||||||
|
|
||||||
<NumberInput size="sm" label="Clusters" />
|
<NumberInput size="sm" label="Clusters" value={0} />
|
||||||
|
|
||||||
### Invalid state
|
### Invalid state
|
||||||
|
|
||||||
<NumberInput invalid invalidText="Invalid value" label="Clusters" />
|
<NumberInput invalid invalidText="Invalid value" label="Clusters" value={0} />
|
||||||
|
|
||||||
### Warning state
|
### 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
|
### Disabled state
|
||||||
|
|
||||||
<NumberInput disabled label="Clusters" />
|
<NumberInput disabled label="Clusters" value={0} />
|
||||||
|
|
||||||
### Skeleton
|
### Skeleton
|
||||||
|
|
||||||
|
|
|
@ -135,7 +135,7 @@
|
||||||
$: dispatch("change", value);
|
$: dispatch("change", value);
|
||||||
$: incrementLabel = translateWithId("increment");
|
$: incrementLabel = translateWithId("increment");
|
||||||
$: decrementLabel = translateWithId("decrement");
|
$: decrementLabel = translateWithId("decrement");
|
||||||
$: value = inputValue ? Number(inputValue) : null;
|
$: value = inputValue != null ? Number(inputValue) : null;
|
||||||
$: error =
|
$: error =
|
||||||
invalid || (!allowEmpty && value == null) || value > max || value < min;
|
invalid || (!allowEmpty && value == null) || value > max || value < min;
|
||||||
$: errorId = `error-${id}`;
|
$: errorId = `error-${id}`;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue