mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-19 03:49:34 +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

51
COMPONENT_INDEX.md
View file

@ -2471,31 +2471,32 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Set the size of the input |
| step | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment | | 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 | | max | <code>let</code> | No | <code>number</code> | -- | Specify the maximum value |
| min | <code>let</code> | No | <code>number</code> | -- | Specify the minimum 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | hideSteppers | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state | | invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text | | warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids | | hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids | | translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the 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 | | translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids |
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input | | 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 ### Slots

10
docs/src/COMPONENT_API.json
View file

@ -6134,6 +6134,16 @@
"constant": false, "constant": false,
"reactive": 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", "name": "iconDescription",
"kind": "let", "kind": "let",

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

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

70
src/NumberInput/NumberInput.svelte
View file

@ -49,6 +49,9 @@
/** Set to `true` to disable the input */ /** Set to `true` to disable the input */
export let disabled = false; 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 */ /** Specify the ARIA label for the increment icons */
export let iconDescription = ""; export let iconDescription = "";
@ -156,6 +159,7 @@
class:bx--number--readonly="{readonly}" class:bx--number--readonly="{readonly}"
class:bx--number--light="{light}" class:bx--number--light="{light}"
class:bx--number--nolabel="{hideLabel}" class:bx--number--nolabel="{hideLabel}"
class:bx--number--nosteppers="{hideSteppers}"
class:bx--number--mobile="{mobile}" class:bx--number--mobile="{mobile}"
class="{size && `bx--number--${size}`}" class="{size && `bx--number--${size}`}"
> >
@ -269,38 +273,40 @@
class="bx--number__invalid bx--number__invalid--warning" class="bx--number__invalid bx--number__invalid--warning"
/> />
{/if} {/if}
<div class:bx--number__controls="{true}"> {#if !hideSteppers}
<button <div class:bx--number__controls="{true}">
type="button" <button
tabindex="-1" type="button"
title="{decrementLabel || iconDescription}" tabindex="-1"
aria-label="{decrementLabel || iconDescription}" title="{decrementLabel || iconDescription}"
class:bx--number__control-btn="{true}" aria-label="{decrementLabel || iconDescription}"
class:down-icon="{true}" class:bx--number__control-btn="{true}"
on:click="{() => { class:down-icon="{true}"
updateValue(-1); on:click="{() => {
}}" updateValue(-1);
disabled="{disabled}" }}"
> disabled="{disabled}"
<Subtract16 class="down-icon" /> >
</button> <Subtract16 class="down-icon" />
<div class:bx--number__rule-divider="{true}"></div> </button>
<button <div class:bx--number__rule-divider="{true}"></div>
type="button" <button
tabindex="-1" type="button"
title="{incrementLabel || iconDescription}" tabindex="-1"
aria-label="{incrementLabel || iconDescription}" title="{incrementLabel || iconDescription}"
class:bx--number__control-btn="{true}" aria-label="{incrementLabel || iconDescription}"
class:up-icon="{true}" class:bx--number__control-btn="{true}"
on:click="{() => { class:up-icon="{true}"
updateValue(1); on:click="{() => {
}}" updateValue(1);
disabled="{disabled}" }}"
> disabled="{disabled}"
<Add16 class="up-icon" /> >
</button> <Add16 class="up-icon" />
<div class:bx--number__rule-divider="{true}"></div> </button>
</div> <div class:bx--number__rule-divider="{true}"></div>
</div>
{/if}
</div> </div>
{/if} {/if}
{#if !error && !warn && helperText} {#if !error && !warn && helperText}

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

@ -62,6 +62,12 @@ export interface NumberInputProps
*/ */
disabled?: boolean; disabled?: boolean;
/**
* Set to `true` to hide the input stepper buttons
* @default false
*/
hideSteppers?: boolean;
/** /**
* Specify the ARIA label for the increment icons * Specify the ARIA label for the increment icons
* @default "" * @default ""