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

feat(combo-box): add hideLabel prop (#2153)

Browse source
This commit is contained in:
Nick Wing 2025-04-18 12:27:14 -05:00 • committed by GitHub
commit 436dea47e8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 50 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -671,6 +671,7 @@ export interface ComboBoxItem {
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox | | titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |

12
docs/src/COMPONENT_API.json
View file

@ -1851,6 +1851,18 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "hideLabel",
"kind": "let",
"description": "Set to `true` to visually hide the label text",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{ {
"name": "placeholder", "name": "placeholder",
"kind": "let", "kind": "let",

9
docs/src/pages/components/ComboBox.svx
View file

@ -24,6 +24,15 @@ Override the default slot to customize the display of each item. Access the item
<FileSource src="/framed/ComboBox/ComboBoxSlot" /> <FileSource src="/framed/ComboBox/ComboBoxSlot" />
## Hidden label
<ComboBox hideLabel titleText="Hidden Label" placeholder="Select contact method"
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />
## Initial selected id ## Initial selected id
<ComboBox titleText="Contact" placeholder="Select contact method" <ComboBox titleText="Contact" placeholder="Select contact method"

10
src/ComboBox/ComboBox.svelte
View file

@ -46,6 +46,9 @@
/** Specify the title text of the combobox */ /** Specify the title text of the combobox */
export let titleText = ""; export let titleText = "";
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/** Specify the placeholder text */ /** Specify the placeholder text */
export let placeholder = ""; export let placeholder = "";
@ -226,7 +229,12 @@
<div class:bx--list-box__wrapper={true}> <div class:bx--list-box__wrapper={true}>
{#if titleText || $$slots.titleText} {#if titleText || $$slots.titleText}
<label for={id} class:bx--label={true} class:bx--label--disabled={disabled}> <label
for={id}
class:bx--label={true}
class:bx--label--disabled={disabled}
class:bx--visually-hidden={hideLabel}
>
<slot name="titleText"> <slot name="titleText">
{titleText} {titleText}
</slot> </slot>

2
tests/ComboBox/ComboBox.test.svelte
View file

@ -19,6 +19,7 @@
export let invalidText = ""; export let invalidText = "";
export let warnText = ""; export let warnText = "";
export let helperText = ""; export let helperText = "";
export let hideLabel = false;
export let size: "sm" | "xl" | undefined = undefined; export let size: "sm" | "xl" | undefined = undefined;
export let shouldFilterItem: ComponentProps<ComboBox>["shouldFilterItem"] = ( export let shouldFilterItem: ComponentProps<ComboBox>["shouldFilterItem"] = (
item, item,
@ -31,6 +32,7 @@
<ComboBox <ComboBox
{disabled} {disabled}
{helperText} {helperText}
{hideLabel}
{invalid} {invalid}
{invalidText} {invalidText}
{items} {items}

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

@ -96,6 +96,17 @@ describe("ComboBox", () => {
expect(screen.getByText("Contact")).toHaveClass("bx--label--disabled"); expect(screen.getByText("Contact")).toHaveClass("bx--label--disabled");
}); });
it("should handle hidden label", () => {
render(ComboBox, {
props: {
titleText: "Hidden Label",
hideLabel: true,
},
});
expect(screen.getByText("Hidden Label")).toHaveClass("bx--visually-hidden");
});
it("should handle invalid state", () => { it("should handle invalid state", () => {
render(ComboBox, { render(ComboBox, {
props: { props: {

6
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -60,6 +60,12 @@ type $Props = {
*/ */
titleText?: string; titleText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/** /**
* Specify the placeholder text * Specify the placeholder text
* @default "" * @default ""