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

Merge branch 'next/v11-styles' into v11-Layer

Browse source
This commit is contained in:
metonym 2024-03-23 15:29:54 -07:00 • committed by GitHub
commit 20ccb65e5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 484 additions and 285 deletions
Download patch file Download diff file Expand all files Collapse all files

11
CHANGELOG.md
View file

@ -2,6 +2,17 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [1.0.0-next.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v1.0.0-next.0...v1.0.0-next.1) (2024-01-17)
### ⚠ BREAKING CHANGES
* TextInput v11 Styles (#1889)
### Features
* TextInput v11 Styles ([#1889](https://github.com/carbon-design-system/carbon-components-svelte/issues/1889)) ([c436dbd](https://github.com/carbon-design-system/carbon-components-svelte/commit/c436dbd76177f7553ba4206601f5ef2e416da594)), closes [#1667](https://github.com/carbon-design-system/carbon-components-svelte/issues/1667) [#1633](https://github.com/carbon-design-system/carbon-components-svelte/issues/1633) [#1621](https://github.com/carbon-design-system/carbon-components-svelte/issues/1621) [#1621](https://github.com/carbon-design-system/carbon-components-svelte/issues/1621) [#1888](https://github.com/carbon-design-system/carbon-components-svelte/issues/1888)
## [1.0.0-next.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.8...v1.0.0-next.0) (2024-01-12) ## [1.0.0-next.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.8...v1.0.0-next.0) (2024-01-12)

52
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index # Component Index
> 166 components exported from carbon-components-svelte@1.0.0-next.0. > 166 components exported from carbon-components-svelte@1.0.0-next.1.
## Components ## Components
@ -4154,42 +4154,50 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | | :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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 />`value` will be set to `null` if `typeof value === "number"` and `value` is empty |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</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<br />For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color<br />The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release<br />@deprecated |
| 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 |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| counter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable display the character counter. Requires `maxCount` to be set. |
| maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum number of characters/words allowed<br />This is needed in order for `counter` to display |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state | | warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text | | warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant | | inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant | | readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
| labelAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLLabelAttributes</code> | <code>{}</code> | Set HTML attributes on the `label` element |
| inputAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLInputAttributes</code> | <code>{}</code> | Set HTML attributes on the `input` element |
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- | | :---------- | :------ | :---- | :------------------------- |
| helperText | No | -- | <code>{helperText}</code> |
| invalidText | No | -- | <code>{invalidText}</code> |
| labelText | No | -- | <code>{labelText}</code> | | labelText | No | -- | <code>{labelText}</code> |
| warnText | No | -- | <code>{warnText}</code> |
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------- | | :----------- | :-------- | :----- |
| change | dispatched | <code>null &#124; number &#124; string</code> |
| input | dispatched | <code>null &#124; number &#124; string</code> |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | pointerup | forwarded | -- |
| mouseenter | forwarded | -- | | pointerover | forwarded | -- |
| mouseleave | forwarded | -- | | pointerenter | forwarded | -- |
| pointerleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- | | keydown | forwarded | -- |
| keyup | forwarded | -- | | keyup | forwarded | -- |
| focus | forwarded | -- | | focus | forwarded | -- |
@ -4201,8 +4209,9 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | | :------------ | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------ | ---------------------------------------------------------- |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |
| divAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLDivAttributes</code> | <code>{}</code> | Specify the div HTML attributes for the skeleton container |
### Slots ### Slots
@ -4211,11 +4220,12 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :-------- | :----- | | :----------- | :-------- | :----- |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | pointerup | forwarded | -- |
| mouseenter | forwarded | -- | | pointerover | forwarded | -- |
| mouseleave | forwarded | -- | | pointerenter | forwarded | -- |
| pointerleave | forwarded | -- |
## `Theme` ## `Theme`

10
CONTRIBUTING.md
View file

@ -171,7 +171,15 @@ The workflow is automatically triggered when pushing a tag that begins with `v`
However, maintainers must perform a few things in preparation for a release. However, maintainers must perform a few things in preparation for a release.
Locally, while on `master` and the branch is clean, run `npm run release`. This command will: <!-- Instructions for next/* releases -->
While performing a prerelease:
1. manually bump `package.json`'s `version` key to your target version.
2. ensure the `--first-release` flag is passed to the `standard-version` command.
3. Run `npm run release` then continue below.
For regular releases, while on `master` and the branch is clean, run `npm run release`. This command will:
- Bump the semantic version in `package.json` - Bump the semantic version in `package.json`
- Generate notes in `CHANGELOG.md` - Generate notes in `CHANGELOG.md`

10
docs/package-lock.json generated
View file

@ -25,7 +25,7 @@
} }
}, },
"..": { "..": {
"version": "0.82.7", "version": "1.0.0-next.0",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
@ -39,17 +39,17 @@
"autoprefixer": "^10.4.8", "autoprefixer": "^10.4.8",
"carbon-icons-svelte": "^12.1.0", "carbon-icons-svelte": "^12.1.0",
"postcss": "^8.4.16", "postcss": "^8.4.16",
"prettier": "^3.1.1", "prettier": "^2.8.8",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^2.10.1",
"rollup": "^2.78.1", "rollup": "^2.78.1",
"rollup-plugin-svelte": "^7.1.0", "rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"sass": "^1.49.11", "sass": "^1.49.11",
"standard-version": "^9.5.0", "standard-version": "^9.5.0",
"sveld": "^0.19.0", "sveld": "^0.19.1",
"svelte": "^4.2.0", "svelte": "^4.2.0",
"svelte-check": "^3.4.6", "svelte-check": "^3.4.6",
"typescript": "^4.7.4" "typescript": "^5.3.3"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {

224
docs/src/COMPONENT_API.json
View file

@ -12742,21 +12742,10 @@
"moduleName": "TextInput", "moduleName": "TextInput",
"filePath": "src/TextInput/TextInput.svelte", "filePath": "src/TextInput/TextInput.svelte",
"props": [ "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", "name": "value",
"kind": "let", "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", "type": "null | number | string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -12765,6 +12754,30 @@
"constant": false, "constant": false,
"reactive": true "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", "name": "placeholder",
"kind": "let", "kind": "let",
@ -12780,7 +12793,7 @@
{ {
"name": "light", "name": "light",
"kind": "let", "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", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -12801,41 +12814,6 @@
"constant": false, "constant": false,
"reactive": 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", "name": "labelText",
"kind": "let", "kind": "let",
@ -12860,6 +12838,41 @@
"constant": false, "constant": false,
"reactive": 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", "name": "invalid",
"kind": "let", "kind": "let",
@ -12909,23 +12922,22 @@
"reactive": false "reactive": false
}, },
{ {
"name": "ref", "name": "id",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the input HTML element", "description": "Set an id for the input element",
"type": "null | HTMLInputElement", "type": "string",
"value": "null", "value": "\"ccs-\" + Math.random().toString(36)",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
"constant": false, "constant": false,
"reactive": true "reactive": false
}, },
{ {
"name": "required", "name": "name",
"kind": "let", "kind": "let",
"description": "Set to `true` to mark the field as required", "description": "Specify a name attribute for the input",
"type": "boolean", "type": "string",
"value": "false",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -12944,6 +12956,18 @@
"constant": false, "constant": false,
"reactive": 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", "name": "readonly",
"kind": "let", "kind": "let",
@ -12955,40 +12979,74 @@
"isRequired": false, "isRequired": false,
"constant": false, "constant": false,
"reactive": 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": [], "moduleExports": [],
"slots": [ "slots": [
{
"name": "helperText",
"default": false,
"fallback": "{helperText}",
"slot_props": "{}"
},
{
"name": "invalidText",
"default": false,
"fallback": "{invalidText}",
"slot_props": "{}"
},
{ {
"name": "labelText", "name": "labelText",
"default": false, "default": false,
"fallback": "{labelText}", "fallback": "{labelText}",
"slot_props": "{}" "slot_props": "{}"
},
{
"name": "warnText",
"default": false,
"fallback": "{warnText}",
"slot_props": "{}"
} }
], ],
"events": [ "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": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "pointerup", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "pointerover", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "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": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" } { "type": "forwarded", "name": "paste", "element": "input" }
], ],
"typedefs": [], "typedefs": []
"rest_props": { "type": "Element", "name": "input" }
}, },
{ {
"moduleName": "TextInputSkeleton", "moduleName": "TextInputSkeleton",
@ -13005,18 +13063,30 @@
"isRequired": false, "isRequired": false,
"constant": false, "constant": false,
"reactive": 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": [], "moduleExports": [],
"slots": [], "slots": [],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "pointerup", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "pointerover", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" } { "type": "forwarded", "name": "pointerenter", "element": "div" },
{ "type": "forwarded", "name": "pointerleave", "element": "div" }
], ],
"typedefs": [], "typedefs": []
"rest_props": { "type": "Element", "name": "div" }
}, },
{ {
"moduleName": "Theme", "moduleName": "Theme",

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

@ -9,47 +9,51 @@ components: ["TextInput", "TextInputSkeleton"]
## Default ## Default
<TextInput labelText="User name" placeholder="Enter user name..." /> <TextInput labelText="Username" placeholder="Enter username..." />
## With helper text ## 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 ## Hidden label
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." /> <TextInput hideLabel labelText="Username" placeholder="Enter username..." />
## Light variant ## Light variant
<TextInput light labelText="User name" placeholder="Enter user name..." /> <TextInput light labelText="Username" placeholder="Enter username..." />
## Inline variant ## Inline variant
<TextInput inline labelText="User name" placeholder="Enter user name..." /> <TextInput inline labelText="Username" placeholder="Enter username..." />
## Read-only variant ## Read-only variant
<TextInput readonly labelText="User name" value="IBM" /> <TextInput readonly labelText="Username" value="IBM" />
## Large size ## Large size
<TextInput size="lg" labelText="User name" placeholder="Enter user name..." /> <TextInput size="lg" labelText="Username" placeholder="Enter username..." />
## Small size ## 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 ## 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 ## 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 ## Disabled state
<TextInput disabled labelText="User name" placeholder="Enter user name..." /> <TextInput disabled labelText="Username" placeholder="Enter username..." />
## Skeleton ## Skeleton

4
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "carbon-components-svelte", "name": "carbon-components-svelte",
"version": "1.0.0-next.0", "version": "1.0.0-next.1",
"license": "Apache-2.0", "license": "Apache-2.0",
"description": "Svelte implementation of the Carbon Design System", "description": "Svelte implementation of the Carbon Design System",
"svelte": "./src/index.js", "svelte": "./src/index.js",
@ -32,7 +32,7 @@
"build:docs": "node scripts/build-docs", "build:docs": "node scripts/build-docs",
"build:lib": "rollup -c", "build:lib": "rollup -c",
"format": "prettier --write \"./**/*.{svelte,js,md}\"", "format": "prettier --write \"./**/*.{svelte,js,md}\"",
"release": "standard-version && npm run build:docs" "release": "standard-version --first-release && npm run build:docs"
}, },
"dependencies": { "dependencies": {
"flatpickr": "4.6.9" "flatpickr": "4.6.9"

188
src/TextInput/TextInput.svelte
View file

@ -1,51 +1,52 @@
<script> <script>
/** /**
* @event {null | number | string} change * Specify the input value
* @event {null | number | string} input * `value` will be set to `null` if `typeof value === "number"` and `value` is empty
*/
/**
* Set the size of the input
* @type {"sm" | "lg"}
*/
export let size = undefined;
/**
* Specify the input value.
*
* `value` will be set to `null` if type="number"
* and the value is empty.
* @type {null | number | string} * @type {null | number | string}
*/ */
export let value = ""; export let value = "";
/** Obtain a reference to the input HTML element */
export let ref = null;
/**
* Set the size of the input
* @type {"sm" | "md" | "lg"}
*/
export let size = "md";
/** Specify the placeholder text */ /** Specify the placeholder text */
export let placeholder = ""; export let placeholder = "";
/** Set to `true` to enable the light variant */ /**
* Set to `true` to enable the light variant
* For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
* The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
* @deprecated
*/
export let light = false; export let light = false;
/** Set to `true` to disable the input */ /** Set to `true` to disable the input */
export let disabled = false; export let disabled = false;
/** Specify the helper text */
export let helperText = "";
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string}
*/
export let name = undefined;
/** Specify the label text */ /** Specify the label text */
export let labelText = ""; export let labelText = "";
/** Set to `true` to visually hide the label text */ /** Set to `true` to visually hide the label text */
export let hideLabel = false; export let hideLabel = false;
/** Specify the helper text */
export let helperText = "";
/** Set to `true` to enable display the character counter. Requires `maxCount` to be set. */
export let counter = false;
/**
* Specify the maximum number of characters/words allowed
* This is needed in order for `counter` to display
* @type {number}
*/
export let maxCount = undefined;
/** Set to `true` to indicate an invalid state */ /** Set to `true` to indicate an invalid state */
export let invalid = false; export let invalid = false;
@ -58,42 +59,44 @@
/** Specify the warning state text */ /** Specify the warning state text */
export let warnText = ""; export let warnText = "";
/** Obtain a reference to the input HTML element */ /** Set an id for the input element */
export let ref = null; export let id = "ccs-" + Math.random().toString(36);
/** Set to `true` to mark the field as required */ /**
export let required = false; * Specify a name attribute for the input
* @type {string}
*/
export let name = undefined;
/** Set to `true` to use the inline variant */ /** Set to `true` to use the inline variant */
export let inline = false; export let inline = false;
/** Set to `true` to mark the field as required */
export let required = false;
/** Set to `true` to use the read-only variant */ /** Set to `true` to use the read-only variant */
export let readonly = false; export let readonly = false;
import { createEventDispatcher, getContext } from "svelte"; /**
* Set HTML attributes on the `label` element
* @type {import('svelte/elements').HTMLLabelAttributes}
*/
export let labelAttributes = {};
/**
* Set HTML attributes on the `input` element
* @type {import('svelte/elements').HTMLInputAttributes}
*/
export let inputAttributes = {};
import { getContext } from "svelte";
import WarningFilled from "../icons/WarningFilled.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import EditOff from "../icons/EditOff.svelte";
const ctx = getContext("Form"); const ctx = getContext("Form");
const dispatch = createEventDispatcher();
function parse(raw) {
if ($$restProps.type !== "number") return raw;
return raw != "" ? Number(raw) : null;
}
/** @type {(e: Event) => void} */
const onInput = (e) => {
value = parse(e.target.value);
dispatch("input", value);
};
/** @type {(e: Event) => void} */
const onChange = (e) => {
dispatch("change", parse(e.target.value));
};
$: if (maxCount && value.length > maxCount) value = value.slice(0, maxCount);
$: count = value.length;
$: isFluid = !!ctx && ctx.isFluid; $: isFluid = !!ctx && ctx.isFluid;
$: error = invalid && !readonly; $: error = invalid && !readonly;
$: helperId = `helper-${id}`; $: helperId = `helper-${id}`;
@ -111,9 +114,10 @@
class:bx--text-input-wrapper--light="{light}" class:bx--text-input-wrapper--light="{light}"
class:bx--text-input-wrapper--readonly="{readonly}" class:bx--text-input-wrapper--readonly="{readonly}"
on:click on:click
on:mouseover on:pointerup
on:mouseenter on:pointerover
on:mouseleave on:pointerenter
on:pointerleave
> >
{#if inline} {#if inline}
<div class:bx--text-input__label-helper-wrapper="{true}"> <div class:bx--text-input__label-helper-wrapper="{true}">
@ -125,25 +129,38 @@
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--lg="{size === 'lg' || size === 'xl'}" class:bx--label--inline--md="{size === 'md'}"
class:bx--label--inline--lg="{size === 'lg'}"
{...labelAttributes}
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
</slot> </slot>
</label> </label>
{#if maxCount && counter}
<div
class:bx--label="{true}"
class:bx--text-input__label-counter="{true}"
>
{count}/{maxCount}
</div>
{/if} {/if}
{#if !isFluid && helperText} {/if}
{#if !isFluid && (helperText || $$slots.helperText)}
<div <div
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}" class:bx--form__helper-text--inline="{inline}"
> >
<slot name="helperText">
{helperText} {helperText}
</slot>
</div> </div>
{/if} {/if}
</div> </div>
{/if} {/if}
{#if !inline && (labelText || $$slots.labelText)} {#if !inline && (labelText || $$slots.labelText)}
<div class:bx--text-input__label-wrapper="{true}">
<label <label
for="{id}" for="{id}"
class:bx--label="{true}" class:bx--label="{true}"
@ -151,12 +168,24 @@
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="{inline && size === 'sm'}" class:bx--label--inline-sm="{inline && size === 'sm'}"
class:bx--label--inline-xl="{inline && size === 'xl'}" class:bx--label--inline-md="{inline && size === 'md'}"
class:bx--label--inline-lg="{inline && size === 'lg'}"
{...labelAttributes}
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
</slot> </slot>
</label> </label>
{#if maxCount && counter}
<div
class:bx--label="{true}"
class:bx--text-input__label-counter="{true}"
class:fluid-form-fix__label-counter="{isFluid}"
>
{count}/{maxCount}
</div>
{/if}
</div>
{/if} {/if}
<div <div
class:bx--text-input__field-outer-wrapper="{true}" class:bx--text-input__field-outer-wrapper="{true}"
@ -170,8 +199,15 @@
> >
{#if !readonly} {#if !readonly}
{#if invalid} {#if invalid}
{#if isFluid && invalidText.length === 0}
<WarningFilled
class="bx--text-input__invalid-icon"
style="inset-block-start: 3rem;"
/>
{:else}
<WarningFilled class="bx--text-input__invalid-icon" /> <WarningFilled class="bx--text-input__invalid-icon" />
{/if} {/if}
{/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled <WarningAltFilled
class="bx--text-input__invalid-icon class="bx--text-input__invalid-icon
@ -195,7 +231,7 @@
id="{id}" id="{id}"
name="{name}" name="{name}"
placeholder="{placeholder}" placeholder="{placeholder}"
bind:value bind:value="{value}"
required="{required}" required="{required}"
readonly="{readonly}" readonly="{readonly}"
class:bx--text-input="{true}" class:bx--text-input="{true}"
@ -203,10 +239,14 @@
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--lg="{size === 'lg' || size === 'xl'}" class:bx--text-input--md="{size === 'md'}"
{...$$restProps} class:bx--text-input--lg="{size === 'lg'}"
on:change="{onChange}" class:bx--layout--size-sm="{size === 'sm'}"
on:input="{onInput}" class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg'}"
{...inputAttributes}
on:change
on:input
on:keydown on:keydown
on:keyup on:keyup
on:focus on:focus
@ -218,30 +258,48 @@
{/if} {/if}
{#if isFluid && !inline && invalid} {#if isFluid && !inline && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}"> <div class:bx--form-requirement="{true}" id="{errorId}">
<slot name="invalidText">
{invalidText} {invalidText}
</slot>
</div> </div>
{/if} {/if}
{#if isFluid && !inline && warn} {#if isFluid && !inline && warn}
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div> <div class:bx--form-requirement="{true}" id="{warnId}">
<slot name="warnText">{warnText}</slot>
</div>
{/if} {/if}
</div> </div>
{#if !invalid && !warn && !isFluid && !inline && helperText} {#if !invalid && !warn && !isFluid && !inline && (helperText || $$slots.helperText)}
<div <div
id="{helperId}" id="{helperId}"
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}" class:bx--form__helper-text--inline="{inline}"
> >
<slot name="helperText">
{helperText} {helperText}
</slot>
</div> </div>
{/if} {/if}
{#if !isFluid && invalid} {#if !isFluid && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}"> <div class:bx--form-requirement="{true}" id="{errorId}">
<slot name="invalidText">
{invalidText} {invalidText}
</slot>
</div> </div>
{/if} {/if}
{#if !isFluid && !invalid && warn} {#if !isFluid && !invalid && warn}
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div> <div class:bx--form-requirement="{true}" id="{warnId}">
<slot name="warnText">{warnText}</slot>
</div>
{/if} {/if}
</div> </div>
</div> </div>
<style>
.fluid-form-fix__label-counter {
right: 0;
inset-inline-start: unset;
padding-right: 1rem;
}
</style>

15
src/TextInput/TextInputSkeleton.svelte
View file

@ -1,17 +1,24 @@
<script> <script>
/** Set to `true` to hide the label text */ /** Set to `true` to hide the label text */
export let hideLabel = false; export let hideLabel = false;
/**
* Specify the div HTML attributes for the skeleton container
* @type {import('svelte/elements').HTMLDivAttributes}
*/
export let divAttributes = {};
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...divAttributes}
on:click on:click
on:mouseover on:pointerup
on:mouseenter on:pointerover
on:mouseleave on:pointerenter
on:pointerleave
> >
{#if !hideLabel} {#if !hideLabel}
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span> <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>

15
tests/TextInput.test.svelte
View file

@ -5,13 +5,13 @@
</script> </script>
<TextInput <TextInput
type="number"
labelText="User name" labelText="User name"
placeholder="Enter user name..." placeholder="Enter user name..."
bind:value bind:value="{value}"
on:input="{(e) => console.log(e.detail)}" on:input="{(e) => console.log(e)}"
on:change="{(e) => (value = e.detail)}" on:change="{(e) => (value = e)}"
on:paste="{(e) => console.log(e)}" on:paste="{(e) => console.log(e)}"
inputAttributes="{{ type: 'number' }}"
/> />
<TextInput <TextInput
@ -20,6 +20,13 @@
placeholder="Enter user name..." placeholder="Enter user name..."
/> />
<TextInput
labelText="Username"
placeholder="Enter username..."
maxCount="{32}"
counter
/>
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." /> <TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
<TextInput light labelText="User name" placeholder="Enter user name..." /> <TextInput light labelText="User name" placeholder="Enter user name..." />

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

@ -1,24 +1,25 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["input"]; export interface TextInputProps {
export interface TextInputProps extends RestProps {
/** /**
* Set the size of the input * Specify the input value
* @default undefined * `value` will be set to `null` if `typeof value === "number"` and `value` is empty
*/
size?: "sm" | "lg";
/**
* Specify the input value.
*
* `value` will be set to `null` if type="number"
* and the value is empty.
* @default "" * @default ""
*/ */
value?: null | number | string; value?: null | number | string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
/**
* Set the size of the input
* @default "md"
*/
size?: "sm" | "md" | "lg";
/** /**
* Specify the placeholder text * Specify the placeholder text
* @default "" * @default ""
@ -27,6 +28,9 @@ export interface TextInputProps extends RestProps {
/** /**
* Set to `true` to enable the light variant * Set to `true` to enable the light variant
* For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
* The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
* @deprecated
* @default false * @default false
*/ */
light?: boolean; light?: boolean;
@ -37,24 +41,6 @@ export interface TextInputProps extends RestProps {
*/ */
disabled?: boolean; disabled?: boolean;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Set an id for the input element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify a name attribute for the input
* @default undefined
*/
name?: string;
/** /**
* Specify the label text * Specify the label text
* @default "" * @default ""
@ -67,6 +53,25 @@ export interface TextInputProps extends RestProps {
*/ */
hideLabel?: boolean; hideLabel?: boolean;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Set to `true` to enable display the character counter. Requires `maxCount` to be set.
* @default false
*/
counter?: boolean;
/**
* Specify the maximum number of characters/words allowed
* This is needed in order for `counter` to display
* @default undefined
*/
maxCount?: number;
/** /**
* Set to `true` to indicate an invalid state * Set to `true` to indicate an invalid state
* @default false * @default false
@ -92,16 +97,16 @@ export interface TextInputProps extends RestProps {
warnText?: string; warnText?: string;
/** /**
* Obtain a reference to the input HTML element * Set an id for the input element
* @default null * @default "ccs-" + Math.random().toString(36)
*/ */
ref?: null | HTMLInputElement; id?: string;
/** /**
* Set to `true` to mark the field as required * Specify a name attribute for the input
* @default false * @default undefined
*/ */
required?: boolean; name?: string;
/** /**
* Set to `true` to use the inline variant * Set to `true` to use the inline variant
@ -109,29 +114,46 @@ export interface TextInputProps extends RestProps {
*/ */
inline?: boolean; inline?: boolean;
/**
* Set to `true` to mark the field as required
* @default false
*/
required?: boolean;
/** /**
* Set to `true` to use the read-only variant * Set to `true` to use the read-only variant
* @default false * @default false
*/ */
readonly?: boolean; readonly?: boolean;
[key: `data-${string}`]: any; /**
* Set HTML attributes on the `label` element
* @default {}
*/
labelAttributes?: import("svelte/elements").HTMLLabelAttributes;
/**
* Set HTML attributes on the `input` element
* @default {}
*/
inputAttributes?: import("svelte/elements").HTMLInputAttributes;
} }
export default class TextInput extends SvelteComponentTyped< export default class TextInput extends SvelteComponentTyped<
TextInputProps, TextInputProps,
{ {
change: CustomEvent<null | number | string>;
input: CustomEvent<null | number | string>;
click: WindowEventMap["click"]; click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"]; pointerup: WindowEventMap["pointerup"];
mouseenter: WindowEventMap["mouseenter"]; pointerover: WindowEventMap["pointerover"];
mouseleave: WindowEventMap["mouseleave"]; pointerenter: WindowEventMap["pointerenter"];
pointerleave: WindowEventMap["pointerleave"];
change: WindowEventMap["change"];
input: WindowEventMap["input"];
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: DocumentAndElementEventHandlersEventMap["paste"];
}, },
{ labelText: {} } { helperText: {}; invalidText: {}; labelText: {}; warnText: {} }
> {} > {}

18
types/TextInput/TextInputSkeleton.svelte.d.ts vendored
View file

@ -1,25 +1,27 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["div"]; export interface TextInputSkeletonProps {
export interface TextInputSkeletonProps extends RestProps {
/** /**
* Set to `true` to hide the label text * Set to `true` to hide the label text
* @default false * @default false
*/ */
hideLabel?: boolean; hideLabel?: boolean;
[key: `data-${string}`]: any; /**
* Specify the div HTML attributes for the skeleton container
* @default {}
*/
divAttributes?: import("svelte/elements").HTMLDivAttributes;
} }
export default class TextInputSkeleton extends SvelteComponentTyped< export default class TextInputSkeleton extends SvelteComponentTyped<
TextInputSkeletonProps, TextInputSkeletonProps,
{ {
click: WindowEventMap["click"]; click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"]; pointerup: WindowEventMap["pointerup"];
mouseenter: WindowEventMap["mouseenter"]; pointerover: WindowEventMap["pointerover"];
mouseleave: WindowEventMap["mouseleave"]; pointerenter: WindowEventMap["pointerenter"];
pointerleave: WindowEventMap["pointerleave"];
}, },
{} {}
> {} > {}