🐛 form-builder: Fix inner spacing in ChoiceButtonField (#1211)

CHANGELOG.md

@@ -17,6 +17,7 @@
   - **ChoiceSliderField:** Correction des styles pour l'affichage des étiquettes ([#1194](https://github.com/assurance-maladie-digital/design-system/pull/1194)) ([3707e4b](https://github.com/assurance-maladie-digital/design-system/commit/3707e4bcfc163983b527cd7ca5fbb26485bb057a))
   - **ChoiceSliderField:** Correction de la valeur par défaut manquante ([#1204](https://github.com/assurance-maladie-digital/design-system/pull/1204)) ([350e9e5](https://github.com/assurance-maladie-digital/design-system/commit/350e9e56ef8c0f88875299368d4a33de53758bda))
   - **PeriodField:** Correction de la largeur des champs ([#1208](https://github.com/assurance-maladie-digital/design-system/pull/1208)) ([a1ef419](https://github.com/assurance-maladie-digital/design-system/commit/a1ef41997c998905911afc32bbae35baa7199b3e))
+  - **ChoiceButtonField:** Correction de l'espacement interne ([#1211](https://github.com/assurance-maladie-digital/design-system/pull/1211))
 
 - ♻️ **Refactoring**
   - **ChoiceSliderField:** Refonte du composant ([#1193](https://github.com/assurance-maladie-digital/design-system/pull/1193)) ([8252ccf](https://github.com/assurance-maladie-digital/design-system/commit/8252ccfd3bf8637c20bf52b06e5e8c7f856d796e))
@@ -34,7 +35,7 @@
   - **typescript-eslint:** Mise à jour du monorepo vers la `v4.28.1` ([#1196](https://github.com/assurance-maladie-digital/design-system/pull/1196)) ([f895221](https://github.com/assurance-maladie-digital/design-system/commit/f895221b75e068618b34c02697e0b9474ebeefbe))
   - **eslint-plugin-jsdoc:** Mise à jour vers la `v35.4.1` ([#1197](https://github.com/assurance-maladie-digital/design-system/pull/1197)) ([8325600](https://github.com/assurance-maladie-digital/design-system/commit/8325600eebb77ac5735f60277cdc9b2d1bf3954f))
   - **typescript:** Mise à jour vers la `v4.3.5` ([#1201](https://github.com/assurance-maladie-digital/design-system/pull/1201)) ([c958d51](https://github.com/assurance-maladie-digital/design-system/commit/c958d510657de591daf65ee53936c89d9e7a48cf))
-  - **eslint:** Mise à jour vers la `v7.30.0` ([#1206](https://github.com/assurance-maladie-digital/design-system/pull/1206))
+  - **eslint:** Mise à jour vers la `v7.30.0` ([#1206](https://github.com/assurance-maladie-digital/design-system/pull/1206)) ([0e79970](https://github.com/assurance-maladie-digital/design-system/commit/0e79970185130f4227da0ae305cbac78cd540867))
 
 ## v2.0.0-beta.11
 

packages/form-builder/src/components/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap

@@ -397,7 +397,7 @@ exports[`FormBuilder renders correctly 1`] = `
       </p>
       <div>
         <div class="vd-choice-button-field">
-          <div class="vd-choice-button-field-toggle mb-2 layout wrap accent--text v-item-group theme--light v-btn-toggle" inline="true" hint="Texte informatif"><button type="button" value="0" class="text-none text-wrap py-2 text-left v-btn v-btn--outlined theme--light elevation-0 v-size--default accent--text" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
+          <div class="vd-choice-button-field-toggle layout wrap accent--text v-item-group theme--light v-btn-toggle" inline="true" hint="Texte informatif"><button type="button" value="0" class="text-none text-wrap py-2 text-left v-btn v-btn--outlined theme--light elevation-0 v-size--default accent--text" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
 				9h30
 			</span>
               <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate ml-1 white--text flex-shrink-0 theme--light" style="visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
@@ -410,7 +410,7 @@ exports[`FormBuilder renders correctly 1`] = `
 			</span>
               <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate ml-1 white--text flex-shrink-0 theme--light" style="visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
             </button></div>
-          <p class="px-3 mb-0 v-messages theme--light">
+          <p class="px-3 mt-2 mb-0 v-messages theme--light">
             Texte informatif
           </p>
         </div>
@@ -426,7 +426,7 @@ exports[`FormBuilder renders correctly 1`] = `
       </p>
       <div>
         <div class="vd-choice-button-field vd-form-input">
-          <div class="vd-choice-button-field-toggle mb-2 layout wrap accent--text v-item-group theme--light v-btn-toggle column"><button type="button" value="test1" class="text-none text-wrap py-2 text-left v-btn v-btn--outlined theme--light elevation-0 v-size--default accent--text" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
+          <div class="vd-choice-button-field-toggle layout wrap accent--text v-item-group theme--light v-btn-toggle column"><button type="button" value="test1" class="text-none text-wrap py-2 text-left v-btn v-btn--outlined theme--light elevation-0 v-size--default accent--text" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
 				Multiple 1
 			</span>
               <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate ml-1 white--text flex-shrink-0 theme--light" style="visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
@@ -455,7 +455,7 @@ exports[`FormBuilder renders correctly 1`] = `
       <!---->
       <div>
         <div class="vd-choice-button-field vd-form-input">
-          <div class="vd-choice-button-field-toggle mb-2 layout wrap accent--text v-item-group theme--light v-btn-toggle column"><button type="button" value="1" class="text-none text-wrap py-2 text-left v-btn white--text v-btn--active v-btn--has-bg theme--light elevation-0 v-size--default accent" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
+          <div class="vd-choice-button-field-toggle layout wrap accent--text v-item-group theme--light v-btn-toggle column"><button type="button" value="1" class="text-none text-wrap py-2 text-left v-btn white--text v-btn--active v-btn--has-bg theme--light elevation-0 v-size--default accent" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
 				Texte qui permet de tester sur plusieurs lignes
 			</span>
               <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate ml-1 white--text flex-shrink-0 theme--light" style="visibility: visible;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
@@ -478,7 +478,7 @@ exports[`FormBuilder renders correctly 1`] = `
       </p>
       <div>
         <div class="vd-choice-button-field vd-form-input">
-          <div class="vd-choice-button-field-toggle mb-2 layout wrap accent--text v-item-group theme--light v-btn-toggle column" label="Classic field" outlined="true"><button type="button" value="0" class="text-none text-wrap py-2 text-left v-btn white--text v-btn--active v-btn--has-bg theme--light elevation-0 v-size--default accent" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
+          <div class="vd-choice-button-field-toggle layout wrap accent--text v-item-group theme--light v-btn-toggle column" label="Classic field" outlined="true"><button type="button" value="0" class="text-none text-wrap py-2 text-left v-btn white--text v-btn--active v-btn--has-bg theme--light elevation-0 v-size--default accent" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
 				S
 			</span>
               <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate ml-1 white--text flex-shrink-0 theme--light" style="visibility: visible;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>

packages/form-builder/src/components/FormField/fields/ChoiceButtonField.vue

@@ -9,7 +9,7 @@
 			:multiple="multiple"
 			:type="undefined"
 			:class="{ 'column': !isInline }"
-			class="vd-choice-button-field-toggle mb-2 layout wrap accent--text"
+			class="vd-choice-button-field-toggle layout wrap accent--text"
 		>
 			<VBtn
 				v-for="(item, index) in filteredItems"
@@ -43,7 +43,7 @@
 			<p
 				v-for="(errorMessage, index) in errorMessages"
 				:key="index"
-				class="px-3 mb-0 v-messages error--text"
+				class="px-3 mt-2 mb-0 v-messages error--text"
 				:class="$vuetify.theme.dark ? 'theme--dark' : 'theme--light'"
 			>
 				{{ errorMessage }}
@@ -52,7 +52,7 @@
 
 		<p
 			v-else-if="showHint"
-			class="px-3 mb-0 v-messages"
+			class="px-3 mt-2 mb-0 v-messages"
 			:class="$vuetify.theme.dark ? 'theme--dark' : 'theme--light'"
 		>
 			{{ options.hint }}

packages/form-builder/src/components/FormField/fields/tests/__snapshots__/ChoiceField.spec.ts.snap

@@ -31,7 +31,7 @@ exports[`ChoiceField renders the other field when the corresponding choice is se
 exports[`ChoiceField renders with multiple error messages 1`] = `
 <div>
   <div class="vd-choice-button-field vd-form-input">
-    <div class="vd-choice-button-field-toggle mb-2 layout wrap accent--text v-item-group theme--light v-btn-toggle column" errormessages="Erreur 1,Erreur 2"><button type="button" value="0" class="text-none text-wrap py-2 text-left v-btn v-btn--outlined theme--light elevation-0 v-size--default accent--text" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
+    <div class="vd-choice-button-field-toggle layout wrap accent--text v-item-group theme--light v-btn-toggle column" errormessages="Erreur 1,Erreur 2"><button type="button" value="0" class="text-none text-wrap py-2 text-left v-btn v-btn--outlined theme--light elevation-0 v-size--default accent--text" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
 				S
 			</span>
         <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate ml-1 white--text flex-shrink-0 theme--light" style="visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
@@ -44,10 +44,10 @@ exports[`ChoiceField renders with multiple error messages 1`] = `
 			</span>
         <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate ml-1 white--text flex-shrink-0 theme--light" style="visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
       </button></div>
-    <p class="px-3 mb-0 v-messages error--text theme--light">
+    <p class="px-3 mt-2 mb-0 v-messages error--text theme--light">
       Erreur 1
     </p>
-    <p class="px-3 mb-0 v-messages error--text theme--light">
+    <p class="px-3 mt-2 mb-0 v-messages error--text theme--light">
       Erreur 2
     </p>
   </div>
@@ -58,7 +58,7 @@ exports[`ChoiceField renders with multiple error messages 1`] = `
 exports[`ChoiceField renders with single error message 1`] = `
 <div>
   <div class="vd-choice-button-field vd-form-input">
-    <div class="vd-choice-button-field-toggle mb-2 layout wrap accent--text v-item-group theme--light v-btn-toggle column" errormessages="Erreur"><button type="button" value="0" class="text-none text-wrap py-2 text-left v-btn v-btn--outlined theme--light elevation-0 v-size--default accent--text" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
+    <div class="vd-choice-button-field-toggle layout wrap accent--text v-item-group theme--light v-btn-toggle column" errormessages="Erreur"><button type="button" value="0" class="text-none text-wrap py-2 text-left v-btn v-btn--outlined theme--light elevation-0 v-size--default accent--text" style="height: auto; min-height: 40px;"><span class="v-btn__content"><span class="text-body-1">
 				S
 			</span>
         <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate ml-1 white--text flex-shrink-0 theme--light" style="visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
@@ -71,7 +71,7 @@ exports[`ChoiceField renders with single error message 1`] = `
 			</span>
         <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate ml-1 white--text flex-shrink-0 theme--light" style="visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
       </button></div>
-    <p class="px-3 mb-0 v-messages error--text theme--light">
+    <p class="px-3 mt-2 mb-0 v-messages error--text theme--light">
       Erreur
     </p>
   </div>