mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
feat(number-input): add hideSteppers prop
Allows consumers to hide the input stepper buttons.
This commit is contained in:
Eric Y Liu
parent
b4664507c5
commit
71a12950af
5 changed files with 84 additions and 57 deletions
|
|
@ -2471,31 +2471,32 @@ export type NumberInputTranslationId = "increment" | "decrement";
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | <code>let</code> | Yes | <code>number | string</code> | <code>""</code> | Specify the input value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the input |
|
||||
| step | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
|
||||
| max | <code>let</code> | No | <code>number</code> | -- | Specify the maximum value |
|
||||
| min | <code>let</code> | No | <code>number</code> | -- | Specify the minimum value |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
|
||||
| mobile | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the mobile variant |
|
||||
| allowEmpty | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
|
||||
| translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | <code>let</code> | Yes | <code>number | string</code> | <code>""</code> | Specify the input value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the input |
|
||||
| step | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
|
||||
| max | <code>let</code> | No | <code>number</code> | -- | Specify the maximum value |
|
||||
| min | <code>let</code> | No | <code>number</code> | -- | Specify the minimum value |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
|
||||
| mobile | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the mobile variant |
|
||||
| allowEmpty | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| hideSteppers | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
|
||||
| translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -6134,6 +6134,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "hideSteppers",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to hide the input stepper buttons",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "iconDescription",
|
||||
"kind": "let",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@ components: ["NumberInput", "NumberInputSkeleton"]
|
|||
|
||||
<NumberInput hideLabel label="Clusters" />
|
||||
|
||||
### Hidden steppers
|
||||
|
||||
<NumberInput hideSteppers label="Clusters" />
|
||||
|
||||
### Light variant
|
||||
|
||||
<NumberInput light label="Clusters" />
|
||||
|
|
|
|||
|
|
@ -49,6 +49,9 @@
|
|||
/** Set to `true` to disable the input */
|
||||
export let disabled = false;
|
||||
|
||||
/** Set to `true` to hide the input stepper buttons */
|
||||
export let hideSteppers = false;
|
||||
|
||||
/** Specify the ARIA label for the increment icons */
|
||||
export let iconDescription = "";
|
||||
|
||||
|
|
@ -156,6 +159,7 @@
|
|||
class:bx--number--readonly="{readonly}"
|
||||
class:bx--number--light="{light}"
|
||||
class:bx--number--nolabel="{hideLabel}"
|
||||
class:bx--number--nosteppers="{hideSteppers}"
|
||||
class:bx--number--mobile="{mobile}"
|
||||
class="{size && `bx--number--${size}`}"
|
||||
>
|
||||
|
|
@ -269,38 +273,40 @@
|
|||
class="bx--number__invalid bx--number__invalid--warning"
|
||||
/>
|
||||
{/if}
|
||||
<div class:bx--number__controls="{true}">
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{decrementLabel || iconDescription}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{incrementLabel || iconDescription}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
</div>
|
||||
{#if !hideSteppers}
|
||||
<div class:bx--number__controls="{true}">
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{decrementLabel || iconDescription}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{incrementLabel || iconDescription}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if !error && !warn && helperText}
|
||||
|
|
|
|||
6
types/NumberInput/NumberInput.d.ts
vendored
6
types/NumberInput/NumberInput.d.ts
vendored
|
|
@ -62,6 +62,12 @@ export interface NumberInputProps
|
|||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to hide the input stepper buttons
|
||||
* @default false
|
||||
*/
|
||||
hideSteppers?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the increment icons
|
||||
* @default ""
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue