Rename ExpensifyText

Expensify · Dec 18, 2021 · d6a6073 · d6a6073
1 parent d012bea
commit d6a6073
Show file tree

Hide file tree

Showing 119 changed files with 630 additions and 630 deletions.
diff --git a/STYLE.md b/STYLE.md
@@ -277,16 +277,16 @@ render() {
 // Bad
 const UserInfo = ({name, email}) => (
 	<View>
-		<ExpensifyText>Name: {name}</ExpensifyText>
-		<ExpensifyText>Email: {email}</ExpensifyText>
+		<Text>Name: {name}</Text>
+		<Text>Email: {email}</Text>
 	</View>
 );
 
 // Good
 const UserInfo = props => (
     <View>
-        <ExpensifyText>Name: {props.name}</ExpensifyText>
-        <ExpensifyText>Email: {props.email}</ExpensifyText>
+        <Text>Name: {props.name}</Text>
+        <Text>Email: {props.email}</Text>
     </View>
 );
 ```
@@ -701,9 +701,9 @@ class BComposedComponent extends React.Component
     render() {
         return (
             <AComponent {...props}>
-                <ExpensifyText>
+                <Text>
                     {this.state.whatever}
-                </ExpensifyText>
+                </Text>
             </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 => (
-    <ExpensifyText style={styles.textWithPadding}>
+    <Text style={styles.textWithPadding}>
         {props.children}
-    </ExpensifyText>
+    </Text>
 );
 
 // Good
 const TextWithPadding = props => (
-    <ExpensifyText
+    <Text
         style={[
             styles.p5,
             styles.noWrap,
         ]}
     >
         {props.children}
-    </ExpensifyText>
+    </Text>
 );
 ```
 
@@ -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 => (
-    <ExpensifyText style={{
+    <Text style={{
         padding: 10,
         whiteSpace: props.shouldWrap ? 'wrap' : 'nowrap',
     }}>
         {props.children}
-    </ExpensifyText>
+    </Text>
 );
 
 // Good
 const TextWithPadding = props => (
-    <ExpensifyText
+    <Text
         style={[
             styles.p5,
             getTextWrapStyle(props.shouldWrap)
         ]}
     >
         {props.children}
-    </ExpensifyText>
+    </Text>
 );
 ```
 
@@ -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>
-        <ExpensifyText style={[styles.settingsScreenText]}>
+        <Text style={[styles.settingsScreenText]}>
             Expensify
-        </ExpensifyText>
+        </Text>
     </View>
 );
 
 const SomeOtherScreen = props => (
     <View>
-        <ExpensifyText style={[styles.settingsScreenText]}>
+        <Text style={[styles.settingsScreenText]}>
             New Expensify
-        </ExpensifyText>
+        </Text>
     </View>
 );
 
 // Good
 const SettingsScreen = props => (
     <View>
-        <ExpensifyText style={[styles.defaultScreenText]}>
+        <Text style={[styles.defaultScreenText]}>
             Expensify
-        </ExpensifyText>
+        </Text>
     </View>
 );
 
 const SomeOtherScreen = props => (
     <View>
-        <ExpensifyText style={[styles.defaultScreenText]}>
+        <Text style={[styles.defaultScreenText]}>
             New Expensify
-        </ExpensifyText>
+        </Text>
     </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 => (
-    <ExpensifyText style={props.style}>{props.children}</ExpensifyText>
+    <Text style={props.style}>{props.children}</Text>
 );
 
 // Good
@@ -202,14 +202,14 @@ const CustomText = props => {
             ? props.style
             : [props.style];
 }(
-    <ExpensifyText
+    <Text
         style={[
             styles.defaultCustomText,
             ...propsStyle,
         ]}
     >
         {props.children}
-    </ExpensifyText>
+    </Text>
 );
 ```
 

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
@@ -17,7 +17,7 @@ import themeColors from '../styles/themes/default';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import ExpensiPicker from './ExpensiPicker';
-import ExpensifyText from './ExpensifyText';
+import Text from './Text';
 import * as ReimbursementAccountUtils from '../libs/ReimbursementAccountUtils';
 import ReimbursementAccountForm from '../pages/ReimbursementAccount/ReimbursementAccountForm';
 import getBankIcon from './Icon/BankIcons';
@@ -227,15 +227,15 @@ class AddPlaidBankAccount extends React.Component {
                         onSubmit={this.selectAccount}
                     >
                         {!_.isEmpty(this.props.text) && (
-                            <ExpensifyText style={[styles.mb5]}>{this.props.text}</ExpensifyText>
+                            <Text style={[styles.mb5]}>{this.props.text}</Text>
                         )}
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
                             <Icon
                                 src={icon}
                                 height={iconSize}
                                 width={iconSize}
                             />
-                            <ExpensifyText style={[styles.ml3, styles.textStrong]}>{this.state.institution.name}</ExpensifyText>
+                            <Text style={[styles.ml3, styles.textStrong]}>{this.state.institution.name}</Text>
                         </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 ExpensifyText from '../../ExpensifyText';
+import Text from '../../Text';
 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 {
                         }
                     }
                     >
-                        <ExpensifyText
+                        <Text
                             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}
-                        </ExpensifyText>
+                        </Text>
                     </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 ExpensifyText from '../../ExpensifyText';
+import Text from '../../Text';
 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)}
                     >
