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

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

Browse source 
Closes #1839
This commit is contained in:
Eric Liu 2023-11-07 18:58:45 -08:00 • committed by GitHub
commit a9460e944d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 59 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

14
COMPONENT_INDEX.md
View file

@ -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

22
docs/src/COMPONENT_API.json
View file

@ -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": [],

18
src/Select/SelectItem.svelte
View file

@ -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>

2
tests/Select.test.svelte
View file

@ -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" />

12
types/Select/SelectItem.svelte.d.ts vendored
View file

@ -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<