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(text-input): add warn prop

Browse source
This commit is contained in:
josefaidt 2020-09-22 11:50:21 -05:00
commit 373fbde4e1
2 changed files with 28 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/TextInput/TextInput.svelte
View file

@ -77,6 +77,18 @@
*/
export let invalidText = "";
/**
* Set to `true` to indicate an warning state
* @type {boolean} [warn=false]
*/
export let warn = false;
/**
* Specify the warning state text
* @type {string} [invalidText=""]
*/
export let warnText = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
@ -90,8 +102,10 @@
export let required = false;
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16";
$: errorId = `error-${id}`;
$: warnId = `warn-${id}`;
</script>
<div
@ -113,10 +127,16 @@
{/if}
<div
data-invalid="{invalid || undefined}"
data-warn="{warn || undefined}"
class:bx--text-input__field-wrapper="{true}">
{#if invalid}
<WarningFilled16 class="bx--text-input__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--text-input__invalid-icon
bx--text-input__invalid-icon--warning" />
{/if}
<input
bind:this="{ref}"
data-invalid="{invalid || undefined}"
@ -152,4 +172,7 @@
{#if invalid}
<div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
{/if}
{#if !invalid && warn}
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
{/if}
</div>