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(select): add warning state

Browse source
This commit is contained in:
Eric Y Liu 2021-03-19 05:47:22 -07:00
commit be30b0a019
5 changed files with 62 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -2920,6 +2920,8 @@ None.
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the select element |
| 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 |
| noLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to not render a label |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |

20
docs/src/COMPONENT_API.json
View file

@ -7638,6 +7638,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",

11
docs/src/pages/components/Select.svx
View file

@ -75,7 +75,16 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g100" text="Gray 100" />
</Select>
### Disabled
### Warning state
<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Disabled state
<Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />

18
src/Select/Select.svelte
View file

@ -39,6 +39,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 = "";
@ -58,6 +64,7 @@
import { writable } from "svelte/store";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);
@ -80,6 +87,7 @@
class:bx--select--light="{light}"
class:bx--select--invalid="{invalid}"
class:bx--select--disabled="{disabled}"
class:bx--select--warning="{warn}"
>
{#if !noLabel}
<label
@ -158,6 +166,11 @@
{#if invalid}
<WarningFilled16 class="bx--select__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--select__invalid-icon bx--select__invalid-icon--warning"
/>
{/if}
</div>
{#if !invalid && helperText}
<div
@ -172,6 +185,11 @@
{invalidText}
</div>
{/if}
{#if !invalid && warn}
<div id="{errorId}" class:bx--form-requirement="{true}">
{warnText}
</div>
{/if}
{/if}
</div>
</div>

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

@ -54,6 +54,18 @@ export interface SelectProps
*/
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 ""