Merge pull request #6538 from Expensify/puneet-text-button-cleanup

[No QA] Rename Button and Text components to ExpensifyButton and ExpensifyText
Expensify · Dec 3, 2021 · 95cbd34 · 95cbd34
2 parents f92580d + 60a3ad8
commit 95cbd34
Show file tree

Hide file tree

Showing 123 changed files with 668 additions and 669 deletions.
diff --git a/STORYBOOK.md b/STORYBOOK.md
@@ -36,16 +36,16 @@ Here's an example story:
 
 ```javascript
 import React from 'react';
-import Button from '../components/Button';
+import ExpensifyButton from '../components/ExpensifyButton';
 
 const story = {
 	// Title field will determine how the story displays in the sidebar
-    title: 'Components/Button',
-    component: Button,
+    title: 'Components/ExpensifyButton',
+    component: ExpensifyButton,
 };
 
 // Optional `args` are passed which determine the props the example component will have
-const Template = args => <Button {...args} />;
+const Template = args => <ExpensifyButton {...args} />;
 
 // Each story must be exported with a named export
 const Default = Template.bind({});

diff --git a/STYLE.md b/STYLE.md
@@ -277,16 +277,16 @@ render() {
 // Bad
 const UserInfo = ({name, email}) => (
 	<View>
-		<Text>Name: {name}</Text>
-		<Text>Email: {email}</Text>
+		<ExpensifyText>Name: {name}</ExpensifyText>
+		<ExpensifyText>Email: {email}</ExpensifyText>
 	</View>
 );
 
 // Good
 const UserInfo = props => (
     <View>
-        <Text>Name: {props.name}</Text>
-        <Text>Email: {props.email}</Text>
+        <ExpensifyText>Name: {props.name}</ExpensifyText>
+        <ExpensifyText>Email: {props.email}</ExpensifyText>
     </View>
 );
 ```
@@ -701,9 +701,9 @@ class BComposedComponent extends React.Component
     render() {
         return (
             <AComponent {...props}>
-                <Text>
+                <ExpensifyText>
                     {this.state.whatever}
-                </Text>
+                </ExpensifyText>
             </AComponent>
         )
     }

diff --git a/STYLING.md b/STYLING.md
@@ -15,21 +15,21 @@ If we need some minimal set of styling rules applied to a single-use component t
 ```jsx
 // Bad - Since we only use this style once in this component
 const TextWithPadding = props => (
-    <Text style={styles.textWithPadding}>
+    <ExpensifyText style={styles.textWithPadding}>
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 
 // Good
 const TextWithPadding = props => (
-    <Text
+    <ExpensifyText
         style={[
             styles.p5,
             styles.noWrap,
         ]}
     >
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 ```
 
@@ -46,7 +46,7 @@ Any array of styles associated with a single type of React element that has at l
 - If a reusable style has 3 or more modifiers it should be refactored into a component with props to modify the styles e.g.
 
 ```jsx
-<Button title="Submit" success large />
+<ExpensifyButton title="Submit" success large />
 ```
 
 ## Inline Styles
@@ -56,24 +56,24 @@ Any array of styles associated with a single type of React element that has at l
 ```jsx
 // Bad - Do not use inline styles
 const TextWithPadding = props => (
-    <Text style={{
+    <ExpensifyText style={{
         padding: 10,
         whiteSpace: props.shouldWrap ? 'wrap' : 'nowrap',
     }}>
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 
 // Good
 const TextWithPadding = props => (
-    <Text
+    <ExpensifyText
         style={[
             styles.p5,
             getTextWrapStyle(props.shouldWrap)
         ]}
     >
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 ```
 
