Merge pull request #28543 from Nikhil-Vats/27872_fix_checkbox_outline

Fix checkbox outline in TaskView
Expensify · Oct 2, 2023 · 0f42aea · 0f42aea
2 parents 7dae708 + 451218a
commit 0f42aea
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
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, styles.checkboxPressable]}
+            style={[props.style, StyleUtils.getCheckboxPressableStyle(props.containerBorderRadius + 2)]} // 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/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
@@ -44,10 +44,10 @@ function BaseListItem({item, isFocused = false, isDisabled = false, showTooltip,
                     ]}
                 >
                     {canSelectMultiple && (
-                        <View style={styles.checkboxPressable}>
+                        <View style={StyleUtils.getCheckboxPressableStyle()}>
                             <View
                                 style={[
-                                    StyleUtils.getCheckboxContainerStyle(20, 4),
+                                    StyleUtils.getCheckboxContainerStyle(20),
                                     styles.mr3,
                                     item.isSelected && styles.checkedContainer,
                                     item.isSelected && styles.borderColorFocus,

diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
@@ -1147,10 +1147,23 @@ function getDisabledLinkStyles(isDisabled = false): ViewStyle | CSSProperties {
     };
 }
 
+/**
+ * Returns the checkbox pressable style
+ */
+function getCheckboxPressableStyle(borderRadius = 6): ViewStyle | CSSProperties {
+    return {
+        padding: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        // eslint-disable-next-line object-shorthand
+        borderRadius: borderRadius,
+    };
+}
+
 /**
  * Returns the checkbox container style
  */
-function getCheckboxContainerStyle(size: number, borderRadius: number): ViewStyle | CSSProperties {
+function getCheckboxContainerStyle(size: number, borderRadius = 4): ViewStyle | CSSProperties {
     return {
         backgroundColor: themeColors.componentBG,
         height: size,
@@ -1287,6 +1300,7 @@ export {
     getWrappingStyle,
     getMenuItemTextContainerStyle,
     getDisabledLinkStyles,
+    getCheckboxPressableStyle,
     getCheckboxContainerStyle,
     getDropDownButtonHeight,
     getAmountFontSizeAndLineHeight,

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2448,13 +2448,6 @@ const styles = (theme) => ({
         alignItems: 'center',
     },
 
-    checkboxPressable: {
-        borderRadius: 6,
-        padding: 2,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-
     checkedContainer: {
         backgroundColor: theme.checkBox,
     },