mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: v11 TextInput

Browse source 
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
This commit is contained in:
Gregor Wassmann 2023-03-31 20:13:24 +02:00 • committed by Enrico Sacchetti
commit 9285c72a50
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
6 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -4113,7 +4113,7 @@ None.
| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | | :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | No | <code>let</code> | Yes | <code>null &#124; number &#124; string</code> | <code>""</code> | Specify the input value.<br /><br />`value` will be set to `null` if type="number"<br />and the value is empty. | | value | No | <code>let</code> | Yes | <code>null &#124; number &#124; string</code> | <code>""</code> | Specify the input value.<br /><br />`value` will be set to `null` if type="number"<br />and the value is empty. |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |

2
docs/src/COMPONENT_API.json
View file

@ -12676,7 +12676,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the input", "description": "Set the size of the input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

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

@ -31,9 +31,9 @@ components: ["TextInput", "TextInputSkeleton"]
<TextInput readonly labelText="User name" value="IBM" /> <TextInput readonly labelText="User name" value="IBM" />
## Extra-large size ## Large size
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." /> <TextInput size="lg" labelText="User name" placeholder="Enter user name..." />
## Small size ## Small size

10
src/TextInput/TextInput.svelte
View file

@ -6,7 +6,7 @@
/** /**
* Set the size of the input * Set the size of the input
* @type {"sm" | "xl"} * @type {"sm" | "lg"}
*/ */
export let size = undefined; export let size = undefined;
@ -125,7 +125,7 @@
class:bx--label--disabled="{disabled}" class:bx--label--disabled="{disabled}"
class:bx--label--inline="{inline}" class:bx--label--inline="{inline}"
class:bx--label--inline--sm="{size === 'sm'}" class:bx--label--inline--sm="{size === 'sm'}"
class:bx--label--inline--xl="{size === 'xl'}" class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}"
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
@ -168,9 +168,7 @@
class:bx--text-input__field-wrapper="{true}" class:bx--text-input__field-wrapper="{true}"
class:bx--text-input__field-wrapper--warning="{!invalid && warn}" class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
> >
{#if readonly} {#if !readonly}
<EditOff class="bx--text-input__readonly-icon" />
{:else}
{#if invalid} {#if invalid}
<WarningFilled class="bx--text-input__invalid-icon" /> <WarningFilled class="bx--text-input__invalid-icon" />
{/if} {/if}
@ -205,7 +203,7 @@
class:bx--text-input--invalid="{error}" class:bx--text-input--invalid="{error}"
class:bx--text-input--warning="{warn}" class:bx--text-input--warning="{warn}"
class:bx--text-input--sm="{size === 'sm'}" class:bx--text-input--sm="{size === 'sm'}"
class:bx--text-input--xl="{size === 'xl'}" class:bx--text-input--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps} {...$$restProps}
on:change="{onChange}" on:change="{onChange}"
on:input="{onInput}" on:input="{onInput}"

2
tests/TextInput.test.svelte
View file

@ -26,7 +26,7 @@
<TextInput inline labelText="User name" placeholder="Enter user name..." /> <TextInput inline labelText="User name" placeholder="Enter user name..." />
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." /> <TextInput size="lg" labelText="User name" placeholder="Enter user name..." />
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." /> <TextInput size="sm" labelText="User name" placeholder="Enter user name..." />

2
types/TextInput/TextInput.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface TextInputProps extends RestProps {
* Set the size of the input * Set the size of the input
* @default undefined * @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "lg";
/** /**
* Specify the input value. * Specify the input value.