fix style on buttons

assurance-maladie-digital · Jul 30, 2024 · e1ed7c0 · e1ed7c0
1 parent f9fb8ed
commit e1ed7c0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/packages/synapse-bridge/src/patterns/LangBtn/LangBtn.vue b/packages/synapse-bridge/src/patterns/LangBtn/LangBtn.vue
@@ -117,6 +117,7 @@ export default defineComponent({
 					...props,
 					...options.btn,
 				}"
+				:class="options.btn.variant === 'outlined' ? 'outlined-style' : ''"
 				id="lang-menu-btn"
 			>
 				<span :class="currentLangClass">
@@ -158,4 +159,8 @@ export default defineComponent({
 		height: 100%;
 	}
 }
+
+.outlined-style {
+	border: 1px solid currentColor;
+}
 </style>
diff --git a/packages/synapse-bridge/src/patterns/LangBtn/tests/__snapshots__/LangBtn.spec.ts.snap b/packages/synapse-bridge/src/patterns/LangBtn/tests/__snapshots__/LangBtn.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`LangBtn > open the menu when clicked 1`] = `
-<button data-v-4a841ee1="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined" aria-label="Choix de la langue. Actuellement Français" targetref="[object Object]" aria-haspopup="menu" aria-expanded="true" aria-owns="v-menu-0" id="lang-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+<button data-v-4a841ee1="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined outlined-style" aria-label="Choix de la langue. Actuellement Français" targetref="[object Object]" aria-haspopup="menu" aria-expanded="true" aria-owns="v-menu-0" id="lang-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
   <!----><span class="v-btn__content" data-no-activator=""><span data-v-4a841ee1="" class="ml-1">Français</span><i data-v-4a841ee1="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-default ml-1" aria-hidden="true"></i></span>
   <!---->
   <!---->
@@ -13,7 +13,7 @@ exports[`LangBtn > open the menu when clicked 1`] = `
 exports[`LangBtn > renders correctly 1`] = `<v-menu-stub data-v-4a841ee1="" class="vd-lang-btn" contentclass="vd-lang-menu" attach="false" closeonback="true" contained="false" disabled="false" noclickanimation="false" modelvalue="false" persistent="false" scrim="false" zindex="2000" activatorprops="[object Object]" openonhover="false" closeoncontentclick="true" closedelay="250" opendelay="300" eager="false" locationstrategy="connected" location="bottom" origin="auto" scrollstrategy="reposition" transition="[object Object]" offsety="true"></v-menu-stub>`;
 
 exports[`LangBtn > renders properly when all the languages are displayed 1`] = `
-<button data-v-4a841ee1="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined" aria-label="Choix de la langue. Actuellement Français" targetref="[object Object]" aria-haspopup="menu" aria-expanded="true" aria-owns="v-menu-0" id="lang-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+<button data-v-4a841ee1="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined outlined-style" aria-label="Choix de la langue. Actuellement Français" targetref="[object Object]" aria-haspopup="menu" aria-expanded="true" aria-owns="v-menu-0" id="lang-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
   <!----><span class="v-btn__content" data-no-activator=""><span data-v-4a841ee1="" class="">Français</span>
   <!--v-if--></span>
   <!---->

diff --git a/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue b/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue
@@ -253,7 +253,10 @@ export default defineComponent({
 	}
 
 	&.flex-column .v-btn:not(:last-child) {
-		border-inline-end: 1px solid;
+		border: 1px solid;
+	}
+	.v-btn:last-child {
+		border: 1px solid;
 	}
 }
 </style>
diff --git a/packages/synapse-bridge/src/styles/settings.scss b/packages/synapse-bridge/src/styles/settings.scss
@@ -263,3 +263,10 @@ a {
 	background: rgba(0, 0, 0, 0.54) !important;
 }
 
+// Btn : lowercase text-transform and padding
+
+.v-btn {
+	text-transform: none !important;
+	padding: 0 0.5rem;
+}
+