selectBtnField: fix padding + inline display (#3796)

packages/synapse-bridge/CHANGELOG.md

@@ -1,12 +1,12 @@
 #### v3.0.4
 
-- NirField: delete validation key in simple mode [`#3786`](https://github.com/assurance-maladie-digital/design-system/pull/3786)
-- DatePicker: fix hint padding [`#3781`](https://github.com/assurance-maladie-digital/design-system/pull/3781)
+-   NirField: delete validation key in simple mode [`#3786`](https://github.com/assurance-maladie-digital/design-system/pull/3786)
+-   DatePicker: fix hint padding [`#3781`](https://github.com/assurance-maladie-digital/design-system/pull/3781)
 
 #### v3.0.3
 
-- NotificationBar: fix success color [`#3777`](https://github.com/assurance-maladie-digital/design-system/pull/3777)
-- DatePicker: refacto and fix bugs [`#3763`](https://github.com/assurance-maladie-digital/design-system/pull/3763)
+-   NotificationBar: fix success color [`#3777`](https://github.com/assurance-maladie-digital/design-system/pull/3777)
+-   DatePicker: refacto and fix bugs [`#3763`](https://github.com/assurance-maladie-digital/design-system/pull/3763)
 
 #### v3.0.2
 

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

@@ -293,20 +293,20 @@ exports[`ChoiceField > renders with multiple error messages 1`] = `
 <div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div data-v-60156eea="">
-      <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field" type="choiceButton" color="primary">
+      <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field bg-secondary" type="choiceButton" color="primary">
         <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary">
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">S</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">S</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">M</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">M</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="autre"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Autre</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Autre</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
@@ -324,20 +324,20 @@ exports[`ChoiceField > renders with single error message 1`] = `
 <div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div data-v-60156eea="">
-      <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field" type="choiceButton" color="primary">
+      <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field bg-secondary" type="choiceButton" color="primary">
         <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary">
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">S</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">S</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">M</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">M</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="autre"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Autre</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Autre</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>

packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue

@@ -307,7 +307,10 @@ export default defineComponent({
 								class="error-message"
 							>
 								<ul>
-									<li v-for="error in errorMessages" :key="error">
+									<li
+										v-for="error in errorMessages"
+										:key="error"
+									>
 										{{ error }}
 									</li>
 								</ul>

packages/synapse-bridge/src/patterns/NirField/tests/NirField.spec.ts

@@ -591,5 +591,5 @@ describe('NirField', () => {
 
 		expect(wrapper.text()).toContain(locales.errorRequiredNumber)
 		expect(wrapper.text()).not.toContain(locales.errorRequiredKey)
-	});
+	})
 })

packages/synapse-bridge/src/patterns/NotificationBar/NotificationBar.vue

@@ -1,17 +1,17 @@
 <script lang="ts">
-import {defineComponent} from 'vue'
-import {mapActions, mapGetters} from 'vuex'
+import { defineComponent } from 'vue'
+import { mapActions, mapGetters } from 'vuex'
 import {
 	mdiAlertCircleOutline,
 	mdiAlertOctagonOutline,
 	mdiCheckCircleOutline,
 	mdiClose,
 	mdiInformationOutline,
 } from '@mdi/js'
-import {config} from './config'
-import {locales} from './locales'
-import {customizable} from '@/mixins/customizable'
-import type {IndexedObject} from '@/types'
+import { config } from './config'
+import { locales } from './locales'
+import { customizable } from '@/mixins/customizable'
+import type { IndexedObject } from '@/types'
 
 export default defineComponent({
 	mixins: [customizable(config)],
@@ -90,17 +90,18 @@ export default defineComponent({
 	watch: {
 		notification(): void {
 			if (!this.notification) {
-				this.snackbar = false;
-				return;
+				this.snackbar = false
+				return
 			}
 
-			this.snackbar = true;
+			this.snackbar = true
 			if (this.notification.type === 'success') {
-				this.snackbarColor = '#56C271';
+				this.snackbarColor = '#56C271'
 			} else {
-				this.snackbarColor = this.options.snackBar.color || this.notification.type;
+				this.snackbarColor =
+					this.options.snackBar.color || this.notification.type
 			}
-		}
+		},
 	},
 	methods: {
 		...mapActions('notification', {
@@ -145,7 +146,7 @@ export default defineComponent({
 
 			{{ notification?.message }}
 
-			<VSpacer/>
+			<VSpacer />
 
 			<VDivider
 				v-if="mobileVersion && hasLongContent"
@@ -164,7 +165,7 @@ export default defineComponent({
 					class="mx-4"
 				/>
 				<slot :attrs="actionSlotAttrs" name="action"></slot>
-				<slot name="default"/>
+				<slot name="default" />
 				<VBtn
 					:class="{ 'ma-0': smallCloseBtn }"
 					:color="contentColor"
@@ -245,6 +246,6 @@ $breakpoint-xs: 600px;
 
 :deep(.v-divider--vertical) {
 	height: 35px;
-	opacity: 0.50;
+	opacity: 0.5;
 }
 </style>

packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue

@@ -139,7 +139,10 @@ export default defineComponent({
 </script>
 
 <template>
-	<div :class="{ 'vd-form-input': !inline }" class="vd-select-btn-field">
+	<div
+		:class="{ 'vd-form-input': !inline }"
+		class="vd-select-btn-field bg-secondary"
+	>
 		<VBtnToggle
 			v-bind="options.btnToggle"
 			tag="ul"
@@ -178,7 +181,6 @@ export default defineComponent({
 						v-bind="options.icon"
 						:style="getIconStyles(item)"
 						role="img"
-						:hidden="!isSelected(item.value)"
 						:aria-hidden="!isSelected(item.value)"
 						aria-label="Sélectionné"
 					>
@@ -214,10 +216,12 @@ export default defineComponent({
 
 .vd-select-btn-field-toggle {
 	background: none !important;
+	padding-left: 0 !important;
 
 	.v-btn {
 		background: #fff;
 		border-width: 1px !important;
+		min-width: 48px !important;
 
 		&.v-btn--active::before {
 			opacity: 0 !important;
@@ -226,11 +230,11 @@ export default defineComponent({
 		:deep(.v-btn__content) {
 			flex-shrink: 1 !important;
 		}
+	}
 
-		:deep(.v-icon__svg) {
-			height: 1.5rem;
-			width: 1.5rem;
-		}
+	.v-icon {
+		height: 1.5rem;
+		width: 1.5rem;
 	}
 
 	&.flex-column {