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(radio-button-group): strongly type dispatched change/select events (#1819)

Browse source
This commit is contained in:
Eric Liu 2023-10-03 11:23:17 -07:00 • committed by GitHub
commit 06d81ddbff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 42 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

20
COMPONENT_INDEX.md
View file

@ -2983,13 +2983,13 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :----- | | :--------- | :--------- | :------------------ |
| click | forwarded | -- | | change | dispatched | <code>string</code> |
| mouseover | forwarded | -- | | click | forwarded | -- |
| mouseenter | forwarded | -- | | mouseover | forwarded | -- |
| mouseleave | forwarded | -- | | mouseenter | forwarded | -- |
| change | dispatched | -- | | mouseleave | forwarded | -- |
## `RadioButtonSkeleton` ## `RadioButtonSkeleton`
@ -4251,9 +4251,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :----- | | :--------- | :--------- | :------------------ |
| select | dispatched | -- | | select | dispatched | <code>string</code> |
## `TimePicker` ## `TimePicker`

8
docs/src/COMPONENT_API.json
View file

@ -9615,11 +9615,11 @@
} }
], ],
"events": [ "events": [
{ "type": "dispatched", "name": "change", "detail": "string" },
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }
{ "type": "dispatched", "name": "change" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
@ -13158,7 +13158,9 @@
], ],
"moduleExports": [], "moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [{ "type": "dispatched", "name": "select" }], "events": [
{ "type": "dispatched", "name": "select", "detail": "string" }
],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "fieldset" } "rest_props": { "type": "Element", "name": "fieldset" }
}, },

4
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -1,4 +1,8 @@
<script> <script>
/**
* @event {string} change
*/
/** /**
* Set the selected radio button value * Set the selected radio button value
* @type {string} * @type {string}

4
src/Tile/TileGroup.svelte
View file

@ -1,4 +1,8 @@
<script> <script>
/**
* @event {string} select
*/
/** /**
* Specify the selected tile value * Specify the selected tile value
* @type {string} * @type {string}

8
tests/RadioButton.test.svelte
View file

@ -2,7 +2,13 @@
import { RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "../types"; import { RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "../types";
</script> </script>
<RadioButtonGroup legendText="Storage tier (disk)" selected="standard"> <RadioButtonGroup
legendText="Storage tier (disk)"
selected="standard"
on:change="{(e) => {
console.log(e.detail); // string
}}"
>
<RadioButton labelText="Free (1 GB)" value="free" /> <RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" /> <RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" /> <RadioButton labelText="Pro (128 GB)" value="pro" />

12
tests/RadioTile.test.svelte
View file

@ -2,8 +2,16 @@
import { TileGroup, RadioTile } from "../types"; import { TileGroup, RadioTile } from "../types";
</script> </script>
<TileGroup name="plan" required legend="Service pricing tiers"> <TileGroup
<RadioTile light value="0" checked>Lite plan</RadioTile> name="plan"
required
legend="Service pricing tiers"
selected="0"
on:select="{(e) => {
console.log(e.detail); // string
}}"
>
<RadioTile light checked value="0">Lite plan</RadioTile>
<RadioTile value="1">Standard plan</RadioTile> <RadioTile value="1">Standard plan</RadioTile>
<RadioTile value="2">Plus plan</RadioTile> <RadioTile value="2">Plus plan</RadioTile>
</TileGroup> </TileGroup>

2
types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts vendored
View file

@ -64,11 +64,11 @@ export interface RadioButtonGroupProps extends RestProps {
export default class RadioButtonGroup extends SvelteComponentTyped< export default class RadioButtonGroup extends SvelteComponentTyped<
RadioButtonGroupProps, RadioButtonGroupProps,
{ {
change: CustomEvent<string>;
click: WindowEventMap["click"]; click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"]; mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"]; mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"]; mouseleave: WindowEventMap["mouseleave"];
change: CustomEvent<any>;
}, },
{ default: {}; legendText: {} } { default: {}; legendText: {} }
> {} > {}

2
types/Tile/TileGroup.svelte.d.ts vendored
View file

@ -39,6 +39,6 @@ export interface TileGroupProps extends RestProps {
export default class TileGroup extends SvelteComponentTyped< export default class TileGroup extends SvelteComponentTyped<
TileGroupProps, TileGroupProps,
{ select: CustomEvent<any> }, { select: CustomEvent<string> },
{ default: {} } { default: {} }
> {} > {}