diff --git a/CHANGELOG.md b/CHANGELOG.md index 04b2f7bb0..28831c346 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -125,6 +125,17 @@ Changelog is rather internal in nature. See release notes for the public overvie [#482]: https://github.com/learningequality/kolibri-design-system/pull/482 +- [#485] + - **Description:** Updated KRadioButton 'value' prop to 'buttonValue' + - **Products impact:** Updated API + - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/379 + - **Components:** KRadioButton + - **Breaking:** Yes + - **Impacts a11y:** + - **Guidance:** KRadioButton 'value' prop is deprecated. Please use the 'buttonValue' prop instead. + + [#485]: https://github.com/learningequality/kolibri-design-system/pull/485 + - [#464] - **Description:** Add KTextTruncator - **Products impact:** new API diff --git a/docs/pages/kradiobutton.vue b/docs/pages/kradiobutton.vue index 5d915c555..6926b2cbe 100644 --- a/docs/pages/kradiobutton.vue +++ b/docs/pages/kradiobutton.vue @@ -1,7 +1,6 @@ diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue index be0d5eb16..f83a4519d 100644 --- a/lib/KRadioButton.vue +++ b/lib/KRadioButton.vue @@ -1,10 +1,6 @@ -
+
{{ description }}
@@ -114,9 +106,16 @@ /** * Unique value that will be assigned to `v-model` data when this radio button is selected */ + buttonValue: { + type: [String, Number, Boolean], + default: null, + }, + /** + * (DEPRECATED) + */ value: { type: [String, Number, Boolean], - required: true, + default: null, }, /** * If provided, description underneath label text @@ -152,7 +151,7 @@ }), computed: { isChecked() { - return this.value.toString() === this.currentValue.toString(); + return this.currentValue === (this.buttonValue === null ? this.value : this.buttonValue); }, id() { return `${this._uid}`; @@ -173,6 +172,16 @@ return this.truncateLabel ? 'truncate-text' : ''; }, }, + mounted() { + if (this.buttonValue === null && this.value === null) { + console.error('KRadioButton: buttonValue prop is required'); + } + if (this.buttonValue === null) { + console.warn( + "KRadioButton: 'value' prop is deprecated and will be removed in a future release. Please use 'buttonValue' instead." + ); + } + }, methods: { toggleCheck(event) { if (!this.disabled) { @@ -200,9 +209,9 @@ this.$emit('change', this.isChecked, event); /** - * Used to set `value` to `v-model` when checked + * Used to set `buttonValue` to `v-model` when checked */ - this.$emit('input', this.value); + this.$emit('input', this.buttonValue === null ? this.value : this.buttonValue); }, blur() { this.active = false;