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(dropdown): support warning state

Browse source
This commit is contained in:
Eric Liu 2021-01-23 05:47:26 -08:00
commit 038dd3ad82
8 changed files with 112 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -983,6 +983,8 @@ export interface DropdownItem {
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| 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> | -- | Specify the list box label |
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | -- | Override the default translation ids |
@ -1234,7 +1236,9 @@ None.
### Events
None.
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| submit | forwarded | -- |
## `Form`
@ -1807,6 +1811,8 @@ None.
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box |
| 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 |
### Slots

42
docs/src/COMPONENT_API.json
View file

@ -1125,6 +1125,26 @@
"isFunction": false,
"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
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@ -3799,6 +3819,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",
@ -4506,7 +4546,7 @@
"filePath": "/src/FluidForm/FluidForm.svelte",
"props": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"events": [{ "type": "forwarded", "name": "submit", "element": "Form" }],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Form" }
},

12
docs/src/pages/components/Dropdown.svx
View file

@ -51,6 +51,18 @@ Use the `itemToString` prop to format the display of individual items.
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Invalid state
<Dropdown invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Warning state
<Dropdown warn warnText="This contact method is not associated with your account" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Disabled state
<Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},

21
src/Dropdown/Dropdown.svelte
View file

@ -54,6 +54,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 = "";
@ -82,7 +88,8 @@
export let ref = null;
import { createEventDispatcher } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
import {
ListBox,
ListBoxMenu,
@ -148,8 +155,7 @@
id="{id}"
name="{name}"
aria-label="{$$props['aria-label']}"
class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
{open && 'bx--dropdown--open'}
class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid && warn && 'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'}
{inline && 'bx--dropdown--inline'}
@ -163,10 +169,17 @@
invalid="{invalid}"
invalidText="{invalidText}"
light="{light}"
warn="{warn}"
warnText="{warnText}"
>
{#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}
<button
bind:this="{ref}"
class:bx--list-box__field="{true}"
@ -220,7 +233,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}"

10
src/ListBox/ListBox.svelte
View file

@ -25,6 +25,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 = "";
</script>
<div
@ -38,6 +44,7 @@
class:bx--list-box--disabled="{disabled}"
class:bx--list-box--expanded="{open}"
class:bx--list-box--light="{light}"
class:bx--list-box--warning="{!invalid && warn}"
{...$$restProps}
on:keydown
on:keydown="{(e) => {
@ -52,3 +59,6 @@
{#if invalid}
<div class:bx--form-requirement="{true}">{invalidText}</div>
{/if}
{#if !invalid && warn}
<div class:bx--form-requirement="{true}">{warnText}</div>
{/if}

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

@ -81,6 +81,18 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes<HTMLElementTagN
*/
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 ""

1
types/FluidForm/FluidForm.d.ts vendored
View file

@ -8,5 +8,6 @@ export default class FluidForm {
default: {};
};
$on(eventname: "submit", cb: (event: WindowEventMap["submit"]) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}

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

@ -41,6 +41,18 @@ export interface ListBoxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
* @default ""
*/
invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
}
export default class ListBox {