fix(select-item): export class and style props (#1840)

Closes #1839
carbon-design-system · Nov 8, 2023 · a9460e9 · a9460e9
1 parent 8d5ef9c
commit a9460e9
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 9 deletions.
diff --git 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       | <code>let</code> | No       | <code>string &#124; number</code> | <code>""</code>    | Specify the option value            |
-| text      | No       | <code>let</code> | No       | <code>string</code>               | <code>""</code>    | Specify the option text             |
-| hidden    | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code> | Set to `true` to hide the option    |
-| disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code> | Set to `true` to disable the option |
+| Prop name | Required | Kind             | Reactive | Type                              | Default value          | Description                               |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- |
+| value     | No       | <code>let</code> | No       | <code>string &#124; number</code> | <code>""</code>        | Specify the option value                  |
+| text      | No       | <code>let</code> | No       | <code>string</code>               | <code>""</code>        | Specify the option text                   |
+| hidden    | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to hide the option          |
+| disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to disable the option       |
+| class     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the class of the `option` element |
+| style     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the style of the `option` element |
 
 ### Slots
 

diff --git 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
@@ -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}
 </option>
diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <Select labelText="Carbon theme" selected="g10">
-  <SelectItem value="white" text="White" />
+  <SelectItem value="white" text="White" class="" style="" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />

diff --git a/types/Select/SelectItem.svelte.d.ts b/types/Select/SelectItem.svelte.d.ts
@@ -24,6 +24,18 @@ export interface SelectItemProps {
    * @default false
    */
   disabled?: boolean;
+
+  /**
+   * Specify the class of the `option` element
+   * @default undefined
+   */
+  class?: string;
+
+  /**
+   * Specify the style of the `option` element
+   * @default undefined
+   */
+  style?: string;
 }
 
 export default class SelectItem extends SvelteComponentTyped<