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

Alignment with Carbon version 10.28 (#505)

Browse source 
* chore(deps-dev): remove @carbon/themes

* chore(deps-dev): bump devDependencies

* fix(tabs): forward click event to Tab

* feat(toggle): dispatch toggle event

* feat(tag): dispatch close event

* feat(tooltip-icon): make tooltipText slottable

* feat(dropdown): add hideLabel prop

* docs(select): add "Hidden label" example

* refactor(modal): use class directive

* feat(modal): dispatch transitionend event

* chore(deps-dev): upgrade carbon-components to 10.28.0-rc.0

* feat(date-picker): add warn state

* feat(tag): support small size variant

* fix(search): add semantic role

* feat(toolbar-search): add disabled state

* fix(composed-modal): add aria-label prop, update header semantic tags

* chore(deps-dev): upgrade carbon-components to v10.28

* docs(overflow-menu): add light variant example

* docs(link): document OutboundLink in Component API

* chore(tooltip-icon): rename slot to "tooltipText"

* docs(component-api): wrap code blocks to minimize width

* docs(aspect-ratio): remove inline outline style

* fix(tab): do not trigger focus when mounting

* docs(tabs): add reactive example

Closes #438
This commit is contained in:
Eric Liu 2021-02-05 05:59:10 -08:00 • committed by GitHub
commit 7cd3723960
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 549 additions and 240 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>