fix(TDP-12616): fix checkbox mark style on multi-select (#4916)

Talend · Oct 3, 2023 · 941231e · 941231e
1 parent 8aef433
commit 941231e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/.changeset/plenty-ducks-impress.md 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
@@ -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 {