feat(Radio): auto generate a unique id for label and input if none is specified and the input is not wrapped in a label

Author: mtorromeo

apps/docs/src/stories/Components/Radio.story.vue

@@ -42,7 +42,6 @@
 
     <story-canvas title="With description and body">
       <pf-radio
-        id="radio3"
         name="radio-with-description-and-body"
         label="Radio with description and body"
         description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."

packages/core/src/components/Radio.vue

@@ -15,14 +15,14 @@
           :class="[styles.radioLabel, {
             [styles.modifiers.disabled]: disabled,
           }]"
-          :for="wrapWithLabel ? undefined : id"
+          :for="wrapWithLabel ? undefined : validId"
         >
           <slot name="label">{{ label }}</slot>
         </component>
       </sort-by>
 
       <input
-        :id="id"
+        :id="wrapWithLabel ? id : validId"
         ref="input"
         v-bind="$attrs"
         type="radio"
@@ -53,6 +53,7 @@ import SortBy from '../helpers/SortBy.vue';
 import { computed, type InputHTMLAttributes, type Component, ref, type Ref, getCurrentInstance } from 'vue';
 import { useChildrenTracker } from '../use';
 import { FormInputsKey } from './Form/common';
+import { getUniqueId } from '../util';
 
 defineOptions({
   name: 'PfRadio',
@@ -101,6 +102,8 @@ const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 const wrapWithLabel = computed(() => props.component === 'label');
 const input: Ref<HTMLInputElement | undefined> = ref();
 
+const validId = computed(() => props.id || getUniqueId());
+
 defineExpose({
   input,
 });