From 4a7eaddaa4681523f306c69e118d368cc6e0cca1 Mon Sep 17 00:00:00 2001
From: Daniel Gale-Rosen <dgalerosen@expensify.com>
Date: Thu, 2 Nov 2023 14:52:06 -0400
Subject: [PATCH 1/3] update styles

---
 src/components/RadioButton.js          | 9 +++++----
 src/components/RadioButtonWithLabel.js | 2 +-
 src/styles/styles.ts                   | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
index 9d8e739d723c..8b7afd42ca3e 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.js
@@ -3,6 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import styles from '@styles/styles';
 import CONST from '@src/CONST';
+import themeColors from '@styles/themes/default';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
@@ -39,13 +40,13 @@ function RadioButton(props) {
             accessibilityLabel={props.accessibilityLabel}
             accessibilityRole={CONST.ACCESSIBILITY_ROLE.RADIO}
         >
-            <View style={[styles.radioButtonContainer, props.isChecked && styles.checkedContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
-                <Icon
+            <View style={[styles.radioButtonContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
+                {props.isChecked && <Icon
                     src={Expensicons.Checkmark}
-                    fill="white"
+                    fill={themeColors.checkBox}
                     height={14}
                     width={14}
-                />
+                />}
             </View>
         </PressableWithFeedback>
     );
diff --git a/src/components/RadioButtonWithLabel.js b/src/components/RadioButtonWithLabel.js
index 21a04bfcefef..5b2b31fe9a19 100644
--- a/src/components/RadioButtonWithLabel.js
+++ b/src/components/RadioButtonWithLabel.js
@@ -66,7 +66,7 @@ function RadioButtonWithLabel(props) {
                     wrapperStyle={[styles.ml3, styles.pr2, styles.w100]}
                     // disable hover style when disabled
                     hoverDimmingValue={1}
-                    pressDimmingValue={0.2}
+                    pressDimmingValue={1}
                 >
                     {Boolean(props.label) && <Text style={[styles.ml1]}>{props.label}</Text>}
                     {Boolean(LabelComponent) && <LabelComponent />}
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 404c5983d7f7..318c8db2f67f 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -2567,7 +2567,7 @@ const styles = (theme: ThemeDefault) =>
             borderRadius: 10,
             height: 20,
             width: 20,
-            borderColor: theme.icon,
+            borderColor: theme.border,
             borderWidth: 1,
             justifyContent: 'center',
             alignItems: 'center',

From 73b81f4ddeda9330e755dbc3359f3f5021a2e4da Mon Sep 17 00:00:00 2001
From: Daniel Gale-Rosen <dgalerosen@expensify.com>
Date: Tue, 7 Nov 2023 16:29:59 -0800
Subject: [PATCH 2/3] update hover and press

---
 src/components/RadioButton.js          | 16 +++++++++-------
 src/components/RadioButtonWithLabel.js |  4 ++--
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
index 8b7afd42ca3e..a8ac974ac5fe 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import styles from '@styles/styles';
-import CONST from '@src/CONST';
 import themeColors from '@styles/themes/default';
+import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
@@ -41,12 +41,14 @@ function RadioButton(props) {
             accessibilityRole={CONST.ACCESSIBILITY_ROLE.RADIO}
         >
             <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}
-                />}
+                {props.isChecked && (
+                    <Icon
+                        src={Expensicons.Checkmark}
+                        fill={themeColors.checkBox}
+                        height={14}
+                        width={14}
+                    />
+                )}
             </View>
         </PressableWithFeedback>
     );
diff --git a/src/components/RadioButtonWithLabel.js b/src/components/RadioButtonWithLabel.js
index 5b2b31fe9a19..039b93ac8a0f 100644
--- a/src/components/RadioButtonWithLabel.js
+++ b/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={1}
+                    hoverDimmingValue={0.8}
+                    pressDimmingValue={0.5}
                 >
                     {Boolean(props.label) && <Text style={[styles.ml1]}>{props.label}</Text>}
                     {Boolean(LabelComponent) && <LabelComponent />}

From 76e119b6558acf8350563998dd0096006b39302a Mon Sep 17 00:00:00 2001
From: Daniel Gale-Rosen <dgalerosen@expensify.com>
Date: Tue, 7 Nov 2023 16:40:26 -0800
Subject: [PATCH 3/3] add story for testing

---
 src/stories/RadioButtonWithLabel.stories.js | 36 +++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/stories/RadioButtonWithLabel.stories.js

diff --git a/src/stories/RadioButtonWithLabel.stories.js b/src/stories/RadioButtonWithLabel.stories.js
new file mode 100644
index 000000000000..af5d6ec15a8c
--- /dev/null
+++ b/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};