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): falsy item text should fallback to value (#2152)

Browse source
This commit is contained in:
Nick Wing 2025-04-18 12:34:12 -05:00 • committed by GitHub
commit 61ea8dd82c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 32 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

16
COMPONENT_INDEX.md
View file

@ -3221,14 +3221,14 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the option text<br />If not specified, the value will be used as the text. |
| hidden | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the option | | 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 | | 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 | | 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 | | style | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the style of the `option` element |
### Slots ### Slots

3
docs/src/COMPONENT_API.json
View file

@ -12531,9 +12531,8 @@
{ {
"name": "text", "name": "text",
"kind": "let", "kind": "let",
"description": "Specify the option text", "description": "Specify the option text\nIf not specified, the value will be used as the text.",
"type": "string", "type": "string",
"value": "\"\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

8
src/Select/SelectItem.svelte
View file

@ -5,8 +5,12 @@
*/ */
export let value = ""; export let value = "";
/** Specify the option text */ /**
export let text = ""; * Specify the option text
* If not specified, the value will be used as the text.
* @type {string}
*/
export let text = undefined;
/** Set to `true` to hide the option */ /** Set to `true` to hide the option */
export let hidden = false; export let hidden = false;

6
tests/Select/Select.falsy.test.svelte
View file

@ -7,3 +7,9 @@
<SelectItem value={0} text="Zero" /> <SelectItem value={0} text="Zero" />
<SelectItem value={1} text="One" /> <SelectItem value={1} text="One" />
</Select> </Select>
<Select labelText="Undefined text">
<SelectItem value={2} />
<SelectItem value={0} text="Zero" />
<SelectItem value={1} text="One" />
</Select>

11
tests/Select/Select.test.ts
View file

@ -240,10 +240,17 @@ describe("Select", () => {
expect(skeleton.children[0]).toHaveClass("bx--skeleton"); expect(skeleton.children[0]).toHaveClass("bx--skeleton");
}); });
it("renders value if `text` is falsy", () => { it("renders `text` instead of `value` if `text` is an empty string", () => {
render(SelectFalsy); render(SelectFalsy);
expect(screen.getByLabelText("Falsy text")).toHaveValue("-1"); expect(screen.getByLabelText("Falsy text")).toHaveValue("-1");
expect(screen.getByDisplayValue("")).toBeInTheDocument(); expect(screen.getByRole("option", { name: "" })).toBeInTheDocument();
});
it("renders value if `text` is undefined", () => {
render(SelectFalsy);
expect(screen.getByLabelText("Undefined text")).toHaveValue("2");
expect(screen.getByRole("option", { name: "2" })).toBeInTheDocument();
}); });
}); });

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

@ -9,7 +9,8 @@ export type SelectItemProps = {
/** /**
* Specify the option text * Specify the option text
* @default "" * If not specified, the value will be used as the text.
* @default undefined
*/ */
text?: string; text?: string;