fix(NcRadioGroup): re-implement using NcFieldset and NcFormGroup

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

Author: ShGKme

src/components/NcRadioGroup/NcRadioGroup.vue

@@ -7,7 +7,8 @@
 import type { Slot } from 'vue'
 
 import { computed, provide, ref, warn } from 'vue'
-import { createElementId } from '../../utils/createElementId.ts'
+import NcFormBox from '../NcFormBox/NcFormBox.vue'
+import NcFormGroup from '../NcFormGroup/NcFormGroup.vue'
 import { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'
 
 const modelValue = defineModel<string>({ required: false, default: '' })
@@ -40,7 +41,6 @@ defineSlots<{
 	default?: Slot
 }>()
 
-const descriptionId = createElementId()
 const buttonVariant = ref<boolean>()
 
 provide(INSIDE_RADIO_GROUP_KEY, computed(() => ({
@@ -72,62 +72,22 @@ function onUpdate(value: string) {
 </script>
 
 <template>
-	<fieldset
-		:aria-describedby="description ? descriptionId : undefined"
-		:class="[{
-			[$style.radioGroup_buttonVariant]: buttonVariant,
-		}, $style.radioGroup]">
-		<legend :class="[$style.radioGroup__label, { 'hidden-visually': labelHidden }]">
-			{{ label }}
-		</legend>
-		<p v-if="description" :id="descriptionId" :class="$style.radioGroup__description">
-			{{ description }}
-		</p>
-		<div :class="$style.radioGroup__wrapper">
+	<NcFormGroup
+		:label
+		:description
+		:hide-label="labelHidden">
+		<NcFormBox v-if="buttonVariant" row>
 			<slot />
-		</div>
-	</fieldset>
+		</NcFormBox>
+		<span v-else :class="$style.radioGroup_checkboxRadioContainer">
+			<slot />
+		</span>
+	</NcFormGroup>
 </template>
 
 <style module lang="scss">
-.radioGroup {
-	display: flex;
-	flex-direction: column;
-
-	&:not(.radioGroup_buttonVariant) :global(.checkbox-content) {
-		max-width: unset !important;
-	}
-}
-
-.radioGroup__label {
-	font-size: 1.2em;
-	font-weight: bold;
-	margin-inline-start: var(--border-radius-element);
-}
-
-.radioGroup__description {
-	color: var(--color-text-maxcontrast);
-	margin-block-end: var(--default-grid-baseline);
-	margin-inline-start: var(--border-radius-element);
-}
-
-.radioGroup__wrapper {
-	display: flex;
-	flex-direction: column;
-
-	> * {
-		flex: 1 0 1px;
-	}
-}
-
-.radioGroup__label + .radioGroup__wrapper {
-	// when there is no description we need to add some margin between wrapper and label
-	margin-block-start: var(--default-grid-baseline);
-}
-
-.radioGroup_buttonVariant .radioGroup__wrapper {
-	flex-direction: row;
-	gap: var(--default-grid-baseline);
+.radioGroup_checkboxRadioContainer :global(.checkbox-content) {
+	max-width: unset !important;
 }
 </style>
 

src/components/NcRadioGroupButton/NcRadioGroupButton.vue

@@ -8,6 +8,7 @@ import type { Slot } from 'vue'
 
 import { computed, onMounted } from 'vue'
 import { createElementId } from '../../utils/createElementId.ts'
+import { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'
 import { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'
 
 const props = defineProps<{
@@ -36,6 +37,8 @@ defineSlots<{
 
 const labelId = createElementId()
 const radioGroup = useInsideRadioGroup()
+const { formBoxItemClass } = useNcFormBox()
+
 onMounted(() => radioGroup!.value.register(true))
 
 const isChecked = computed(() => radioGroup?.value.modelValue === props.value)
@@ -52,7 +55,7 @@ function onUpdate() {
 	<div
 		:class="[{
 			[$style.radioGroupButton_active]: isChecked,
-		}, $style.radioGroupButton]"
+		}, $style.radioGroupButton, formBoxItemClass]"
 		@click="onUpdate">
 		<div v-if="$slots.icon" :class="$style.radioGroupButton__icon">
 			<slot name="icon" />
@@ -120,16 +123,6 @@ function onUpdate() {
 		border: var(--radio-group-button--border-width) solid var(--color-main-text) !important;
 		outline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);
 	}
-
-	&:first-of-type {
-		border-start-start-radius: var(--border-radius-element);
-		border-end-start-radius: var(--border-radius-element);
-	}
-
-	&:last-of-type {
-		border-start-end-radius: var(--border-radius-element);
-		border-end-end-radius: var(--border-radius-element);
-	}
 }
 
 .radioGroupButton_active {