From 654eb453d5ff42677e09a9e00fe39a5491e5a3a2 Mon Sep 17 00:00:00 2001
From: Viktor Vorona <viktor.vorona@sonarsource.com>
Date: Mon, 16 Oct 2023 11:48:16 +0200
Subject: [PATCH] SONAR-20177 Fix Checkbox + Spinner implementation

---
 .../src/components/input/Checkbox.tsx         | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/server/sonar-web/design-system/src/components/input/Checkbox.tsx b/server/sonar-web/design-system/src/components/input/Checkbox.tsx
index 9266b88cd60..fa5014411da 100644
--- a/server/sonar-web/design-system/src/components/input/Checkbox.tsx
+++ b/server/sonar-web/design-system/src/components/input/Checkbox.tsx
@@ -76,12 +76,13 @@ export function Checkbox({
         onFocus={onFocus}
         type="checkbox"
       />
-      {!loading && (
-        <StyledCheckbox aria-hidden data-clickable="true" title={title}>
-          <CheckboxIcon checked={checked} thirdState={thirdState} />
-        </StyledCheckbox>
-      )}
-      <Spinner loading={loading} />
+      <div>
+        <Spinner loading={loading}>
+          <StyledCheckbox aria-hidden data-clickable="true" title={title}>
+            <CheckboxIcon checked={checked} thirdState={thirdState} />
+          </StyledCheckbox>
+        </Spinner>
+      </div>
       {!right && children}
     </CheckboxContainer>
   );
@@ -145,33 +146,33 @@ export const AccessibleCheckbox = styled.input`
 
   &:focus,
   &:active {
-    &:not(:disabled) + ${StyledCheckbox} {
+    &:not(:disabled) + div > ${StyledCheckbox} {
       outline: ${themeBorder('focus', 'primary')};
     }
   }
 
   &:checked {
-    & + ${StyledCheckbox} {
+    & + div > ${StyledCheckbox} {
       background: ${themeColor('primary')};
     }
-    &:disabled + ${StyledCheckbox} {
+    &:disabled + div > ${StyledCheckbox} {
       background: ${themeColor('checkboxDisabledChecked')};
     }
   }
 
   &:hover {
-    &:not(:disabled) + ${StyledCheckbox} {
+    &:not(:disabled) + div > ${StyledCheckbox} {
       background: ${themeColor('checkboxHover')};
       border: ${themeBorder('default', 'primary')};
     }
 
-    &:checked:not(:disabled) + ${StyledCheckbox} {
+    &:checked:not(:disabled) + div > ${StyledCheckbox} {
       background: ${themeColor('checkboxCheckedHover')};
       border: ${themeBorder('default', 'checkboxCheckedHover')};
     }
   }
 
-  &:disabled + ${StyledCheckbox} {
+  &:disabled + div > ${StyledCheckbox} {
     background: ${themeColor('checkboxDisabled')};
     color: ${themeColor('checkboxDisabled')};
     border: ${themeBorder('default', 'checkboxDisabledChecked')};
-- 
2.39.5