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

chore: v11 ComboBox

Browse source 
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
This commit is contained in:
Gregor Wassmann 2023-03-26 23:02:25 +02:00 • committed by Enrico Sacchetti
commit 8cf61bd0f7
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
8 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
COMPONENT_INDEX.md
View file

@ -662,7 +662,7 @@ export interface ComboBoxItem {
| items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items | | items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item | | itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Set the size of the combobox |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox | | titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
@ -1991,7 +1991,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ | | :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the list box | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Set the size of the list box |
| type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Set the type of the list box | | type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Set the type of the list box |
| open | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to open the list box | | open | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to open the list box |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |

4
docs/src/COMPONENT_API.json
View file

@ -1515,7 +1515,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the combobox", "description": "Set the size of the combobox",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\" ",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -5863,7 +5863,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the list box", "description": "Set the size of the list box",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\" ",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

4
docs/src/pages/components/ComboBox.svx
View file

@ -80,10 +80,10 @@ items={[
{id: "2", text: "Fax"} {id: "2", text: "Fax"}
]} /> ]} />
## Extra-large size ## Large size
<ComboBox titleText="Contact" placeholder="Select contact method" <ComboBox titleText="Contact" placeholder="Select contact method"
size="xl" size="lg"
items={[ items={[
{id: "0", text: "Slack"}, {id: "0", text: "Slack"},
{id: "1", text: "Email"}, {id: "1", text: "Email"},

2
src/ComboBox/ComboBox.svelte
View file

@ -35,7 +35,7 @@
/** /**
* Set the size of the combobox * Set the size of the combobox
* @type {"sm" | "xl"} * @type {"sm" | "lg" }
*/ */
export let size = undefined; export let size = undefined;

4
src/ListBox/ListBox.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Set the size of the list box * Set the size of the list box
* @type {"sm" | "xl"} * @type {"sm" | "lg" }
*/ */
export let size = undefined; export let size = undefined;
@ -39,7 +39,7 @@
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
class:bx--list-box="{true}" class:bx--list-box="{true}"
class:bx--list-box--sm="{size === 'sm'}" class:bx--list-box--sm="{size === 'sm'}"
class:bx--list-box--xl="{size === 'xl'}" class:bx--list-box--lg="{size === 'lg' || size === 'xl'}"
class:bx--list-box--inline="{type === 'inline'}" class:bx--list-box--inline="{type === 'inline'}"
class:bx--list-box--disabled="{disabled}" class:bx--list-box--disabled="{disabled}"
class:bx--list-box--expanded="{open}" class:bx--list-box--expanded="{open}"

2
tests/ComboBox.test.svelte
View file

@ -55,7 +55,7 @@
<ComboBox <ComboBox
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
size="xl" size="lg"
items="{items}" items="{items}"
/> />

2
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -46,7 +46,7 @@ export interface ComboBoxProps extends RestProps {
* Set the size of the combobox * Set the size of the combobox
* @default undefined * @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "lg";
/** /**
* Set to `true` to disable the combobox * Set to `true` to disable the combobox

2
types/ListBox/ListBox.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface ListBoxProps extends RestProps {
* Set the size of the list box * Set the size of the list box
* @default undefined * @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "lg";
/** /**
* Set the type of the list box * Set the type of the list box