]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-20177 Fix Checkbox + Spinner implementation
authorViktor Vorona <viktor.vorona@sonarsource.com>
Mon, 16 Oct 2023 09:48:16 +0000 (11:48 +0200)
committersonartech <sonartech@sonarsource.com>
Tue, 17 Oct 2023 20:02:44 +0000 (20:02 +0000)
server/sonar-web/design-system/src/components/input/Checkbox.tsx

index 9266b88cd603fccf7b6bdbc77830e28f0b45c6d1..fa5014411da1ccc0d07361f2ee1589e88fc827da 100644 (file)
@@ -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')};