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

feat(dropdown): add hideLabel prop

Browse source
This commit is contained in:
Eric Liu 2021-02-03 09:51:56 -08:00
commit 1cb9345653
5 changed files with 27 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -988,6 +988,7 @@ export interface DropdownItem {
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | -- | Specify the list box label |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | -- | Override the default translation ids |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the list box |

10
docs/src/COMPONENT_API.json
View file

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

6
docs/src/pages/components/Dropdown.svx
View file

@ -13,6 +13,12 @@ components: ["Dropdown", "DropdownSkeleton"]
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Hidden label
<Dropdown hideLabel titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Format item display text
Use the `itemToString` prop to format the display of individual items.

4
src/Dropdown/Dropdown.svelte
View file

@ -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}
</label>

6
types/Dropdown/Dropdown.d.ts vendored
View file

@ -104,6 +104,12 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes<HTMLElementTagN
*/
label?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Override the default translation ids
*/