-                        <ExpensifyText
+                        <Text
                             ref={el => linkRef = el}
                             style={StyleSheet.flatten(this.props.style)}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                             {...rest}
                         >
                             {this.props.children}
-                        </ExpensifyText>
+                        </Text>
                     </PressableWithSecondaryInteraction>
                 )
         );

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 ExpensifyText from './ExpensifyText';
+import Text from './Text';
 import Tooltip from './Tooltip';
 import themeColors from '../styles/themes/default';
 
@@ -68,7 +68,7 @@ const AttachmentView = (props) => {
                 <Icon src={Expensicons.Paperclip} />
             </View>
 
-            <ExpensifyText style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{props.file && props.file.name}</ExpensifyText>
+            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{props.file && props.file.name}</Text>
             {!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 ExpensifyText from './ExpensifyText';
+import Text from './Text';
 
 const propTypes = {
     /** Is Success type */
@@ -48,12 +48,12 @@ const Badge = (props) => {
             style={props.pressable ? wrapperStyles : wrapperStyles(false)}
             onPress={props.onPress}
         >
-            <ExpensifyText
+            <Text
                 style={[styles.badgeText, textStyles]}
                 numberOfLines={1}
             >
                 {props.text}
-            </ExpensifyText>
+            </Text>
         </Wrapper>
     );
 };

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import OpacityView from './OpacityView';
-import ExpensifyText from './ExpensifyText';
+import Text from './Text';
 import KeyboardShortcut from '../libs/KeyboardShortcut';
 import Icon from './Icon';
 import CONST from '../CONST';
@@ -133,7 +133,7 @@ class Button extends Component {
         }
 
         const textComponent = (
-            <ExpensifyText
+            <Text
                 selectable={false}
                 style={[
                     styles.buttonText,
@@ -145,7 +145,7 @@ class Button extends Component {
                 ]}
             >
                 {this.props.text}
-            </ExpensifyText>
+            </Text>
         );
 
         if (this.props.icon) {

diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
@@ -4,7 +4,7 @@ import {View, TouchableOpacity} from 'react-native';
 import _ from 'underscore';
 import styles from '../styles/styles';
 import Checkbox from './Checkbox';
-import ExpensifyText from './ExpensifyText';
+import Text from './Text';
 import InlineErrorText from './InlineErrorText';
 
 const propTypes = {
@@ -68,9 +68,9 @@ const CheckboxWithLabel = (props) => {
                     ]}
                 >
                     {props.label && (
-                        <ExpensifyText style={[styles.ml2]}>
+                        <Text style={[styles.ml2]}>
                             {props.label}
-                        </ExpensifyText>
+                        </Text>
                     )}
                     {LabelComponent && (<LabelComponent />)}
                 </TouchableOpacity>

diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View, TouchableOpacity} from 'react-native';
 import PropTypes from 'prop-types';
 import Collapsible from './Collapsible';
-import ExpensifyText from '../ExpensifyText';
+import Text from '../Text';
 import styles from '../../styles/styles';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
@@ -39,9 +39,9 @@ class CollapsibleSection extends React.Component {
         return (
             <View style={styles.mt4}>
                 <TouchableOpacity onPress={this.toggleSection} style={[styles.pb4, styles.flexRow]}>
-                    <ExpensifyText style={[styles.flex1, styles.textStrong]}>
+                    <Text style={[styles.flex1, styles.textStrong]}>
                         {this.props.title}
-                    </ExpensifyText>
+                    </Text>
                     <Icon src={src} />
                 </TouchableOpacity>
                 <View style={styles.collapsibleSectionBorder} />

diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
@@ -10,7 +10,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimen
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import Button from './Button';
-import ExpensifyText from './ExpensifyText';
+import Text from './Text';
 
 const propTypes = {
     /** Title of the modal */
@@ -70,9 +70,9 @@ const ConfirmModal = props => (
 
             {_.isString(props.prompt)
                 ? (
-                    <ExpensifyText>
+                    <Text>
                         {props.prompt}
-                    </ExpensifyText>
+                    </Text>
                 ) : (props.prompt)}
 
             <Button

diff --git a/src/components/CopyTextToClipboard.js b/src/components/CopyTextToClipboard.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ExpensifyText from './ExpensifyText';
+import Text from './Text';
 import * as Expensicons from './Icon/Expensicons';
 import Clipboard from '../libs/Clipboard';
 import Icon from './Icon';
@@ -48,19 +48,19 @@ class CopyTextToClipboard extends React.Component {
 
     render() {
         return (
-            <ExpensifyText
+            <Text
                 onPress={this.copyToClipboard}
                 style={[styles.flexRow, styles.cursorPointer]}
             >
-                <ExpensifyText style={this.props.textStyles}>{this.props.text}</ExpensifyText>
+                <Text style={this.props.textStyles}>{this.props.text}</Text>
                 <Icon
                     src={this.state.showCheckmark ? Expensicons.Checkmark : Expensicons.Clipboard}
                     fill={this.state.showCheckmark ? themeColors.iconSuccessFill : themeColors.icon}
                     width={variables.iconSizeSmall}
                     height={variables.iconSizeSmall}
                     inline
                 />
-            </ExpensifyText>
+            </Text>
         );
     }
 }