diff --git a/CHANGELOG.md b/CHANGELOG.md index 55ab93e39..4ad8a44cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,17 +20,32 @@ and this project adheres to [Semantic Versioning](http://semver.org/). CustomEvent<{ checked: boolean; value: string | undefined }> ``` + +- **BREAKING**: Radio `igcChange` event. + + Before: + ```ts + CustomEvent + ``` + + Now: + ```ts + CustomEvent<{ checked: boolean; value: string | undefined }> + ``` + + + ### Removed -- igc-form - use the native form element instead. -- Range slider - ariaThumbLower/ariaThumbUpper. Use thumbLabelLower/thumbLabelUpper instead. -- Rating - readonly property. Use readOnly instead. -- Dialog - closeOnEscape property. Use keepOpenOnEscape. -- Combo, Select - positionStrategy, flip, sameWidth removed. -- Dropdown - positionStrategy removed. -- Input - readonly, inputmode, maxlength and minlength. - Use the native readOnly, inputMode, maxLength and minLength properties instead. -- Date-time-input - `minValue`/`mavValue` are removed. Use `min`/`max` instead. -- Removed size property from components. +- **BREAKING**: igc-form - use the native form element instead. +- **BREAKING**: Range slider - `ariaThumbLower/ariaThumbUpper`. Use `thumbLabelLower/thumbLabelUpper` instead. +- **BREAKING**: Rating - `readonly` property. Use `readOnly` instead. +- **BREAKING**: Dialog - `closeOnEscape` property. Use `keepOpenOnEscape`. +- **BREAKING**: Combo, Select - `positionStrategy`, `flip`, `sameWidth` removed. +- **BREAKING**: Dropdown - `positionStrategy` removed. +- **BREAKING**: Input - `readonly`, `inputmode`, `maxlength` and `minlength`. + Use the native `readOnly`, `inputMode`, `maxLength` and `minLength` properties instead. +- **BREAKING**: Date-time-input - `minValue`/`mavValue` are removed. Use `min`/`max` instead. +- **BREAKING**: Removed `size` property from components. ### Fixed - Date-time input - update masked value according to the input format on focus when value is set [#1320](https://github.com/IgniteUI/igniteui-webcomponents/issues/1320) diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts index 7b56ff5c3..b5e4458dd 100644 --- a/src/components/radio/radio.spec.ts +++ b/src/components/radio/radio.spec.ts @@ -194,7 +194,12 @@ describe('Radio Component', () => { radio.click(); await elementUpdated(radio); - expect(eventSpy).calledWithExactly('igcChange', { detail: true }); + expect(eventSpy).calledWithExactly('igcChange', { + detail: { + checked: true, + value: undefined, + }, + }); }); it('should be able to use external elements as label', async () => { diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 43b48f995..33936fe56 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -25,8 +25,13 @@ import { styles as shared } from './themes/shared/radio.common.css.js'; import { all } from './themes/themes.js'; import { getGroup } from './utils.js'; +export interface RadioChangeEventArgs { + checked: boolean; + value?: string; +} + export interface IgcRadioEventMap { - igcChange: CustomEvent; + igcChange: CustomEvent; igcFocus: CustomEvent; igcBlur: CustomEvent; } @@ -268,7 +273,12 @@ export default class IgcRadioComponent extends FormAssociatedRequiredMixin( protected handleClick() { this.checked = true; - this.emitEvent('igcChange', { detail: this.checked }); + this.emitEvent('igcChange', { + detail: { + checked: this.checked, + value: this.value, + }, + }); } protected handleBlur() { @@ -287,7 +297,9 @@ export default class IgcRadioComponent extends FormAssociatedRequiredMixin( radio.focus(); radio.checked = true; - radio.emitEvent('igcChange', { detail: radio.checked }); + radio.emitEvent('igcChange', { + detail: { checked: radio.checked, value: radio.value }, + }); } protected override render() {