Merge pull request #28785 from BhuvaneshPatil/27703-align-checkboxes

fix: align checkbox with input levels
Expensify · Oct 6, 2023 · 0ce103d · 0ce103d
2 parents 98f3b43 + 0397cfc
commit 0ce103d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
@@ -91,7 +91,7 @@ function Checkbox(props) {
             onPress={firePressHandlerOnClick}
             onMouseDown={props.onMouseDown}
             ref={props.forwardedRef}
-            style={[props.style, StyleUtils.getCheckboxPressableStyle(props.containerBorderRadius + 2)]} // to align outline on focus, border-radius of pressable should be 2px more than Checkbox
+            style={[StyleUtils.getCheckboxPressableStyle(props.containerBorderRadius + 2), props.style]} // to align outline on focus, border-radius of pressable should be 2px more than Checkbox
             onKeyDown={handleSpaceKey}
             accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
             accessibilityState={{checked: props.isChecked}}

diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
@@ -102,6 +102,7 @@ function CheckboxWithLabel(props) {
                     isChecked={isChecked}
                     onPress={toggleCheckbox}
                     label={props.label}
+                    style={[styles.checkboxWithLabelCheckboxStyle]}
                     hasError={Boolean(props.errorText)}
                     forwardedRef={props.forwardedRef}
                     accessibilityLabel={props.accessibilityLabel || props.label}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -3718,6 +3718,10 @@ const styles = (theme) => ({
     receiptDropHeaderGap: {
         backgroundColor: theme.receiptDropUIBG,
     },
+
+    checkboxWithLabelCheckboxStyle: {
+        marginLeft: -2,
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument