Skip to content

Commit

Permalink
chore(components): v11 ComboBox
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregorw
gregorw committed Mar 26, 2023
1 parent d84b8c9 commit 3ae9ee5
Show file tree
Hide file tree
Showing 7 changed files with 20 additions and 20 deletions.
24 changes: 12 additions & 12 deletions COMPONENT_INDEX.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -662,7 +662,7 @@ export interface ComboBoxItem {
| 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 |
| 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; "md" &#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 |
| 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 |
Expand Down Expand Up @@ -1977,17 +1977,17 @@ None.

### Props

| 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 |
| 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 |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | ------------------------------------------ |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#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 |
| 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 |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |

### Slots

Expand Down
4 changes: 2 additions & 2 deletions docs/src/COMPONENT_API.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1515,7 +1515,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the combobox",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"md\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
Expand Down Expand Up @@ -5795,7 +5795,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the list box",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"md\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/ComboBox.svx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ items={[
## Extra-large size

<ComboBox titleText="Contact" placeholder="Select contact method"
size="xl"
size="lg"
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
Expand Down
2 changes: 1 addition & 1 deletion src/ComboBox/ComboBox.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
/**
* Set the size of the combobox
* @type {"sm" | "xl"}
* @type {"sm" | "md" | "lg" }
*/
export let size = undefined;
Expand Down
4 changes: 2 additions & 2 deletions src/ListBox/ListBox.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
/**
* Set the size of the list box
* @type {"sm" | "xl"}
* @type {"sm" | "md" | "lg" }
*/
export let size = undefined;
Expand Down Expand Up @@ -39,7 +39,7 @@
data-invalid="{invalid || undefined}"
class:bx--list-box="{true}"
class:bx--list-box--sm="{size === 'sm'}"
class:bx--list-box--xl="{size === 'xl'}"
class:bx--list-box--lg="{size === 'lg'}"
class:bx--list-box--inline="{type === 'inline'}"
class:bx--list-box--disabled="{disabled}"
class:bx--list-box--expanded="{open}"
Expand Down
2 changes: 1 addition & 1 deletion types/ComboBox/ComboBox.svelte.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export interface ComboBoxProps
* Set the size of the combobox
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "md" | "lg";

/**
* Set to `true` to disable the combobox
Expand Down
2 changes: 1 addition & 1 deletion types/ListBox/ListBox.svelte.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export interface ListBoxProps
* Set the size of the list box
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "md" | "lg";

/**
* Set the type of the list box
Expand Down

0 comments on commit 3ae9ee5

Please sign in to comment.