@@ -85,34 +85,34 @@ There are many styles in the `styles.js` file. It is generally a bad practice to
 // Bad - Reuses style without generalizing style name
 const SettingsScreen = props => (
     <View>
-        <Text style={[styles.settingsScreenText]}>
+        <ExpensifyText style={[styles.settingsScreenText]}>
             Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
 const SomeOtherScreen = props => (
     <View>
-        <Text style={[styles.settingsScreenText]}>
+        <ExpensifyText style={[styles.settingsScreenText]}>
             New Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
 // Good
 const SettingsScreen = props => (
     <View>
-        <Text style={[styles.defaultScreenText]}>
+        <ExpensifyText style={[styles.defaultScreenText]}>
             Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
 const SomeOtherScreen = props => (
     <View>
-        <Text style={[styles.defaultScreenText]}>
+        <ExpensifyText style={[styles.defaultScreenText]}>
             New Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 ```
@@ -193,7 +193,7 @@ The only time we should allow a component to have a `style` prop with `PropTypes
 ```jsx
 // Good
 const CustomText = props => (
-    <Text style={props.style}>{props.children}</Text>
+    <ExpensifyText style={props.style}>{props.children}</ExpensifyText>
 );
 
 // Good
@@ -202,14 +202,14 @@ const CustomText = props => {
             ? props.style
             : [props.style];
 }(
-    <Text
+    <ExpensifyText
         style={[
             styles.defaultCustomText,
             ...propsStyle,
         ]}
     >
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 ```
 

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
@@ -16,7 +16,7 @@ import themeColors from '../styles/themes/default';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import ExpensiPicker from './ExpensiPicker';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import * as ReimbursementAccountUtils from '../libs/ReimbursementAccountUtils';
 import ReimbursementAccountForm from '../pages/ReimbursementAccount/ReimbursementAccountForm';
 import getBankIcon from './Icon/BankIcons';
@@ -176,15 +176,15 @@ class AddPlaidBankAccount extends React.Component {
                         onSubmit={this.selectAccount}
                     >
                         {!_.isEmpty(this.props.text) && (
-                            <Text style={[styles.mb5]}>{this.props.text}</Text>
+                            <ExpensifyText style={[styles.mb5]}>{this.props.text}</ExpensifyText>
                         )}
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
                             <Icon
                                 src={icon}
                                 height={iconSize}
                                 width={iconSize}
                             />
-                            <Text style={[styles.ml3, styles.textStrong]}>{this.state.institution.name}</Text>
+                            <ExpensifyText style={[styles.ml3, styles.textStrong]}>{this.state.institution.name}</ExpensifyText>
                         </View>
                         <View style={[styles.mb5]}>
                             <ExpensiPicker

diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import {Pressable, StyleSheet} from 'react-native';
 import lodashGet from 'lodash/get';
-import Text from '../../Text';
+import ExpensifyText from '../../ExpensifyText';
 import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
 import PressableWithSecondaryInteraction from '../../PressableWithSecondaryInteraction';
 import * as ReportActionContextMenu from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
@@ -69,7 +69,7 @@ class BaseAnchorForCommentsOnly extends React.Component {
                         }
                     }
                     >
-                        <Text
+                        <ExpensifyText
                             ref={el => linkRef = el}
                             style={StyleSheet.flatten(this.props.style)}
                             accessibilityRole="link"
@@ -82,7 +82,7 @@ class BaseAnchorForCommentsOnly extends React.Component {
                             {...rest}
                         >
                             {this.props.children}
-                        </Text>
+                        </ExpensifyText>
                     </PressableWithSecondaryInteraction>
                 )
         );

diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js
@@ -4,7 +4,7 @@ import lodashGet from 'lodash/get';
 import {Linking, StyleSheet, Pressable} from 'react-native';
 import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
 import fileDownload from '../../../libs/fileDownload';
-import Text from '../../Text';
+import ExpensifyText from '../../ExpensifyText';
 import PressableWithSecondaryInteraction from '../../PressableWithSecondaryInteraction';
 import * as ReportActionContextMenu from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as ContextMenuActions from '../../../pages/home/report/ContextMenu/ContextMenuActions';
@@ -73,14 +73,14 @@ class BaseAnchorForCommentsOnly extends React.Component {
                     }
                         onPress={() => Linking.openURL(this.props.href)}
                     >
-                        <Text
+                        <ExpensifyText
                             ref={el => linkRef = el}
                             style={StyleSheet.flatten(this.props.style)}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                             {...rest}
                         >
                             {this.props.children}
-                        </Text>
+                        </ExpensifyText>
                     </PressableWithSecondaryInteraction>
                 )
         );

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -11,7 +11,7 @@ import themeColors from '../styles/themes/default';
 import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import compose from '../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 import HeaderWithCloseButton from './HeaderWithCloseButton';
 import fileDownload from '../libs/fileDownload';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -153,7 +153,7 @@ class AttachmentModal extends PureComponent {
 
                     {/* If we have an onConfirm method show a confirmation button */}
                     {this.props.onConfirm && (
-                        <Button
+                        <ExpensifyButton
                             success
                             style={[styles.buttonConfirm]}
                             textStyles={[styles.buttonConfirmText]}

diff --git a/src/components/AttachmentPicker/attachmentPickerPropTypes.js b/src/components/AttachmentPicker/attachmentPickerPropTypes.js
@@ -8,7 +8,7 @@ const propTypes = {
      * @example
      * <AttachmentPicker>
      * {({openPicker}) => (
-     *     <Button
+     *     <ExpensifyButton
      *         onPress={() => {
      *             openPicker({
      *                 onPicked: (file) => {

diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
@@ -9,7 +9,7 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 import Tooltip from './Tooltip';
 import themeColors from '../styles/themes/default';
 
@@ -68,7 +68,7 @@ const AttachmentView = (props) => {
                 <Icon src={Expensicons.Paperclip} />
             </View>
 
-            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{props.file && props.file.name}</Text>
+            <ExpensifyText style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{props.file && props.file.name}</ExpensifyText>
             {!props.shouldShowLoadingSpinnerIcon && props.shouldShowDownloadIcon && (
                 <View style={styles.ml2}>
                     <Tooltip text={props.translate('common.download')}>

diff --git a/src/components/Badge.js b/src/components/Badge.js
@@ -3,7 +3,7 @@ import {Pressable, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
-import Text from './Text';
+import ExpensifyText from './ExpensifyText';
 
 const propTypes = {
     /** Is Success type */
@@ -48,12 +48,12 @@ const Badge = (props) => {
             style={props.pressable ? wrapperStyles : wrapperStyles(false)}
             onPress={props.onPress}
         >
-            <Text
+            <ExpensifyText
                 style={[styles.badgeText, textStyles]}
                 numberOfLines={1}
             >
                 {props.text}
-            </Text>
+            </ExpensifyText>
         </Wrapper>
     );
 };

diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 
 const propTypes = {
     /** Callback to inform parent modal with key pressed */
@@ -26,7 +26,7 @@ const BigNumberPad = props => (
                     // avoid unccessary space before the first column.
                     const marginLeft = columnIndex > 0 ? styles.ml3 : {};
                     return (
-                        <Button
+                        <ExpensifyButton
                             key={column}
                             style={[styles.flex1, marginLeft]}
                             text={column}

diff --git a/src/components/ButtonWithDropdown.js b/src/components/ButtonWithDropdown.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import styles from '../styles/styles';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import themeColors from '../styles/themes/default';
@@ -29,15 +29,15 @@ const defaultProps = {
 
 const ButtonWithDropdown = props => (
     <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-        <Button
+        <ExpensifyButton
             success
             onPress={props.onButtonPress}
             text={props.buttonText}
             isLoading={props.isLoading}
             shouldRemoveRightBorderRadius
             style={[styles.flex1]}
         />
-        <Button
+        <ExpensifyButton
             success
             style={[styles.buttonDropdown]}
             onPress={props.onDropdownPress}

diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import _ from 'underscore';
 import styles from '../styles/styles';
-import Button from './Button';
+import ExpensifyButton from './ExpensifyButton';
 import ButtonWithDropdown from './ButtonWithDropdown';
 import PopoverMenu from './PopoverMenu';
 
@@ -69,7 +69,7 @@ class ButtonWithMenu extends PureComponent {
                         }}
                     />
                 ) : (
-                    <Button
+                    <ExpensifyButton
                         success
                         isDisabled={this.props.isDisabled}
                         style={[styles.w100]}