From d8d16a63d1ea10148c69aef70965753cd756359e Mon Sep 17 00:00:00 2001 From: Samuel Janda Date: Sun, 14 Jan 2024 17:58:26 +1100 Subject: [PATCH] Adopts Standardize props and events #1621 --- COMPONENT_INDEX.md | 79 +++++++++++++------------ docs/src/COMPONENT_API.json | 60 ++++++++++++------- docs/src/pages/components/TextInput.svx | 22 +++---- src/TextInput/TextInput.svelte | 23 +++++-- types/TextInput/TextInput.svelte.d.ts | 33 +++++++---- 5 files changed, 130 insertions(+), 87 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 22c7c8ef..7e3a18d0 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4215,50 +4215,53 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| value | No | let | Yes | null | number | string | "" | Specify the input value
`value` will be set to `null` if `type = "number"` and the value is empty | -| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| disabled | No | let | No | boolean | false | Set to `true` to disable the input | -| counter | No | let | No | "char" | "word" | undefined | Set to "char" to enable display the character counter or "word" to display the word count. | -| helperText | No | let | No | string | "" | Specify the helper text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | -| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | No | let | No | string | "" | Specify the invalid state text | -| labelText | No | let | No | string | "" | Specify the label text | -| light | No | let | No | boolean | false | 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 | -| maxCount | No | let | No | number | undefined | Specify the maximum number of characters/words allowed
This is needed in order for `counter` to display | -| name | No | let | No | string | undefined | Specify a name attribute for the input | -| placeholder | No | let | No | string | "" | Specify the placeholder text | -| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant | -| required | No | let | No | boolean | false | Set to `true` to mark the field as required | -| size | No | let | No | "sm" | "md" | "lg" | undefined | Set the size of the input | -| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | No | let | No | string | "" | Specify the warning state text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| value | No | let | Yes | null | number | string | "" | Specify the input value
`value` will be set to `null` if `type = "number"` and the value is empty | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| counter | No | let | No | -- | undefined | Set to "char" to enable display the character counter or "word" to display the word count. | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| helperText | No | let | No | string | "" | Specify the helper text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| labelText | No | let | No | string | "" | Specify the label text | +| light | No | let | No | boolean | false | 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 | +| maxCount | No | let | No | number | undefined | Specify the maximum number of characters/words allowed
This is needed in order for `counter` to display | +| name | No | let | No | string | undefined | Specify a name attribute for the input | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant | +| required | No | let | No | boolean | false | Set to `true` to mark the field as required | +| size | No | let | No | "sm" | "md" | "lg" | undefined | Set the size of the input | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| labelAttributes | No | let | No | Record | {} | Set HTML attributes on the `label` element | +| inputAttributes | No | let | No | Record | {} | Set HTML attributes on the `input` element | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | +| Slot name | Default | Props | Fallback | +| :--------- | :------ | :---- | :------------------------ | +| helperText | No | -- | {helperText} | +| labelText | No | -- | {labelText} | ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------------------------------- | -| change | dispatched | null | number | string | -| input | dispatched | null | number | string | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| paste | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| paste | forwarded | -- | +| input | dispatched | -- | +| change | dispatched | -- | ## `TextInputSkeleton` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 6c9b933c..fc6a873a 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -12698,11 +12698,9 @@ "filePath": "src/TextInput/TextInput.svelte", "props": [ { - "name": "disabled", + "name": "counter", "kind": "let", - "description": "Set to `true` to disable the input", - "type": "boolean", - "value": "false", + "description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12710,10 +12708,11 @@ "reactive": false }, { - "name": "counter", + "name": "disabled", "kind": "let", - "description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.", - "type": "\"char\" | \"word\"", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12932,10 +12931,40 @@ "isRequired": false, "constant": false, "reactive": false + }, + { + "name": "labelAttributes", + "kind": "let", + "description": "Set HTML attributes on the `label` element", + "type": "Record", + "value": "{}", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "inputAttributes", + "kind": "let", + "description": "Set HTML attributes on the `input` element", + "type": "Record", + "value": "{}", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false } ], "moduleExports": [], "slots": [ + { + "name": "helperText", + "default": false, + "fallback": "{helperText}", + "slot_props": "{}" + }, { "name": "labelText", "default": false, @@ -12944,16 +12973,6 @@ } ], "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" }, @@ -12962,10 +12981,11 @@ { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" }, - { "type": "forwarded", "name": "paste", "element": "input" } + { "type": "forwarded", "name": "paste", "element": "input" }, + { "type": "dispatched", "name": "input" }, + { "type": "dispatched", "name": "change" } ], - "typedefs": [], - "rest_props": { "type": "Element", "name": "input" } + "typedefs": [] }, { "moduleName": "TextInputSkeleton", diff --git a/docs/src/pages/components/TextInput.svx b/docs/src/pages/components/TextInput.svx index ebaf0cae..1022da6f 100644 --- a/docs/src/pages/components/TextInput.svx +++ b/docs/src/pages/components/TextInput.svx @@ -9,35 +9,35 @@ components: ["TextInput", "TextInputSkeleton"] ## Default - + ## With helper text - + ## Hidden label - + ## Light variant - + ## Inline variant - + ## Read-only variant - + ## Large size - + ## Small size - + ## Character Counter @@ -45,15 +45,15 @@ components: ["TextInput", "TextInputSkeleton"] ## Invalid state - + ## Warning state - + ## Disabled state - + ## Skeleton diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte index 7ac95af2..42f316ce 100644 --- a/src/TextInput/TextInput.svelte +++ b/src/TextInput/TextInput.svelte @@ -4,15 +4,15 @@ * @event {null | number | string} input */ - /** Set to `true` to disable the input */ - export let disabled = false; - /** * Set to "char" to enable display the character counter or "word" to display the word count. * @type {"char" | "word"} */ export let counter = undefined; + /** Set to `true` to disable the input */ + export let disabled = false; + /** Specify the helper text */ export let helperText = ""; @@ -86,10 +86,21 @@ /** Specify the warning state text */ export let warnText = ""; + /** + * Set HTML attributes on the `label` element + * @type {Record} + */ + export let labelAttributes = {}; + + /** + * Set HTML attributes on the `input` element + * @type {Record} + */ + export let inputAttributes = {}; + import { createEventDispatcher, getContext } from "svelte"; import WarningFilled from "../icons/WarningFilled.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte"; - import EditOff from "../icons/EditOff.svelte"; const ctx = getContext("Form"); const dispatch = createEventDispatcher(); @@ -154,6 +165,7 @@ class:bx--label--inline--sm="{size === 'sm'}" class:bx--label--inline--md="{size === 'md'}" class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}" + {...labelAttributes} > {labelText} @@ -193,6 +205,7 @@ class:bx--label--inline-md="{inline && size === 'md'}" class:bx--label--inline-lg="{inline && (size === 'lg' || size === 'xl')}" + {...labelAttributes} > {labelText} @@ -266,7 +279,7 @@ class:bx--layout--size-sm="{size === 'sm'}" class:bx--layout--size-md="{size === 'md'}" class:bx--layout--size-lg="{size === 'lg' || size === 'xl'}" - {...$$restProps} + {...inputAttributes} on:change="{onChange}" on:input="{onInput}" on:keydown diff --git a/types/TextInput/TextInput.svelte.d.ts b/types/TextInput/TextInput.svelte.d.ts index 836465ff..bb5c7781 100644 --- a/types/TextInput/TextInput.svelte.d.ts +++ b/types/TextInput/TextInput.svelte.d.ts @@ -1,21 +1,18 @@ import type { SvelteComponentTyped } from "svelte"; -import type { SvelteHTMLElements } from "svelte/elements"; -type RestProps = SvelteHTMLElements["input"]; +export interface TextInputProps { + /** + * Set to "char" to enable display the character counter or "word" to display the word count. + * @default undefined + */ + counter?: undefined; -export interface TextInputProps extends RestProps { /** * Set to `true` to disable the input * @default false */ disabled?: boolean; - /** - * Set to "char" to enable display the character counter or "word" to display the word count. - * @default undefined - */ - counter?: "char" | "word"; - /** * Specify the helper text * @default "" @@ -129,14 +126,22 @@ export interface TextInputProps extends RestProps { */ warnText?: string; - [key: `data-${string}`]: any; + /** + * Set HTML attributes on the `label` element + * @default {} + */ + labelAttributes?: Record; + + /** + * Set HTML attributes on the `input` element + * @default {} + */ + inputAttributes?: Record; } export default class TextInput extends SvelteComponentTyped< TextInputProps, { - change: CustomEvent; - input: CustomEvent; click: WindowEventMap["click"]; mouseover: WindowEventMap["mouseover"]; mouseenter: WindowEventMap["mouseenter"]; @@ -146,6 +151,8 @@ export default class TextInput extends SvelteComponentTyped< focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; paste: DocumentAndElementEventHandlersEventMap["paste"]; + input: CustomEvent; + change: CustomEvent; }, - { labelText: {} } + { helperText: {}; labelText: {} } > {}