From d6f3a6568390e9816154987eb1b149464c98ca41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Moreno?= <andremoreno3@gmail.com>
Date: Mon, 2 Oct 2023 13:48:08 +0100
Subject: [PATCH] fix(TDP-12616): fix checkbox mark style on multi-select

---
 .changeset/plenty-ducks-impress.md                  |  5 +++++
 .../src/MultiSelect/ItemOption.module.scss          | 13 +++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/plenty-ducks-impress.md

diff --git a/.changeset/plenty-ducks-impress.md b/.changeset/plenty-ducks-impress.md
new file mode 100644
index 00000000000..5f7d337b5c0
--- /dev/null
+++ b/.changeset/plenty-ducks-impress.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+fix(TDP-12616): fix checkbox mark style on multi-select
diff --git a/packages/components/src/MultiSelect/ItemOption.module.scss b/packages/components/src/MultiSelect/ItemOption.module.scss
index 7c8c4c16be1..d469cfaf501 100644
--- a/packages/components/src/MultiSelect/ItemOption.module.scss
+++ b/packages/components/src/MultiSelect/ItemOption.module.scss
@@ -21,10 +21,19 @@
 	}
 
 	input[type='checkbox'],
-	:global(.checkbox input + ::before),
-	:global(.checkbox input + ::after) {
+	:global(.checkbox input + ::before) {
 		top: calc($padding-normal / 2);
 	}
+
+	:global(.checkbox input + ::after) {
+		/* tricky calculation to center the checkmark
+		 * $padding-normal / 2 = top gap, same as the input (see above)
+		 * tokens.$coral-sizing-xxxs = checkbox size
+		 * tokens.$coral-sizing-xxxs / 2 = mark size
+		 * 2px = 2 * 1px (the border width)
+		 */
+		top: calc($padding-normal / 2 + (tokens.$coral-sizing-xxxs - tokens.$coral-sizing-xxxs / 2 - 2px) / 2) !important; /* stylelint-disable-line declaration-no-important */
+	}
 }
 
 .item {