feat!: TextInput v11 Styles (#1889)

* 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 <[email protected]> * Update src/TextInput/TextInput.svelte Correcting type attribute definition for HTML attributes Co-authored-by: Enrico Sacchetti <[email protected]> * Update src/TextInput/TextInput.svelte Explicitly define default value for `size` Co-authored-by: Enrico Sacchetti <[email protected]> * Adopted suggested changes * Updated `TextInput.test`; added forgotten files from previous --------- Co-authored-by: Samuel Janda <[email protected]> Co-authored-by: Enrico Sacchetti <[email protected]>
carbon-design-system · Jan 17, 2024 · c436dbd · c436dbd
1 parent 559701e
commit c436dbd
Show file tree

Hide file tree

Showing 9 changed files with 806 additions and 488 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
diff --git a/docs/src/pages/components/TextInput.svx b/docs/src/pages/components/TextInput.svx
@@ -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