mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 11:59:34 +00:00
Merge branch 'next/v11-styles' into v11-Layer
This commit is contained in:
metonym
GitHub
commit
20ccb65e5d
12 changed files with 484 additions and 285 deletions
10
docs/package-lock.json
generated
10
docs/package-lock.json
generated
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
},
|
||||
"..": {
|
||||
"version": "0.82.7",
|
||||
"version": "1.0.0-next.0",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
|
|
@ -39,17 +39,17 @@
|
|||
"autoprefixer": "^10.4.8",
|
||||
"carbon-icons-svelte": "^12.1.0",
|
||||
"postcss": "^8.4.16",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"rollup": "^2.78.1",
|
||||
"rollup-plugin-svelte": "^7.1.0",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"sass": "^1.49.11",
|
||||
"standard-version": "^9.5.0",
|
||||
"sveld": "^0.19.0",
|
||||
"sveld": "^0.19.1",
|
||||
"svelte": "^4.2.0",
|
||||
"svelte-check": "^3.4.6",
|
||||
"typescript": "^4.7.4"
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
|
|
|
|||
|
|
@ -12742,21 +12742,10 @@
|
|||
"moduleName": "TextInput",
|
||||
"filePath": "src/TextInput/TextInput.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Set the size of the input",
|
||||
"type": "\"sm\" | \"lg\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "value",
|
||||
"kind": "let",
|
||||
"description": "Specify the input value.\n\n`value` will be set to `null` if type=\"number\"\nand the value is empty.",
|
||||
"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,
|
||||
|
|
@ -12765,6 +12754,30 @@
|
|||
"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",
|
||||
|
|
@ -12780,7 +12793,7 @@
|
|||
{
|
||||
"name": "light",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable the light variant",
|
||||
"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,
|
||||
|
|
@ -12801,41 +12814,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "helperText",
|
||||
"kind": "let",
|
||||
"description": "Specify the helper text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"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": "labelText",
|
||||
"kind": "let",
|
||||
|
|
@ -12860,6 +12838,41 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "helperText",
|
||||
"kind": "let",
|
||||
"description": "Specify the helper text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "counter",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable display the character counter. Requires `maxCount` to be set.",
|
||||
"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": "invalid",
|
||||
"kind": "let",
|
||||
|
|
@ -12909,23 +12922,22 @@
|
|||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "ref",
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
"description": "Obtain a reference to the input HTML element",
|
||||
"type": "null | HTMLInputElement",
|
||||
"value": "null",
|
||||
"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": true
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "required",
|
||||
"name": "name",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to mark the field as required",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"description": "Specify a name attribute for the input",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -12944,6 +12956,18 @@
|
|||
"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",
|
||||
|
|
@ -12955,40 +12979,74 @@
|
|||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "labelAttributes",
|
||||
"kind": "let",
|
||||
"description": "Set HTML attributes on the `label` element",
|
||||
"type": "import('svelte/elements').HTMLLabelAttributes",
|
||||
"value": "{}",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "inputAttributes",
|
||||
"kind": "let",
|
||||
"description": "Set HTML attributes on the `input` element",
|
||||
"type": "import('svelte/elements').HTMLInputAttributes",
|
||||
"value": "{}",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "helperText",
|
||||
"default": false,
|
||||
"fallback": "{helperText}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "invalidText",
|
||||
"default": false,
|
||||
"fallback": "{invalidText}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "warnText",
|
||||
"default": false,
|
||||
"fallback": "{warnText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"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": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "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" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" },
|
||||
{ "type": "forwarded", "name": "paste", "element": "input" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "input" }
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "TextInputSkeleton",
|
||||
|
|
@ -13005,18 +13063,30 @@
|
|||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "divAttributes",
|
||||
"kind": "let",
|
||||
"description": "Specify the div HTML attributes for the skeleton container",
|
||||
"type": "import('svelte/elements').HTMLDivAttributes",
|
||||
"value": "{}",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "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" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "Theme",
|
||||
|
|
|
|||
|
|
@ -9,47 +9,51 @@ components: ["TextInput", "TextInputSkeleton"]
|
|||
|
||||
## Default
|
||||
|
||||
<TextInput labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput labelText="Username" placeholder="Enter username..." />
|
||||
|
||||
## With helper text
|
||||
|
||||
<TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." />
|
||||
<TextInput labelText="Username" helperText="Your username is associated with your email" placeholder="Enter username..." />
|
||||
|
||||
## Hidden label
|
||||
|
||||
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput hideLabel labelText="Username" placeholder="Enter username..." />
|
||||
|
||||
## Light variant
|
||||
|
||||
<TextInput light labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput light labelText="Username" placeholder="Enter username..." />
|
||||
|
||||
## Inline variant
|
||||
|
||||
<TextInput inline labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput inline labelText="Username" placeholder="Enter username..." />
|
||||
|
||||
## Read-only variant
|
||||
|
||||
<TextInput readonly labelText="User name" value="IBM" />
|
||||
<TextInput readonly labelText="Username" value="IBM" />
|
||||
|
||||
## Large size
|
||||
|
||||
<TextInput size="lg" labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput size="lg" labelText="Username" placeholder="Enter username..." />
|
||||
|
||||
## Small size
|
||||
|
||||
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput size="sm" labelText="Username" placeholder="Enter username..." />
|
||||
|
||||
## Character Counter
|
||||
|
||||
<TextInput labelText="Username" placeholder="Enter username..." maxCount={32} counter />
|
||||
|
||||
## Invalid state
|
||||
|
||||
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput invalid invalidText="Username is already taken. Please try another." labelText="Username" placeholder="Enter username..." />
|
||||
|
||||
## Warning state
|
||||
|
||||
<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput warn warnText="Your username is different from your log in ID." labelText="Username" placeholder="Enter username..." />
|
||||
|
||||
## Disabled state
|
||||
|
||||
<TextInput disabled labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput disabled labelText="Username" placeholder="Enter username..." />
|
||||
|
||||
## Skeleton
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue