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

Alignment with Carbon version 10.29 (#529)

Browse source 
* chore: patch prettier-plugin-svelte

* docs(tag): add filterable small tag example

* feat(ui-shell): add SideNavDivider

* feat(combo-box): support warning state

* docs(combo-box): add invalid state example

* fix(progress-step): add title to warning icon

* docs(progress-indicator): add invalid step example

* docs(progress-indicator): add disabled steps example

* feat(truncate): add text truncation component and action

* docs(radio-tile): fix light variant example

* fix(side-effects): add pre-compiled CSS to library side effects

* refactor(css): use shorthand scss imports, add comments

* refactor(truncate): rename "direction" prop to "clamp"

* chore(deps-dev): bump carbon-components to v10.29.0

* feat(combo-box): add direction prop

* feat(dropdown): add direction prop

* feat(multi-select): add direction prop
This commit is contained in:
Eric Liu 2021-02-19 16:08:16 -08:00 • committed by GitHub
commit 14e714fa61
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
48 changed files with 729 additions and 277 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/ComboBox/ComboBox.svelte
View file

@ -22,6 +22,12 @@
/** Specify the selected combobox value */
export let value = "";
/**
* Specify the direction of the combobox dropdown menu
* @type {"bottom" | "top"}
*/
export let direction = "bottom";
/**
* Set the size of the combobox
* @type {"sm" | "xl"}
@ -46,6 +52,12 @@
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/** Set to `true` to indicate an warning state */
export let warn = false;
/** Specify the warning state text */
export let warnText = "";
/** Set to `true` to enable the light variant */
export let light = false;
@ -84,6 +96,7 @@
import { createEventDispatcher, afterUpdate, tick } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
import ListBox from "../ListBox/ListBox.svelte";
import ListBoxField from "../ListBox/ListBoxField.svelte";
import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
@ -97,8 +110,8 @@
let inputValue = "";
let highlightedIndex = -1;
function change(direction) {
let index = highlightedIndex + direction;
function change(dir) {
let index = highlightedIndex + dir;
if (index < 0) {
index = items.length - 1;
@ -158,7 +171,8 @@
</label>
{/if}
<ListBox
class="bx--combo-box"
class="bx--combo-box {direction === 'top' &&
'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
id="{comboId}"
aria-label="{ariaLabel}"
disabled="{disabled}"
@ -167,6 +181,8 @@
open="{open}"
light="{light}"
size="{size}"
warn="{warn}"
warnText="{warnText}"
>
<ListBoxField
role="button"
@ -236,6 +252,11 @@
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/>
{/if}
{#if inputValue}
<ListBoxSelection
on:clear
@ -286,7 +307,7 @@
</ListBoxMenu>
{/if}
</ListBox>
{#if !invalid && helperText}
{#if !invalid && helperText && !warn}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"