HT-964: Introduce a slot to add any html content for radio field label

Author: namudara

components/src/core/components/Input/RadioInput.vue

@@ -3,31 +3,30 @@
     <label :class="labelClasses">
       <template v-if="labelPosition === 'left'">
         <div class="oxd-radio-option-label">
-          {{ optionLabel }}
+          <slot v-if="!optionLabel" name="label"></slot>
+          <template v-else>
+            {{ optionLabel }}
+          </template>
         </div>
       </template>
-      <input
-        type="radio"
-        @focus="onFocus"
-        @blur="onBlur"
-        @change="onChange"
-        v-bind="$attrs"
-        v-model="checked"
-        :disabled="disabled"
-      />
+      <input type="radio" @focus="onFocus" @blur="onBlur" @change="onChange" v-bind="$attrs" v-model="checked"
+        :disabled="disabled" />
       <span :class="classes" :style="style" class="oxd-radio-input"></span>
       <template v-if="labelPosition === 'right'">
         <div class="oxd-radio-option-label">
-          {{ optionLabel }}
+          <slot v-if="!optionLabel" name="label"></slot>
+          <template v-else>
+            {{ optionLabel }}
+          </template>
         </div>
       </template>
     </label>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
-import {Position, LABEL_POSITIONS, RIGHT} from './types';
+import { defineComponent } from 'vue';
+import { Position, LABEL_POSITIONS, RIGHT } from './types';
 
 export interface State {
   focused: boolean;
@@ -50,7 +49,7 @@ export default defineComponent({
     labelPosition: {
       type: String,
       default: RIGHT,
-      validator: function(value: Position) {
+      validator: function (value: Position) {
         return LABEL_POSITIONS.indexOf(value) !== -1;
       },
     },

storybook/stories/core/components/Input/RadioInput.stories.js

@@ -1,4 +1,5 @@
 import RadioInput from '@orangehrm/oxd/core/components/Input/RadioInput';
+import Icon from '@orangehrm/oxd/core/components/Icon/Icon';
 import {
   RIGHT,
   LABEL_POSITIONS,
@@ -69,6 +70,15 @@ export default {
         type: {summary: 'Emit  when update the value'},
       },
     },
+    label: {
+      control: {type: 'text'},
+      table: {
+        type: {
+          summary:
+            'Named slot for custom label content. Only used if optionLabel prop is not provided. Allows full customization (text, icons, secondary labels, etc.)',
+        },
+      },
+    },
   },
 };
 
@@ -226,3 +236,62 @@ VmodelMultiple.parameters = {
     },
   },
 };
+
+const CustomLabelSlotSample = () => ({
+  data() {
+    return {
+      selected: '',
+    };
+  },
+  components: {
+    'oxd-radio-input': RadioInput,
+    'oxd-icon': Icon,
+  },
+  template: `<div>
+    <oxd-radio-input v-model="selected" id="radio1" value="fulltime">
+      <template #label>
+        <strong>Full Time</strong>
+        <span style="opacity: 0.5; margin-left: 0.25rem;">(40 hours/week)</span>
+        <oxd-icon name="clock" style="margin-left: 0.5rem;" />
+      </template>
+    </oxd-radio-input>
+    <br/>
+    <oxd-radio-input v-model="selected" id="radio2" value="parttime">
+      <template #label>
+        <strong>Part Time</strong>
+        <span style="opacity: 0.5; margin-left: 0.25rem;">(20 hours/week)</span>
+        <oxd-icon name="time" style="margin-left: 0.5rem;" />
+      </template>
+    </oxd-radio-input>
+    <br/>
+    <span>Selected: {{selected}}</span>
+  </div>`,
+});
+
+export const CustomLabelSlot = CustomLabelSlotSample.bind({});
+
+CustomLabelSlot.parameters = {
+  docs: {
+    source: {
+      code: `<div>
+      <oxd-radio-input v-model="selected" id="radio1" value="fulltime">
+        <template #label>
+          <strong>Full Time</strong>
+          <span style="opacity: 0.5; margin-left: 0.25rem;">(40 hours/week)</span>
+          <oxd-icon name="clock" style="margin-left: 0.5rem;" />
+        </template>
+      </oxd-radio-input>
+      <br/>
+      <oxd-radio-input v-model="selected" id="radio2" value="parttime">
+        <template #label>
+          <strong>Part Time</strong>
+          <span style="opacity: 0.5; margin-left: 0.25rem;">(20 hours/week)</span>
+          <oxd-icon name="time" style="margin-left: 0.5rem;" />
+        </template>
+      </oxd-radio-input>
+      <br/>
+      <span>Selected: {{selected}}</span>
+    </div>`,
+    },
+  },
+};