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

chore: v11 Select

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-28 22:27:06 +02:00 • committed by Enrico Sacchetti
commit a3f577bea3
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
6 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -3170,7 +3170,7 @@ None.
| :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- | | :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLSelectElement</code> | <code>null</code> | Obtain a reference to the select HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLSelectElement</code> | <code>null</code> | Obtain a reference to the select HTML element |
| selected | No | <code>let</code> | Yes | <code>string &#124; number</code> | <code>undefined</code> | Specify the selected item value | | selected | No | <code>let</code> | Yes | <code>string &#124; number</code> | <code>undefined</code> | Specify the selected item value |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the select input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the select input |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant | | inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| 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 |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the select element | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the select element |

2
docs/src/COMPONENT_API.json
View file

@ -10189,7 +10189,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the select input", "description": "Set the size of the select input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

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

@ -104,9 +104,9 @@ The `selected` prop is reactive and supports two-way binding.
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
## Extra-large size ## Large size
<Select size="xl" labelText="Carbon theme" selected="g10" > <Select size="lg" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" /> <SelectItem value="g80" text="Gray 80" />

6
src/Select/Select.svelte
View file

@ -11,7 +11,7 @@
/** /**
* Set the size of the select input * Set the size of the select input
* @type {"sm" | "xl"} * @type {"sm" | "lg"}
*/ */
export let size = undefined; export let size = undefined;
@ -161,7 +161,7 @@
name="{name}" name="{name}"
class:bx--select-input="{true}" class:bx--select-input="{true}"
class:bx--select-input--sm="{size === 'sm'}" class:bx--select-input--sm="{size === 'sm'}"
class:bx--select-input--xl="{size === 'xl'}" class:bx--select-input--lg="{size === 'lg' || size === 'xl'}"
on:change="{handleChange}" on:change="{handleChange}"
on:change on:change
on:input on:input
@ -205,7 +205,7 @@
aria-invalid="{invalid || undefined}" aria-invalid="{invalid || undefined}"
class:bx--select-input="{true}" class:bx--select-input="{true}"
class:bx--select-input--sm="{size === 'sm'}" class:bx--select-input--sm="{size === 'sm'}"
class:bx--select-input--xl="{size === 'xl'}" class:bx--select-input--lg="{size === 'lg' || size === 'xl'}"
on:change="{handleChange}" on:change="{handleChange}"
on:change on:change
on:input on:input

2
tests/Select.test.svelte
View file

@ -40,7 +40,7 @@
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
<Select size="xl" labelText="Carbon theme" selected="g10"> <Select size="lg" labelText="Carbon theme" selected="g10">
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />

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

@ -14,7 +14,7 @@ export interface SelectProps extends RestProps {
* Set the size of the select input * Set the size of the select input
* @default undefined * @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "lg";
/** /**
* Set to `true` to use the inline variant * Set to `true` to use the inline variant