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

feat(multi-select): support warning state

Browse source
This commit is contained in:
Eric Liu 2021-01-23 06:06:07 -08:00
commit ae7616edf8
5 changed files with 75 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -2158,6 +2158,8 @@ export interface MultiSelectItem {
| useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |

20
docs/src/COMPONENT_API.json
View file

@ -5299,6 +5299,26 @@
"constant": false,
"reactive": false
},
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "helperText",
"kind": "let",

24
docs/src/pages/components/MultiSelect.svx
View file

@ -89,4 +89,28 @@ Use the `itemToString` prop to format the display of individual items.
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Invalid state
<MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Warning state
<MultiSelect warn warnText="One or more contact methods are not associated with your account" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Disabled state
<MultiSelect disabled titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>

20
src/MultiSelect/MultiSelect.svelte
View file

@ -90,6 +90,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 = "";
@ -112,8 +118,9 @@
*/
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import { Checkbox } from "../Checkbox";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
import Checkbox from "../Checkbox/Checkbox.svelte";
import {
ListBox,
ListBoxField,
@ -243,6 +250,8 @@
open="{open}"
light="{light}"
size="{size}"
warn="{warn}"
warnText="{warnText}"
class="bx--multi-select {filterable && 'bx--combo-box'}
{filterable && 'bx--multi-select--filterable'}
{invalid && 'bx--multi-select--invalid'}
@ -252,6 +261,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}
<ListBoxField
role="button"
tabindex="0"
@ -415,7 +429,7 @@
</ListBoxMenu>
{/if}
</ListBox>
{#if !inline && !invalid && helperText}
{#if !inline && !invalid && !warn && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"

12
types/MultiSelect/MultiSelect.d.ts vendored
View file

@ -130,6 +130,18 @@ export interface MultiSelectProps extends svelte.JSX.HTMLAttributes<HTMLElementT
*/
invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/**
* Specify the helper text
* @default ""