mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(number-input): add hideSteppers prop

Browse source 
Allows consumers to hide the input stepper buttons.
This commit is contained in:
Eric Y Liu 2021-06-26 06:10:28 -07:00
commit 71a12950af
5 changed files with 84 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

3
COMPONENT_INDEX.md
View file

@ -2472,7 +2472,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- |
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the input value |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Set the size of the input |
@ -2484,6 +2484,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
| 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 |

10
docs/src/COMPONENT_API.json
View file

@ -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",

4
docs/src/pages/components/NumberInput.svx
View file

@ -23,6 +23,10 @@ components: ["NumberInput", "NumberInputSkeleton"]
<NumberInput hideLabel label="Clusters" />
### Hidden steppers
<NumberInput hideSteppers label="Clusters" />
### Light variant
<NumberInput light label="Clusters" />

6
src/NumberInput/NumberInput.svelte
View file

@ -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,6 +273,7 @@
class="bx--number__invalid bx--number__invalid--warning"
/>
{/if}
{#if !hideSteppers}
<div class:bx--number__controls="{true}">
<button
type="button"
@ -301,6 +306,7 @@
</button>
<div class:bx--number__rule-divider="{true}"></div>
</div>
{/if}
</div>
{/if}
{#if !error && !warn && helperText}

6
types/NumberInput/NumberInput.d.ts vendored
View file

@ -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 ""