fix du style des buttons et fix de l'issue sur l'uppercase dans les b…

…tns (#3667)
assurance-maladie-digital · Jul 31, 2024 · 7ec7f49 · 7ec7f49
1 parent b58f066
commit 7ec7f49
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 10 deletions.
diff --git a/packages/synapse-bridge/src/elements/DownloadBtn/DownloadBtn.vue b/packages/synapse-bridge/src/elements/DownloadBtn/DownloadBtn.vue
@@ -112,6 +112,7 @@ export default defineComponent({
 	<VBtn
 		v-bind="btnOptions"
 		:loading="state === StateEnum.PENDING"
+		:class="btnOptions.variant === 'outlined' ? 'outlined-style' : ''"
 		class="vd-download-btn"
 		data-testid="download-btn"
 		@click="download"
@@ -135,4 +136,8 @@ export default defineComponent({
 		flex: none;
 	}
 }
+
+.outlined-style {
+	border: 1px solid currentColor;
+}
 </style>
diff --git a/...ages/synapse-bridge/src/elements/DownloadBtn/tests/__snapshots__/DownloadBtn.spec.ts.snap b/...ages/synapse-bridge/src/elements/DownloadBtn/tests/__snapshots__/DownloadBtn.spec.ts.snap
@@ -1,15 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DownloadBtn > renders correctly 1`] = `
-<button data-v-7802df62="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap vd-download-btn" style="height: auto; min-height: 36px;" data-testid="download-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+<button data-v-7802df62="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap outlined-style vd-download-btn" style="height: auto; min-height: 36px;" data-testid="download-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
   <!----><span class="v-btn__content" data-no-activator=""><i data-v-7802df62="" class="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary mr-3" aria-hidden="true"></i></span>
   <!---->
   <!---->
 </button>
 `;
 
 exports[`DownloadBtn > with slots 1`] = `
-<button data-v-7802df62="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap vd-download-btn" style="height: auto; min-height: 36px;" data-testid="download-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+<button data-v-7802df62="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap outlined-style vd-download-btn" style="height: auto; min-height: 36px;" data-testid="download-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
   <!----><span class="v-btn__content" data-no-activator=""><i data-v-7802df62="" class="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary mr-3" aria-hidden="true"></i>Download</span>
   <!---->
   <!---->

diff --git a/packages/synapse-bridge/src/patterns/FileUpload/FileUpload.vue b/packages/synapse-bridge/src/patterns/FileUpload/FileUpload.vue
@@ -124,7 +124,7 @@ export default defineComponent({
 				</span>
 
 				<span
-					class="vd-file-upload-btn bg-primary text-white text-uppercase py-2 px-4 elevation-2"
+					class="vd-file-upload-btn bg-primary text-white py-2 px-4 elevation-2"
 				>
 					<slot name="button-text">
 						{{ locales.chooseFile }}
@@ -190,6 +190,7 @@ export default defineComponent({
 .vd-file-upload-btn {
 	border-radius: 4px;
 	transition: background 0.25s;
+	font-weight: 600 !important;
 }
 input[disabled] ~ .vd-file-upload-placeholder {
 	opacity: 0.2;

diff --git a/packages/synapse-bridge/src/patterns/FileUpload/tests/__snapshots__/FileUpload.spec.ts.snap b/packages/synapse-bridge/src/patterns/FileUpload/tests/__snapshots__/FileUpload.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`FileUpload > renders correctly 1`] = `<label data-v-b5ec5665="" style="width: 100%;" class="text-primary vd-file-upload d-block pa-4"><input data-v-b5ec5665="" type="file" accept=".pdf,.jpg,.jpeg,.png" class="vd-file-upload-input"><span data-v-b5ec5665="" class="vd-file-upload-placeholder"><v-icon-stub data-v-b5ec5665="" color="primary" disabled="false" start="false" end="false" size="40" tag="i"></v-icon-stub><span data-v-b5ec5665="" class="text-black mt-1 font-weight-medium">Placez votre fichier ici</span><span data-v-b5ec5665="" class="text-grey mb-2">Ou</span><span data-v-b5ec5665="" class="vd-file-upload-btn bg-primary text-white text-uppercase py-2 px-4 elevation-2">Choisir un fichier</span><span data-v-b5ec5665="" class="text-grey mt-4 text-body-2 font-weight-regular">Taille max. : 10 Mo. Formats acceptés : PDF, JPG, JPEG, PNG</span></span></label>`;
+exports[`FileUpload > renders correctly 1`] = `<label data-v-b5ec5665="" style="width: 100%;" class="text-primary vd-file-upload d-block pa-4"><input data-v-b5ec5665="" type="file" accept=".pdf,.jpg,.jpeg,.png" class="vd-file-upload-input"><span data-v-b5ec5665="" class="vd-file-upload-placeholder"><v-icon-stub data-v-b5ec5665="" color="primary" disabled="false" start="false" end="false" size="40" tag="i"></v-icon-stub><span data-v-b5ec5665="" class="text-black mt-1 font-weight-medium">Placez votre fichier ici</span><span data-v-b5ec5665="" class="text-grey mb-2">Ou</span><span data-v-b5ec5665="" class="vd-file-upload-btn bg-primary text-white py-2 px-4 elevation-2">Choisir un fichier</span><span data-v-b5ec5665="" class="text-grey mt-4 text-body-2 font-weight-regular">Taille max. : 10 Mo. Formats acceptés : PDF, JPG, JPEG, PNG</span></span></label>`;
 
-exports[`FileUpload > renders correctly in multiple mode 1`] = `<label data-v-b5ec5665="" style="width: 100%;" class="text-primary vd-file-upload d-block pa-4"><input data-v-b5ec5665="" type="file" multiple="" accept=".pdf,.jpg,.jpeg,.png" class="vd-file-upload-input"><span data-v-b5ec5665="" class="vd-file-upload-placeholder"><v-icon-stub data-v-b5ec5665="" color="primary" disabled="false" start="false" end="false" size="40" tag="i"></v-icon-stub><span data-v-b5ec5665="" class="text-black mt-1 font-weight-medium">Placez vos fichiers ici</span><span data-v-b5ec5665="" class="text-grey mb-2">Ou</span><span data-v-b5ec5665="" class="vd-file-upload-btn bg-primary text-white text-uppercase py-2 px-4 elevation-2">Choisir un fichier</span><span data-v-b5ec5665="" class="text-grey mt-4 text-body-2 font-weight-regular">Taille max. : 10 Mo. Formats acceptés : PDF, JPG, JPEG, PNG</span></span></label>`;
+exports[`FileUpload > renders correctly in multiple mode 1`] = `<label data-v-b5ec5665="" style="width: 100%;" class="text-primary vd-file-upload d-block pa-4"><input data-v-b5ec5665="" type="file" multiple="" accept=".pdf,.jpg,.jpeg,.png" class="vd-file-upload-input"><span data-v-b5ec5665="" class="vd-file-upload-placeholder"><v-icon-stub data-v-b5ec5665="" color="primary" disabled="false" start="false" end="false" size="40" tag="i"></v-icon-stub><span data-v-b5ec5665="" class="text-black mt-1 font-weight-medium">Placez vos fichiers ici</span><span data-v-b5ec5665="" class="text-grey mb-2">Ou</span><span data-v-b5ec5665="" class="vd-file-upload-btn bg-primary text-white py-2 px-4 elevation-2">Choisir un fichier</span><span data-v-b5ec5665="" class="text-grey mt-4 text-body-2 font-weight-regular">Taille max. : 10 Mo. Formats acceptés : PDF, JPG, JPEG, PNG</span></span></label>`;
 
-exports[`FileUpload > renders correctly with only one extension allowed 1`] = `<label data-v-b5ec5665="" style="width: 100%;" class="text-primary vd-file-upload d-block pa-4"><input data-v-b5ec5665="" type="file" accept=".pdf" class="vd-file-upload-input"><span data-v-b5ec5665="" class="vd-file-upload-placeholder"><v-icon-stub data-v-b5ec5665="" color="primary" disabled="false" start="false" end="false" size="40" tag="i"></v-icon-stub><span data-v-b5ec5665="" class="text-black mt-1 font-weight-medium">Placez votre fichier ici</span><span data-v-b5ec5665="" class="text-grey mb-2">Ou</span><span data-v-b5ec5665="" class="vd-file-upload-btn bg-primary text-white text-uppercase py-2 px-4 elevation-2">Choisir un fichier</span><span data-v-b5ec5665="" class="text-grey mt-4 text-body-2 font-weight-regular">Taille max. : 10 Mo. Format accepté : PDF</span></span></label>`;
+exports[`FileUpload > renders correctly with only one extension allowed 1`] = `<label data-v-b5ec5665="" style="width: 100%;" class="text-primary vd-file-upload d-block pa-4"><input data-v-b5ec5665="" type="file" accept=".pdf" class="vd-file-upload-input"><span data-v-b5ec5665="" class="vd-file-upload-placeholder"><v-icon-stub data-v-b5ec5665="" color="primary" disabled="false" start="false" end="false" size="40" tag="i"></v-icon-stub><span data-v-b5ec5665="" class="text-black mt-1 font-weight-medium">Placez votre fichier ici</span><span data-v-b5ec5665="" class="text-grey mb-2">Ou</span><span data-v-b5ec5665="" class="vd-file-upload-btn bg-primary text-white py-2 px-4 elevation-2">Choisir un fichier</span><span data-v-b5ec5665="" class="text-grey mt-4 text-body-2 font-weight-regular">Taille max. : 10 Mo. Format accepté : PDF</span></span></label>`;
diff --git a/packages/synapse-bridge/src/patterns/HeaderBar/HeaderBar.vue b/packages/synapse-bridge/src/patterns/HeaderBar/HeaderBar.vue
@@ -297,6 +297,9 @@ export default defineComponent({
 </template>
 
 <style lang="scss" scoped>
+:deep(.v-btn) {
+	text-transform: uppercase !important;
+}
 .v-layout {
 	display: contents !important;
 }

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
@@ -252,8 +252,8 @@ export default defineComponent({
 		opacity: 0;
 	}
 
-	&.flex-column .v-btn:not(:last-child) {
-		border-inline-end: 1px solid;
+	&.flex-column .v-btn {
+		border: 1px solid;
 	}
 }
 </style>
diff --git a/packages/synapse-bridge/src/patterns/UploadWorkflow/UploadWorkflow.vue b/packages/synapse-bridge/src/patterns/UploadWorkflow/UploadWorkflow.vue
@@ -175,3 +175,4 @@ export default defineComponent({
 		</DialogBox>
 	</div>
 </template>
+
diff --git a/packages/synapse-bridge/src/styles/settings.scss b/packages/synapse-bridge/src/styles/settings.scss
@@ -263,3 +263,17 @@ 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;
+	font-weight: 600 !important;
+	letter-spacing: .005em !important;
+}
+
+.v-btn--size-default {
+	--v-btn-size: 1rem !important;
+	padding: 0 16px !important;
+}
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -175,3 +175,4 @@ export default defineComponent({
		</DialogBox>
		</div>
		</template>