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(date-picker): add warn state

Browse source
This commit is contained in:
Eric Liu 2021-02-03 15:57:00 -08:00
commit 6f7acd224f
5 changed files with 70 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/DatePicker/DatePickerInput.svelte
View file

@ -35,6 +35,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 = "";
/**
* Set a name for the input element
* @type {string}
@ -45,7 +51,9 @@
export let ref = null;
import { getContext, onMount } from "svelte";
import Calendar16 from "carbon-icons-svelte/lib/Calendar16";
import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
const {
range,
@ -81,7 +89,11 @@
{labelText}
</label>
{/if}
<div class:bx--date-picker-input__wrapper="{true}">
<div
class:bx--date-picker-input__wrapper="{true}"
class:bx--date-picker-input__wrapper--invalid="{invalid}"
class:bx--date-picker-input__wrapper--warn="{warn}"
>
<input
bind:this="{ref}"
data-invalid="{invalid || undefined}"
@ -93,6 +105,7 @@
pattern="{pattern}"
disabled="{disabled}"
class:bx--date-picker__input="{true}"
class:bx--date-picker__input--invalid="{invalid}"
class="{size && `bx--date-picker__input--${size}`}"
on:input
on:input="{({ target }) => {
@ -112,6 +125,18 @@
blurInput(relatedTarget);
}}"
/>
{#if !$hasCalendar}
{#if invalid}
<WarningFilled16
class="bx--date-picker__icon bx--date-picker__icon--invalid"
/>
{/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--date-picker__icon bx--date-picker__icon--warn"
/>
{/if}
{/if}
{#if $hasCalendar}
<Calendar16
role="img"
@ -125,4 +150,7 @@
{#if invalid}
<div class:bx--form-requirement="{true}">{invalidText}</div>
{/if}
{#if !invalid && warn}
<div class:bx--form-requirement="{true}">{warnText}</div>
{/if}
</div>