mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
fix(text-input): add missing warning field wrapper class
This commit is contained in:
parent
97d3a9f653
commit
ff5921d31c
2 changed files with 7 additions and 2 deletions
|
@ -39,6 +39,10 @@ components: ["TextInput", "TextInputSkeleton"]
|
||||||
|
|
||||||
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
|
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
|
### Warning state
|
||||||
|
|
||||||
|
<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
### Disabled state
|
### Disabled state
|
||||||
|
|
||||||
<TextInput disabled labelText="User name" placeholder="Enter user name..." />
|
<TextInput disabled labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
|
@ -63,8 +63,8 @@
|
||||||
export let inline = false;
|
export let inline = false;
|
||||||
|
|
||||||
import { getContext } from "svelte";
|
import { getContext } from "svelte";
|
||||||
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
|
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
|
||||||
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16";
|
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
|
||||||
|
|
||||||
const ctx = getContext("Form");
|
const ctx = getContext("Form");
|
||||||
|
|
||||||
|
@ -127,6 +127,7 @@
|
||||||
data-invalid="{invalid || undefined}"
|
data-invalid="{invalid || undefined}"
|
||||||
data-warn="{warn || undefined}"
|
data-warn="{warn || undefined}"
|
||||||
class:bx--text-input__field-wrapper="{true}"
|
class:bx--text-input__field-wrapper="{true}"
|
||||||
|
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
|
||||||
>
|
>
|
||||||
{#if invalid}
|
{#if invalid}
|
||||||
<WarningFilled16 class="bx--text-input__invalid-icon" />
|
<WarningFilled16 class="bx--text-input__invalid-icon" />
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue