Merge pull request #485 from BabyElias/Issue-#379

Updated KRadioButton 'value' prop
learningequality · Dec 11, 2023 · 795e909 · 795e909
2 parents 91539ec + 9c3662c
commit 795e909
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 19 deletions.
diff --git 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
@@ -1,7 +1,6 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
     <DocsPageSection title="Overview" anchor="#overview">
       <p>
         This is a radio button component:
@@ -21,12 +20,12 @@
           v-model="exampleValue"
           label="Option C"
           description="This one is special!"
-          value="val-c"
+          buttonValue="val-c"
         />
         <KRadioButton
           v-model="exampleValue"
           label="Truncated label. Adjusting your browser window size to see this in action."
-          value="val-d"
+          buttonValue="val-d"
           truncateLabel
         />
         <p>
@@ -62,7 +61,6 @@
         <li>By default, the first radio option is selected, but may be configured to have any option preselected</li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>

diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
@@ -1,10 +1,6 @@
 <template>
 
-  <div
-    class="k-radio-button-container"
-    :class="{ 'k-radio-button-disabled': disabled }"
-    @click="toggleCheck"
-  >
+  <div class="k-radio-button-container" :class="{ 'k-radio-button-disabled': disabled }" @click="toggleCheck">
     <div class="tr">
       <div class="k-radio-button">
         <input
@@ -14,7 +10,7 @@
           type="radio"
           class="k-radio-button-input"
           :checked="isChecked"
-          :value="value"
+          :value="buttonValue !== null ? buttonValue : value"
           :disabled="disabled"
           @click.stop="toggleCheck"
           @focus="active = true"
@@ -54,11 +50,7 @@
         <template v-else>
           <div :class="[truncateText]">{{ label }}</div>
         </template>
-        <div 
-          v-if="description" 
-          class="description" 
-          :style="[{ color: disabled ? '' : $themeTokens.annotation }, disabledStyle ]"
-        >
+        <div v-if="description" class="description" :style="[{ color: disabled ? '' : $themeTokens.annotation }, disabledStyle ]">
           {{ description }}
         </div>
       </label>
@@ -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;