diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 2cb347ef..4a95d08d 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -988,6 +988,7 @@ export interface DropdownItem { | warnText | let | No | string | "" | Specify the warning state text | | helperText | let | No | string | "" | Specify the helper text | | label | let | No | string | -- | Specify the list box label | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | | name | let | No | string | -- | Specify a name attribute for the list box | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 7d141f14..a6a03871 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -3858,6 +3858,16 @@ "constant": false, "reactive": false }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "translateWithId", "kind": "let", diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx index 70654277..4db48c86 100644 --- a/docs/src/pages/components/Dropdown.svx +++ b/docs/src/pages/components/Dropdown.svx @@ -13,6 +13,12 @@ components: ["Dropdown", "DropdownSkeleton"] {id: "1", text: "Email"}, {id: "2", text: "Fax"}]}" /> +### Hidden label + + + ### Format item display text Use the `itemToString` prop to format the display of individual items. diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index afaa6a6b..f07eef63 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/src/Dropdown/Dropdown.svelte @@ -69,6 +69,9 @@ */ export let label = undefined; + /** Set to `true` to visually hide the label text */ + export let hideLabel = false; + /** * Override the default translation ids * @type {(id: any) => string} @@ -145,6 +148,7 @@ for="{id}" class:bx--label="{true}" class:bx--label--disabled="{disabled}" + class:bx--visually-hidden="{hideLabel}" > {titleText} diff --git a/types/Dropdown/Dropdown.d.ts b/types/Dropdown/Dropdown.d.ts index 61589f60..5a11defd 100644 --- a/types/Dropdown/Dropdown.d.ts +++ b/types/Dropdown/Dropdown.d.ts @@ -104,6 +104,12 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes