🍒 Cherry pick PR #7149 to staging 🍒

android/app/build.gradle

@@ -149,8 +149,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001012901
-        versionName "1.1.29-1"
+        versionCode 1001012902
+        versionName "1.1.29-2"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -31,7 +31,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.29.1</string>
+	<string>1.1.29.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.29.1</string>
+	<string>1.1.29.2</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.29-1",
+  "version": "1.1.29-2",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/TextInput/baseTextInputPropTypes.js

@@ -28,6 +28,7 @@ const propTypes = {
     /** input style */
     inputStyle: PropTypes.arrayOf(PropTypes.object),
 
+    /** If present, this prop forces the label to remain in a position where it will not collide with input text */
     forceActiveLabel: PropTypes.bool,
 
     /** Should the input auto focus? */

src/stories/TextInput.stories.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import TextInput from '../components/TextInput';
+
+/**
+ * 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/TextInput',
+    component: TextInput,
+};
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = args => <TextInput {...args} />;
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+
+const AutoFocus = Template.bind({});
+AutoFocus.args = {
+    label: 'Auto-focused text input',
+    name: 'AutoFocus',
+    autoFocus: true,
+};
+
+const Default = Template.bind({});
+Default.args = {
+    label: 'Default text input',
+    name: 'Default',
+};
+
+const DefaultValue = Template.bind({});
+DefaultValue.args = {
+    label: 'Input with default value',
+    name: 'DefaultValue',
+    defaultValue: 'My default value',
+};
+
+const ErrorStory = Template.bind({});
+ErrorStory.args = {
+    label: 'Input with error',
+    name: 'InputWithError',
+    errorText: 'This field has an error.',
+};
+
+const ForceActiveLabel = Template.bind({});
+ForceActiveLabel.args = {
+    label: 'Forced active label',
+    forceActiveLabel: true,
+};
+
+const Placeholder = Template.bind({});
+Placeholder.args = {
+    label: 'Input with placeholder',
+    name: 'Placeholder',
+    placeholder: 'My placeholder text',
+};
+
+export default story;
+export {
+    AutoFocus,
+    Default,
+    DefaultValue,
+    ErrorStory,
+    ForceActiveLabel,
+    Placeholder,
+};