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

Adopted suggested changes

Browse source
This commit is contained in:
Samuel Janda 2024-01-16 19:25:13 +11:00
commit 6d9f45b107
6 changed files with 236 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

274
docs/src/COMPONENT_API.json
View file

@ -12698,10 +12698,59 @@
"filePath": "src/TextInput/TextInput.svelte",
"props": [
{
"name": "counter",
"name": "value",
"kind": "let",
"description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
"type": "\"char\" | \"word\"",
"description": "Specify the input value\n`value` will be set to `null` if `typeof value === \"number\"` and `value` is empty",
"type": "null | number | string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the input HTML element",
"type": "null | HTMLInputElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
},
{
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "placeholder",
"kind": "let",
"description": "Specify the placeholder text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant\nFor use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color\nThe light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release\n@deprecated ",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12721,9 +12770,9 @@
"reactive": false
},
{
"name": "helperText",
"name": "labelText",
"kind": "let",
"description": "Specify the helper text",
"description": "Specify the label text",
"type": "string",
"value": "\"\"",
"isFunction": false,
@ -12745,11 +12794,11 @@
"reactive": false
},
{
"name": "id",
"name": "helperText",
"kind": "let",
"description": "Set an id for the input element",
"description": "Specify the helper text",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12757,9 +12806,9 @@
"reactive": false
},
{
"name": "inline",
"name": "counter",
"kind": "let",
"description": "Set to `true` to use the inline variant",
"description": "Set to `true` to enable display the character counter. Requires `maxCount` to be set.",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -12768,6 +12817,17 @@
"constant": false,
"reactive": false
},
{
"name": "maxCount",
"kind": "let",
"description": "Specify the maximum number of characters/words allowed\nThis is needed in order for `counter` to display",
"type": "number",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "invalid",
"kind": "let",
@ -12792,123 +12852,6 @@
"constant": false,
"reactive": false
},
{
"name": "labelText",
"kind": "let",
"description": "Specify the label text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant\nFor use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color\nThe light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release\n@deprecated ",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "maxCount",
"kind": "let",
"description": "Specify the maximum number of characters/words allowed\nThis is needed in order for `counter` to display",
"type": "number",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "name",
"kind": "let",
"description": "Specify a name attribute for the input",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "placeholder",
"kind": "let",
"description": "Specify the placeholder text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "readonly",
"kind": "let",
"description": "Set to `true` to use the read-only variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the input HTML element",
"type": "null | HTMLInputElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
},
{
"name": "required",
"kind": "let",
"description": "Set to `true` to mark the field as required",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"md\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "value",
"kind": "let",
"description": "Specify the input value\n`value` will be set to `null` if `type = \"number\"` and the value is empty",
"type": "null | number | string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
},
{
"name": "warn",
"kind": "let",
@ -12933,11 +12876,70 @@
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
"description": "Set an id for the input element",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "name",
"kind": "let",
"description": "Specify a name attribute for the input",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "inline",
"kind": "let",
"description": "Set to `true` to use the inline variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "required",
"kind": "let",
"description": "Set to `true` to mark the field as required",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "readonly",
"kind": "let",
"description": "Set to `true` to use the read-only variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "labelAttributes",
"kind": "let",
"description": "Set HTML attributes on the `label` element",
"type": "Record<string, string>",
"type": "import('svelte/elements').HTMLLabelAttributes",
"value": "{}",
"isFunction": false,
"isFunctionDeclaration": false,
@ -12949,7 +12951,7 @@
"name": "inputAttributes",
"kind": "let",
"description": "Set HTML attributes on the `input` element",
"type": "Record<string, string>",
"type": "import('svelte/elements').HTMLInputAttributes",
"value": "{}",
"isFunction": false,
"isFunctionDeclaration": false,
@ -12986,21 +12988,13 @@
}
],
"events": [
{
"type": "dispatched",
"name": "change",
"detail": "null | number | string"
},
{
"type": "dispatched",
"name": "input",
"detail": "null | number | string"
},
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "pointerup", "element": "div" },
{ "type": "forwarded", "name": "pointerover", "element": "div" },
{ "type": "forwarded", "name": "pointerenter", "element": "div" },
{ "type": "forwarded", "name": "pointerleave", "element": "div" },
{ "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
@ -13029,7 +13023,7 @@
"name": "divAttributes",
"kind": "let",
"description": "Specify the div HTML attributes for the skeleton container",
"type": "Record<string, string>",
"type": "import('svelte/elements').HTMLDivAttributes",
"value": "{}",
"isFunction": false,
"isFunctionDeclaration": false,

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

@ -41,7 +41,7 @@ components: ["TextInput", "TextInputSkeleton"]
## Character Counter
<TextInput labelText="Username" placeholder="Enter username..." maxCount={32} counter="char" />
<TextInput labelText="Username" placeholder="Enter username..." maxCount={32} counter />
## Invalid state