Merge pull request #30791 from Expensify/dangrous-updateradiochecks

Update Radio Checkbox Design

src/components/RadioButton.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -39,13 +40,15 @@ function RadioButton(props) {
             accessibilityLabel={props.accessibilityLabel}
             role={CONST.ACCESSIBILITY_ROLE.RADIO}
         >
-            <View style={[styles.radioButtonContainer, props.isChecked && styles.checkedContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
-                <Icon
-                    src={Expensicons.Checkmark}
-                    fill="white"
-                    height={14}
-                    width={14}
-                />
+            <View style={[styles.radioButtonContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
+                {props.isChecked && (
+                    <Icon
+                        src={Expensicons.Checkmark}
+                        fill={themeColors.checkBox}
+                        height={14}
+                        width={14}
+                    />
+                )}
             </View>
         </PressableWithFeedback>
     );

src/components/RadioButtonWithLabel.js

@@ -65,8 +65,8 @@ function RadioButtonWithLabel(props) {
                     style={[styles.flexRow, styles.flexWrap, styles.flexShrink1, styles.alignItemsCenter]}
                     wrapperStyle={[styles.ml3, styles.pr2, styles.w100]}
                     // disable hover style when disabled
-                    hoverDimmingValue={1}
-                    pressDimmingValue={0.2}
+                    hoverDimmingValue={0.8}
+                    pressDimmingValue={0.5}
                 >
                     {Boolean(props.label) && <Text style={[styles.ml1]}>{props.label}</Text>}
                     {Boolean(LabelComponent) && <LabelComponent />}

src/stories/RadioButtonWithLabel.stories.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import RadioButtonWithLabel from '@components/RadioButtonWithLabel';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+    title: 'Components/RadioButtonWithLabel',
+    component: RadioButtonWithLabel,
+};
+
+function Template(args) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <RadioButtonWithLabel {...args} />;
+}
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default = Template.bind({});
+const Checked = Template.bind({});
+Default.args = {
+    isChecked: false,
+    label: 'This radio button is unchecked',
+    onInputChange: () => {},
+};
+
+Checked.args = {
+    isChecked: true,
+    label: 'This radio button is checked',
+    onInputChange: () => {},
+};
+
+export default story;
+export {Default, Checked};

src/styles/styles.ts

@@ -2579,7 +2579,7 @@ const styles = (theme: ThemeColors) =>
             borderRadius: 10,
             height: 20,
             width: 20,
-            borderColor: theme.icon,
+            borderColor: theme.border,
             borderWidth: 1,
             justifyContent: 'center',
             alignItems: 'center',