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

feat(select): add warning state

Browse source
This commit is contained in:
Eric Y Liu 2021-03-19 05:47:22 -07:00
commit be30b0a019
5 changed files with 62 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/Select/Select.svelte
View file

@ -39,6 +39,12 @@
/** Specify the invalid state text */
export let invalidText = "";
/** Set to `true` to indicate an warning state */
export let warn = false;
/** Specify the warning state text */
export let warnText = "";
/** Specify the helper text */
export let helperText = "";
@ -58,6 +64,7 @@
import { writable } from "svelte/store";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);
@ -80,6 +87,7 @@
class:bx--select--light="{light}"
class:bx--select--invalid="{invalid}"
class:bx--select--disabled="{disabled}"
class:bx--select--warning="{warn}"
>
{#if !noLabel}
<label
@ -158,6 +166,11 @@
{#if invalid}
<WarningFilled16 class="bx--select__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--select__invalid-icon bx--select__invalid-icon--warning"
/>
{/if}
</div>
{#if !invalid && helperText}
<div
@ -172,6 +185,11 @@
{invalidText}
</div>
{/if}
{#if !invalid && warn}
<div id="{errorId}" class:bx--form-requirement="{true}">
{warnText}
</div>
{/if}
{/if}
</div>
</div>