diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 8f706c7b79..e7d55a36a4 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3208,12 +3208,14 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------------------------------- | -| value | No | let | No | string | number | "" | Specify the option value | -| text | No | let | No | string | "" | Specify the option text | -| hidden | No | let | No | boolean | false | Set to `true` to hide the option | -| disabled | No | let | No | boolean | false | Set to `true` to disable the option | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- | +| value | No | let | No | string | number | "" | Specify the option value | +| text | No | let | No | string | "" | Specify the option text | +| hidden | No | let | No | boolean | false | Set to `true` to hide the option | +| disabled | No | let | No | boolean | false | Set to `true` to disable the option | +| class | No | let | No | string | undefined | Specify the class of the `option` element | +| style | No | let | No | string | undefined | Specify the style of the `option` element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index c7102e9077..dbc78008e9 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -10452,6 +10452,28 @@ "isRequired": false, "constant": false, "reactive": false + }, + { + "name": "class", + "kind": "let", + "description": "Specify the class of the `option` element", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "style", + "kind": "let", + "description": "Specify the style of the `option` element", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false } ], "moduleExports": [], diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte index e009ba6247..a33049248c 100644 --- a/src/Select/SelectItem.svelte +++ b/src/Select/SelectItem.svelte @@ -14,6 +14,20 @@ /** Set to `true` to disable the option */ export let disabled = false; + let className = undefined; + + /** + * Specify the class of the `option` element + * @type {string} + */ + export { className as class }; + + /** + * Specify the style of the `option` element + * @type {string} + */ + export let style = undefined; + import { getContext, onMount } from "svelte"; const id = "ccs-" + Math.random().toString(36); @@ -38,8 +52,8 @@ hidden="{hidden}" selected="{selected}" class:bx--select-option="{true}" - class="{$$restProps.class}" - style="{$$restProps.style}" + class="{className}" + style="{style}" > {text || value} diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte index d8421e0a7b..cc81277745 100644 --- a/tests/Select.test.svelte +++ b/tests/Select.test.svelte @@ -8,7 +8,7 @@