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

feat(multi-select): add hideLabel prop

Browse source
This commit is contained in:
metonym 2021-10-14 15:36:26 -07:00
commit b2812a1853
6 changed files with 31 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -2434,6 +2434,7 @@ export interface MultiSelectItem {
| 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 |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the select |

11
docs/src/COMPONENT_API.json
View file

@ -6569,6 +6569,17 @@
"constant": false,
"reactive": false
},
{
"name": "hideLabel",
"kind": "let",
"description": "Set to `true` to visually hide the label text",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",

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

@ -71,6 +71,14 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "2", text: "Fax"}]}"
/>
### Hidden label
<MultiSelect titleText="Contact" label="Select contact methods..." hideLabel
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Light variant
<MultiSelect light titleText="Contact" label="Select contact methods..."
@ -103,8 +111,6 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "2", text: "Fax"}]}"
/>
### Invalid state
<MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."

4
src/MultiSelect/MultiSelect.svelte
View file

@ -116,6 +116,9 @@
/** Specify the list box label */
export let label = "";
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/** Set an id for the list box component */
export let id = "ccs-" + Math.random().toString(36);
@ -259,6 +262,7 @@
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}"
>
{titleText}
</label>

1
tests/MultiSelect.test.svelte
View file

@ -6,6 +6,7 @@
direction="top"
titleText="Contact"
label="Select contact methods..."
hideLabel
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },

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

@ -164,6 +164,12 @@ export interface MultiSelectProps
*/
label?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Set an id for the list box component
* @default "ccs-" + Math.random().toString(36)