Merge pull request #536 from ambroisemaupate/fix/small-radio

fix(DsfrRadioButton): Add missing `small` prop on DsfrRadioButton

Author: laruiss

src/components/DsfrRadioButton/DsfrRadioButton.stories.js

@@ -16,6 +16,10 @@ export default {
       control: 'object',
       description: 'Tableau d’objets : chaque objet contient les props à passer à `DsfrRadioButton` - *N.B. : Ne fait pas partie du composant',
     },
+    small: {
+      control: 'boolean',
+      description: 'Utilise la version réduite du bouton radio',
+    },
     // label: {
     //   control: 'text',
     //   description: 'Label du bouton radio',
@@ -53,6 +57,7 @@ export const RadioButton = (args, { argTypes }) => ({
           v-for="option of options"
           :modelValue="modelValue"
           v-bind="option"
+          :small="small"
           @update:modelValue="updateCheckedValue($event)"
         />
       </div>
@@ -71,6 +76,7 @@ export const RadioButton = (args, { argTypes }) => ({
 })
 RadioButton.args = {
   modelValue: '3',
+  small: false,
   options: [
     {
       label: 'Valeur 1',
@@ -103,6 +109,7 @@ export const RichRadioButton = (args, { argTypes }) => ({
       v-for="option of options"
       :modelValue="modelValue"
       v-bind="option"
+      :small="small"
       @update:modelValue="updateCheckedValue($event)"
     />
   `,
@@ -118,6 +125,7 @@ export const RichRadioButton = (args, { argTypes }) => ({
 })
 RichRadioButton.args = {
   modelValue: '3',
+  small: false,
   options: [
     {
       label: 'Valeur 1',

src/components/DsfrRadioButton/DsfrRadioButton.vue

@@ -20,6 +20,7 @@ export default defineComponent({
       type: [String, Number],
       default: '',
     },
+    small: Boolean,
     value: {
       type: [String, Number],
       required: true,
@@ -51,7 +52,10 @@ export default defineComponent({
 <template>
   <div
     class="fr-radio-group"
-    :class="rich ? 'fr-radio-rich' : ''"
+    :class="{
+      'fr-radio-rich': rich,
+      'fr-radio-group--sm': small,
+    }"
   >
     <input
       :id="id"

src/components/DsfrRadioButton/DsfrRadioButtonSet.stories.js

@@ -19,6 +19,10 @@ export default {
       control: 'text',
       description: 'Valeur de l’attribut `name` de chaque bouton radio du groupe',
     },
+    small: {
+      control: 'boolean',
+      description: 'Utilise la version réduite des boutons radio',
+    },
     // legend: {
     //   control: 'text',
     //   description: 'Titre du groupe de bouton',
@@ -66,6 +70,7 @@ GroupeDeBoutonsRadio.args = {
   legend: 'Légende des champs',
   inline: false,
   modelValue: '3',
+  small: false,
   options: [
     {
       label: 'Valeur 1',
@@ -107,6 +112,7 @@ GroupeDeBoutonsRadioRequis.args = {
   inline: false,
   required: true,
   modelValue: '3',
+  small: false,
   options: [
     {
       label: 'Valeur 1',
@@ -152,6 +158,7 @@ GroupeDeBoutonsRadioRequisPersonnalise.args = {
   inline: false,
   required: true,
   modelValue: '3',
+  small: false,
   options: [
     {
       label: 'Valeur 1',

src/components/DsfrRadioButton/DsfrRadioButtonSet.vue

@@ -22,6 +22,7 @@ export default defineComponent({
     disabled: Boolean,
     inline: Boolean,
     required: Boolean,
+    small: Boolean,
     name: {
       type: String,
       default: 'no-name',
@@ -111,6 +112,7 @@ export default defineComponent({
           :key="option.value || i"
           :name="name"
           v-bind="option"
+          :small="small"
           :model-value="modelValue"
           @update:model-value="onChange"
         />