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

docs: document "sm", "xl" field sizes for MultiSelect, Select

Browse source
This commit is contained in:
Eric Liu 2020-10-26 14:32:38 -07:00
commit a3ed75fea9
4 changed files with 142 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

34
COMPONENT_INDEX.md
View file

@ -989,23 +989,23 @@ import { DataTable } from "carbon-components-svelte";
### Props ### Props
| Prop name | Type | Default value | Description | | Prop name | Type | Default value | Description |
| :------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- | | :------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- |
| headers | <code>{key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]</code> | `[]` | Specify the data table headers. | | headers | <code>{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]</code> | `[]` | Specify the data table headers. |
| rows | <code>Object[]</code> | `[]` | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. | | rows | <code>Object[]</code> | `[]` | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. |
| size | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the data table. | | size | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the data table. |
| title | <code>string</code> | `""` | Specify the title of the data table. | | title | <code>string</code> | `""` | Specify the title of the data table. |
| description | <code>string</code> | `""` | Specify the description of the data table. | | description | <code>string</code> | `""` | Specify the description of the data table. |
| zebra | <code>boolean</code> | `false` | Set to `true` to use zebra styles. | | zebra | <code>boolean</code> | `false` | Set to `true` to use zebra styles. |
| sortable | <code>boolean</code> | `false` | Set to `true` for the sortable variant. | | sortable | <code>boolean</code> | `false` | Set to `true` for the sortable variant. |
| expandable | <code>boolean</code> | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. | | expandable | <code>boolean</code> | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. |
| batchExpansion | <code>boolean</code> | `false` | Set to `true` to enable batch expansion. | | batchExpansion | <code>boolean</code> | `false` | Set to `true` to enable batch expansion. |
| expandedRowIds | <code>string[]</code> | `[]` | Specify the row ids to be expanded. | | expandedRowIds | <code>string[]</code> | `[]` | Specify the row ids to be expanded. |
| radio | <code>boolean</code> | `false` | Set to `true` for the radio selection variant. | | radio | <code>boolean</code> | `false` | Set to `true` for the radio selection variant. |
| selectable | <code>boolean</code> | `false` | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. | | selectable | <code>boolean</code> | `false` | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. |
| batchSelection | <code>boolean</code> | `false` | Set to `true` to enable batch selection. | | batchSelection | <code>boolean</code> | `false` | Set to `true` to enable batch selection. |
| selectedRowIds | <code>string[]</code> | `[]` | Specify the row ids to be selected. | | selectedRowIds | <code>string[]</code> | `[]` | Specify the row ids to be selected. |
| stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. | | stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. |
### Slots ### Slots

182
docs/src/PUBLIC_API.json
View file

