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

feat!: TextInput v11 Styles (#1889)

Browse source 
* Initial commit

* Fixes [FluidForm] TextInput error icon is misplaced #1667

* Contributes to [TextInput] helperText enhancements #1633

* Adopts Standardize props and events #1621

* Added slots for Standardize props and events #1621

* Added pointer events, updated skeleton TextInput v11 #1888

* Address a bug in the word counter regex

* Update src/TextInput/TextInput.svelte

Correcting type attribute definition for HTML attributes

Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com>

* Update src/TextInput/TextInput.svelte

Correcting type attribute definition for HTML attributes

Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com>

* Update src/TextInput/TextInput.svelte

Explicitly define default value for `size`

Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com>

* Adopted suggested changes

* Updated `TextInput.test`; added forgotten files from previous

---------

Co-authored-by: Samuel Janda <hi@simpleprogramming.com.au>
Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com>
This commit is contained in:
Sam 2024-01-18 02:48:25 +11:00 • committed by Eric Liu
commit 9efe5255d2
9 changed files with 838 additions and 520 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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