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 PasswordInput

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-28 21:52:56 +02:00 • committed by Enrico Sacchetti
commit a583453436
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
6 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -2755,7 +2755,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 |
| type | No | <code>let</code> | Yes | <code>"text" &#124; "password"</code> | <code>"password"</code> | Set to `"text"` to toggle the password visibility | | type | No | <code>let</code> | Yes | <code>"text" &#124; "password"</code> | <code>"password"</code> | Set to `"text"` to toggle the password visibility |
| value | No | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the input value | | value | No | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the input value |
| 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 |
| hidePasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Hide password"</code> | Specify the hide password label text | | hidePasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Hide password"</code> | Specify the hide password label text |
| showPasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Show password"</code> | Specify the show password label text | | showPasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Show password"</code> | Specify the show password label text |

2
docs/src/COMPONENT_API.json
View file

@ -8635,7 +8635,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/PasswordInput.svx
View file

@ -31,9 +31,9 @@ Set prop `type` to `"text"` to toggle password visibility.
<PasswordInput inline labelText="Password" placeholder="Enter password..." /> <PasswordInput inline labelText="Password" placeholder="Enter password..." />
## Extra-large size ## Large size
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." /> <PasswordInput size="lg" labelText="Password" placeholder="Enter password..." />
## Small size ## Small size

8
src/TextInput/PasswordInput.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* 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;
@ -116,7 +116,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="{inline && size === 'sm'}" class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}" class:bx--label--inline--lg="{inline && (size === 'lg' || size === 'xl')}"
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
@ -141,7 +141,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="{inline && size === 'sm'}" class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}" class:bx--label--inline--lg="{inline && (size === 'lg' || size === 'xl')}"
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
@ -189,7 +189,7 @@
class:bx--text-input--invalid="{invalid}" class:bx--text-input--invalid="{invalid}"
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 on:change
on:input on:input

2
tests/PasswordInput.test.svelte
View file

@ -16,7 +16,7 @@
<PasswordInput light labelText="Password" placeholder="Enter password..." /> <PasswordInput light labelText="Password" placeholder="Enter password..." />
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." /> <PasswordInput size="lg" labelText="Password" placeholder="Enter password..." />
<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." /> <PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />

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

@ -8,7 +8,7 @@ export interface PasswordInputProps 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