@ -2532,7 +2532,7 @@
{ {
"kind": "let", "kind": "let",
"value": "[]", "value": "[]",
"type": "{key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]", "type": "{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]",
"description": "Specify the data table headers" "description": "Specify the data table headers"
} }
], ],
@ -2677,14 +2677,14 @@
{ {
"attributes": [ "attributes": [
{ {
"start": 7728, "start": 7729,
"end": 7746, "end": 7747,
"type": "Attribute", "type": "Attribute",
"name": "name", "name": "name",
"value": [ "value": [
{ {
"start": 7734, "start": 7735,
"end": 7745, "end": 7746,
"type": "Text", "type": "Text",
"raw": "cell-header", "raw": "cell-header",
"data": "cell-header" "data": "cell-header"
@ -2692,19 +2692,19 @@
] ]
}, },
{ {
"start": 7747, "start": 7748,
"end": 7764, "end": 7765,
"type": "Attribute", "type": "Attribute",
"name": "header", "name": "header",
"value": [ "value": [
{ {
"start": 7755, "start": 7756,
"end": 7763, "end": 7764,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 7756, "start": 7757,
"end": 7762, "end": 7763,
"loc": { "loc": {
"start": { "start": {
"line": 268, "line": 268,
@ -2723,13 +2723,13 @@
], ],
"children": [ "children": [
{ {
"start": 7765, "start": 7766,
"end": 7779, "end": 7780,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 7766, "start": 7767,
"end": 7778, "end": 7779,
"loc": { "loc": {
"start": { "start": {
"line": 268, "line": 268,
@ -2742,8 +2742,8 @@
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 7766, "start": 7767,
"end": 7772, "end": 7773,
"loc": { "loc": {
"start": { "start": {
"line": 268, "line": 268,
@ -2758,8 +2758,8 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 7773, "start": 7774,
"end": 7778, "end": 7779,
"loc": { "loc": {
"start": { "start": {
"line": 268, "line": 268,
@ -2786,14 +2786,14 @@
{ {
"attributes": [ "attributes": [
{ {
"start": 11125, "start": 11126,
"end": 11136, "end": 11137,
"type": "Attribute", "type": "Attribute",
"name": "name", "name": "name",
"value": [ "value": [
{ {
"start": 11131, "start": 11132,
"end": 11135, "end": 11136,
"type": "Text", "type": "Text",
"raw": "cell", "raw": "cell",
"data": "cell" "data": "cell"
@ -2801,19 +2801,19 @@
] ]
}, },
{ {
"start": 11137, "start": 11138,
"end": 11148, "end": 11149,
"type": "Attribute", "type": "Attribute",
"name": "row", "name": "row",
"value": [ "value": [
{ {
"start": 11142, "start": 11143,
"end": 11147, "end": 11148,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 11143, "start": 11144,
"end": 11146, "end": 11147,
"loc": { "loc": {
"start": { "start": {
"line": 357, "line": 357,
@ -2830,19 +2830,19 @@
] ]
}, },
{ {
"start": 11149, "start": 11150,
"end": 11162, "end": 11163,
"type": "Attribute", "type": "Attribute",
"name": "cell", "name": "cell",
"value": [ "value": [
{ {
"start": 11155, "start": 11156,
"end": 11161, "end": 11162,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 11156, "start": 11157,
"end": 11160, "end": 11161,
"loc": { "loc": {
"start": { "start": {
"line": 357, "line": 357,
@ -2861,20 +2861,20 @@
], ],
"children": [ "children": [
{ {
"start": 11163, "start": 11164,
"end": 11182, "end": 11183,
"type": "Text", "type": "Text",
"raw": "\n ", "raw": "\n ",
"data": "\n " "data": "\n "
}, },
{ {
"start": 11182, "start": 11183,
"end": 11248, "end": 11249,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "ConditionalExpression", "type": "ConditionalExpression",
"start": 11183, "start": 11184,
"end": 11247, "end": 11248,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -2887,8 +2887,8 @@
}, },
"test": { "test": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 11183, "start": 11184,
"end": 11201, "end": 11202,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -2901,8 +2901,8 @@
}, },
"object": { "object": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 11183, "start": 11184,
"end": 11193, "end": 11194,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -2915,8 +2915,8 @@
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 11183, "start": 11184,
"end": 11190, "end": 11191,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -2931,8 +2931,8 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 11191, "start": 11192,
"end": 11192, "end": 11193,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -2950,8 +2950,8 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 11194, "start": 11195,
"end": 11201, "end": 11202,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -2969,8 +2969,8 @@
}, },
"consequent": { "consequent": {
"type": "CallExpression", "type": "CallExpression",
"start": 11204, "start": 11205,
"end": 11234, "end": 11235,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -2983,8 +2983,8 @@
}, },
"callee": { "callee": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 11204, "start": 11205,
"end": 11222, "end": 11223,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -2997,8 +2997,8 @@
}, },
"object": { "object": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 11204, "start": 11205,
"end": 11214, "end": 11215,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3011,8 +3011,8 @@
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 11204, "start": 11205,
"end": 11211, "end": 11212,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3027,8 +3027,8 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 11212, "start": 11213,
"end": 11213, "end": 11214,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3046,8 +3046,8 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 11215, "start": 11216,
"end": 11222, "end": 11223,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3066,8 +3066,8 @@
"arguments": [ "arguments": [
{ {
"type": "MemberExpression", "type": "MemberExpression",
"start": 11223, "start": 11224,
"end": 11233, "end": 11234,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3080,8 +3080,8 @@
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 11223, "start": 11224,
"end": 11227, "end": 11228,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3096,8 +3096,8 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 11228, "start": 11229,
"end": 11233, "end": 11234,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3118,8 +3118,8 @@
}, },
"alternate": { "alternate": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 11237, "start": 11238,
"end": 11247, "end": 11248,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3132,8 +3132,8 @@
}, },
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 11237, "start": 11238,
"end": 11241, "end": 11242,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3148,8 +3148,8 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 11242, "start": 11243,
"end": 11247, "end": 11248,
"loc": { "loc": {
"start": { "start": {
"line": 358, "line": 358,
@ -3168,8 +3168,8 @@
} }
}, },
{ {
"start": 11248, "start": 11249,
"end": 11265, "end": 11266,
"type": "Text", "type": "Text",
"raw": "\n ", "raw": "\n ",
"data": "\n " "data": "\n "
@ -3184,14 +3184,14 @@
{ {
"attributes": [ "attributes": [
{ {
"start": 11821, "start": 11822,
"end": 11840, "end": 11841,
"type": "Attribute", "type": "Attribute",
"name": "name", "name": "name",
"value": [ "value": [
{ {
"start": 11827, "start": 11828,
"end": 11839, "end": 11840,
"type": "Text", "type": "Text",
"raw": "expanded-row", "raw": "expanded-row",
"data": "expanded-row" "data": "expanded-row"
@ -3199,19 +3199,19 @@
] ]
}, },
{ {
"start": 11841, "start": 11842,
"end": 11852, "end": 11853,
"type": "Attribute", "type": "Attribute",
"name": "row", "name": "row",
"value": [ "value": [
{ {
"start": 11846, "start": 11847,
"end": 11851, "end": 11852,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 11847, "start": 11848,
"end": 11850, "end": 11851,
"loc": { "loc": {
"start": { "start": {
"line": 378, "line": 378,
@ -6787,8 +6787,8 @@
[ [
"keydown", "keydown",
{ {
"start": 1230, "start": 1252,
"end": 1240, "end": 1262,
"type": "EventHandler", "type": "EventHandler",
"name": "keydown", "name": "keydown",
"modifiers": [], "modifiers": [],
@ -6798,8 +6798,8 @@
[ [
"click", "click",
{ {
"start": 1336, "start": 1358,
"end": 1375, "end": 1397,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": ["preventDefault", "stopPropagation"], "modifiers": ["preventDefault", "stopPropagation"],

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

@ -40,6 +40,22 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
{id: "2", text: "Fax"}]}" {id: "2", text: "Fax"}]}"
/> />
### Extra-large size
<MultiSelect size="xl" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Small size
<MultiSelect size="sm" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Filterable ### Filterable
<MultiSelect filterable titleText="Contact" placeholder="Filter contact methods..." <MultiSelect filterable titleText="Contact" placeholder="Filter contact methods..."

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

@ -48,6 +48,24 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
### Extra-large size
<Select size="xl" 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>
### Small size
<Select size="sm" 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 ### Disabled
<Select disabled labelText="Carbon theme" selected="g10" > <Select disabled labelText="Carbon theme" selected="g10" >