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

feat!: dispatch "change" event in Pagination, rename "change" to "update" in Select (#1497)

Browse source 
Closes #1491

* feat(pagination): dispatch "change" event when interacting with previous/next buttons, page/page size dropdowns

* breaking(select): rename dispatched "change" event to "update"

* breaking(select): forward `change` event to `Select`
This commit is contained in:
Enrico Sacchetti 2022-12-13 13:22:17 -05:00 • committed by GitHub
commit 9198ed5474
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 76 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

8
docs/src/pages/components/Select.svx
View file

@ -11,7 +11,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
If the `selected` prop is not set, the value of the first `SelectItem` will be used as the default value.
<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" />
<SelectItem value="g10" />
<SelectItem value="g80" />
@ -23,7 +23,7 @@ If the `selected` prop is not set, the value of the first `SelectItem` will be u
Use the `text` prop on `SelectItem` to customize the display value.
<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
@ -35,7 +35,7 @@ Use the `text` prop on `SelectItem` to customize the display value.
Use the `selected` prop to specify an initial value.
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.detail)}>
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
@ -160,4 +160,4 @@ The `selected` prop is reactive and supports two-way binding.
## Skeleton (hidden label)
<SelectSkeleton hideLabel />
<SelectSkeleton hideLabel />