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

fix(dropdown): strongly type translateWithId (#1286)

Browse source
This commit is contained in:
metonym 2022-05-04 07:52:42 -07:00 • committed by GitHub
commit d242849780
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

4
COMPONENT_INDEX.md
View file

@ -1140,7 +1140,7 @@ export interface DropdownItem {
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- | | :-------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant | | inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
@ -1160,7 +1160,7 @@ export interface DropdownItem {
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the list box label | | label | <code>let</code> | No | <code>string</code> | <code>undefined</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 | | 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> | <code>undefined</code> | Override the default translation ids | | translateWithId | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component | | 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> | <code>undefined</code> | Specify a name attribute for the list box | | name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the list box |

4
docs/src/COMPONENT_API.json
View file

@ -3207,8 +3207,8 @@
{ {
"name": "translateWithId", "name": "translateWithId",
"kind": "let", "kind": "let",
"description": "Override the default translation ids", "description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open",
"type": "(id: any) => string", "type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,

5
src/Dropdown/Dropdown.svelte
View file

@ -83,8 +83,9 @@
export let hideLabel = false; export let hideLabel = false;
/** /**
* Override the default translation ids * Override the chevron icon label based on the open state.
* @type {(id: any) => string} * Defaults to "Open menu" when closed and "Close menu" when open
* @type {(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string}
*/ */
export let translateWithId = undefined; export let translateWithId = undefined;

4
tests/Dropdown.test.svelte
View file

@ -14,6 +14,10 @@
on:select="{(e) => { on:select="{(e) => {
console.log(e.detail.selectedId); console.log(e.detail.selectedId);
}}" }}"
translateWithId="{(id) => {
console.log(id); // "open" | "close"
return id;
}}"
let:item let:item
let:index let:index
> >

7
types/Dropdown/Dropdown.svelte.d.ts vendored
View file

@ -121,10 +121,13 @@ export interface DropdownProps
hideLabel?: boolean; hideLabel?: boolean;
/** /**
* Override the default translation ids * Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined * @default undefined
*/ */
translateWithId?: (id: any) => string; translateWithId?: (
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
) => string;
/** /**
* Set an id for the list box component * Set an id for the list box component