Rename expensify button

STORYBOOK.md

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

STYLING.md

@@ -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
-<ExpensifyButton title="Submit" success large />
+<Button title="Submit" success large />
 ```
 
 ## Inline Styles

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 ExpensifyButton from './ExpensifyButton';
+import Button from './Button';
 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 && (
-                        <ExpensifyButton
+                        <Button
                             success
                             style={[styles.buttonConfirm]}
                             textStyles={[styles.buttonConfirmText]}

src/components/AttachmentPicker/attachmentPickerPropTypes.js

@@ -8,7 +8,7 @@ const propTypes = {
      * @example
      * <AttachmentPicker>
      * {({openPicker}) => (
-     *     <ExpensifyButton
+     *     <Button
      *         onPress={() => {
      *             openPicker({
      *                 onPicked: (file) => {

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 ExpensifyButton from './ExpensifyButton';
+import Button from './Button';
 import ControlSelection from '../libs/ControlSelection';
 
 const propTypes = {
@@ -54,7 +54,7 @@ class BigNumberPad extends React.Component {
                             // avoid unccessary space before the first column.
                             const marginLeft = columnIndex > 0 ? styles.ml3 : {};
                             return (
-                                <ExpensifyButton
+                                <Button
                                     key={column}
                                     style={[styles.flex1, marginLeft]}
                                     text={column}

src/components/ExpensifyButton.js → src/components/Button.js

@@ -90,7 +90,7 @@ const defaultProps = {
     shouldRemoveLeftBorderRadius: false,
 };
 
-class ExpensifyButton extends Component {
+class Button extends Component {
     constructor(props) {
         super(props);
         this.additionalStyles = _.isArray(this.props.style) ? this.props.style : [this.props.style];
@@ -205,7 +205,7 @@ class ExpensifyButton extends Component {
     }
 }
 
-ExpensifyButton.propTypes = propTypes;
-ExpensifyButton.defaultProps = defaultProps;
+Button.propTypes = propTypes;
+Button.defaultProps = defaultProps;
 
-export default ExpensifyButton;
+export default Button;

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 ExpensifyButton from './ExpensifyButton';
+import Button from './Button';
 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]}>
-        <ExpensifyButton
+        <Button
             success
             onPress={props.onButtonPress}
             text={props.buttonText}
             isLoading={props.isLoading}
             shouldRemoveRightBorderRadius
             style={[styles.flex1]}
         />
-        <ExpensifyButton
+        <Button
             success
             style={[styles.buttonDropdown]}
             onPress={props.onDropdownPress}

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 ExpensifyButton from './ExpensifyButton';
+import Button from './Button';
 import ButtonWithDropdown from './ButtonWithDropdown';
 import PopoverMenu from './PopoverMenu';
 
@@ -66,7 +66,7 @@ class ButtonWithMenu extends PureComponent {
                         }}
                     />
                 ) : (
-                    <ExpensifyButton
+                    <Button
                         success
                         isDisabled={this.props.isDisabled}
                         style={[styles.w100]}

src/components/ConfirmModal.js

@@ -9,7 +9,7 @@ import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
-import ExpensifyButton from './ExpensifyButton';
+import Button from './Button';
 import ExpensifyText from './ExpensifyText';
 
 const propTypes = {
@@ -75,7 +75,7 @@ const ConfirmModal = props => (
                     </ExpensifyText>
                 ) : (props.prompt)}
 
-            <ExpensifyButton
+            <Button
                 success
                 danger={props.danger}
                 style={[styles.mt4]}
@@ -85,7 +85,7 @@ const ConfirmModal = props => (
             />
             {props.shouldShowCancelButton
             && (
-                <ExpensifyButton
+                <Button
                     style={[styles.mt3]}
                     onPress={props.onCancel}
                     text={props.cancelText || props.translate('common.no')}

src/components/FormAlertWithSubmitButton.js

@@ -6,7 +6,7 @@ import styles from '../styles/styles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import colors from '../styles/colors';
-import ExpensifyButton from './ExpensifyButton';
+import Button from './Button';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import TextLink from './TextLink';
 import ExpensifyText from './ExpensifyText';
@@ -102,7 +102,7 @@ const FormAlertWithSubmitButton = (props) => {
                     {getAlertPrompt()}
                 </View>
             )}
-            <ExpensifyButton
+            <Button
                 success
                 pressOnEnter
                 text={props.buttonText}

src/components/InboxCallButton.js

@@ -5,7 +5,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import Tooltip from './Tooltip';
-import ExpensifyButton from './ExpensifyButton';
+import Button from './Button';
 import * as Expensicons from './Icon/Expensicons';
 
 const propTypes = {
@@ -24,7 +24,7 @@ const InboxCallButton = props => (
         text={props.translate('requestCallPage.callButtonTooltip')}
         containerStyles={[styles.justifyContentCenter, styles.alignItemsCenter]}
     >
-        <ExpensifyButton
+        <Button
             onPress={() => {
                 Navigation.navigate(ROUTES.getRequestCallRoute(props.taskID));
             }}

src/pages/EnablePayments/OnfidoStep.js

@@ -8,7 +8,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
-import ExpensifyButton from '../../components/ExpensifyButton';
+import Button from '../../components/Button';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import styles from '../../styles/styles';
 import TextLink from '../../components/TextLink';
@@ -113,7 +113,7 @@ class OnfidoStep extends React.Component {
                                             .
                                         </ExpensifyText>
                                     </View>
-                                    <ExpensifyButton
+                                    <Button
                                         success
                                         text={this.props.translate('common.continue')}
                                         isLoading={this.props.walletOnfidoData.loading}
@@ -130,7 +130,7 @@ class OnfidoStep extends React.Component {
                                     <ExpensifyText style={[styles.h3, styles.textStrong, styles.mb2]}>
                                         {this.props.walletOnfidoData.error}
                                     </ExpensifyText>
-                                    <ExpensifyButton
+                                    <Button
                                         success
                                         text={this.props.translate('onfidoStep.tryAgain')}
                                         onPress={() => {

src/pages/EnablePayments/TermsStep.js

@@ -6,7 +6,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import styles from '../../styles/styles';
-import ExpensifyButton from '../../components/ExpensifyButton';
+import Button from '../../components/Button';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import CONST from '../../CONST';
 import TextLink from '../../components/TextLink';
@@ -106,7 +106,7 @@ class TermsStep extends React.Component {
                             {this.props.translate('termsStep.termsMustBeAccepted')}
                         </ExpensifyText>
                     )}
-                    <ExpensifyButton
+                    <Button
                         success
                         style={styles.mb4}
                         text={this.props.translate('termsStep.enablePayments')}

src/pages/NewChatPage.js

@@ -17,7 +17,7 @@ import ScreenWrapper from '../components/ScreenWrapper';
 import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
-import ExpensifyButton from '../components/ExpensifyButton';
+import Button from '../components/Button';
 import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import FixedFooter from '../components/FixedFooter';
 import personalDetailsPropType from './personalDetailsPropType';
@@ -265,7 +265,7 @@ class NewChatPage extends Component {
                                     />
                                     {this.props.isGroupChat && lodashGet(this.state, 'selectedOptions', []).length > 0 && (
                                         <FixedFooter>
-                                            <ExpensifyButton
+                                            <Button
                                                 success
                                                 onPress={this.createGroup}
                                                 style={[styles.w100]}

src/pages/RequestCallPage.js

@@ -12,7 +12,7 @@ import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import ONYXKEYS from '../ONYXKEYS';
 import compose from '../libs/compose';
 import FullNameInputRow from '../components/FullNameInputRow';
-import ExpensifyButton from '../components/ExpensifyButton';
+import Button from '../components/Button';
 import FixedFooter from '../components/FixedFooter';
 import CONST from '../CONST';
 import Growl from '../libs/Growl';
@@ -243,7 +243,7 @@ class RequestCallPage extends Component {
                         </View>
                     </ScrollView>
                     <FixedFooter>
-                        <ExpensifyButton
+                        <Button
                             success
                             onPress={this.onSubmit}
                             style={[styles.w100]}

src/pages/SetPasswordPage.js

@@ -14,7 +14,7 @@ import {
 import styles from '../styles/styles';
 import * as Session from '../libs/actions/Session';
 import ONYXKEYS from '../ONYXKEYS';
-import ExpensifyButton from '../components/ExpensifyButton';
+import Button from '../components/Button';
 import SignInPageLayout from './signin/SignInPageLayout';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
@@ -106,7 +106,7 @@ class SetPasswordPage extends Component {
                         />
                     </View>
                     <View>
-                        <ExpensifyButton
+                        <Button
                             success
                             style={[styles.mb2]}
                             text={this.props.translate('setPasswordPage.setPassword')}

src/pages/home/report/MarkerBadge/index.js

@@ -2,7 +2,7 @@ import React, {PureComponent} from 'react';
 import {Animated, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
-import ExpensifyButton from '../../../../components/ExpensifyButton';
+import Button from '../../../../components/Button';
 import ExpensifyText from '../../../../components/ExpensifyText';
 import Icon from '../../../../components/Icon';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
@@ -78,7 +78,7 @@ class MarkerBadge extends PureComponent {
                         styles.alignItemsCenter,
                     ]}
                     >
-                        <ExpensifyButton
+                        <Button
                             success
                             small
                             onPress={this.props.onClick}
@@ -102,7 +102,7 @@ class MarkerBadge extends PureComponent {
                             )}
                             shouldRemoveRightBorderRadius
                         />
-                        <ExpensifyButton
+                        <Button
                             success
                             small
                             style={[styles.buttonDropdown]}

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -11,7 +11,7 @@ import * as ReportScrollManager from '../../../libs/ReportScrollManager';
 import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import ExpensifyButton from '../../../components/ExpensifyButton';
+import Button from '../../../components/Button';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import compose from '../../../libs/compose';
 
@@ -163,13 +163,13 @@ class ReportActionItemMessageEdit extends React.Component {
                     />
                 </View>
                 <View style={[styles.flexRow, styles.mt1]}>
-                    <ExpensifyButton
+                    <Button
                         small
                         style={[styles.mr2]}
                         onPress={this.deleteDraft}
                         text={this.props.translate('common.cancel')}
                     />
-                    <ExpensifyButton
+                    <Button
                         small
                         success
                         style={[styles.mr2]}

src/pages/iou/IOUCurrencySelection.js

@@ -18,7 +18,7 @@ import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import CONST from '../../CONST';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
-import ExpensifyButton from '../../components/ExpensifyButton';
+import Button from '../../components/Button';
 import FixedFooter from '../../components/FixedFooter';
 import * as IOU from '../../libs/actions/IOU';
 
@@ -218,7 +218,7 @@ class IOUCurrencySelection extends Component {
                         </View>
                     </View>
                     <FixedFooter>
-                        <ExpensifyButton
+                        <Button
                             success
                             isDisabled={!this.props.iou.selectedCurrencyCode}
                             style={[styles.w100]}

src/pages/iou/steps/IOUAmountPage.js

@@ -16,7 +16,7 @@ import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
-import ExpensifyButton from '../../../components/ExpensifyButton';
+import Button from '../../../components/Button';
 import ExpensifyText from '../../../components/ExpensifyText';
 import CONST from '../../../CONST';
 
@@ -214,7 +214,7 @@ class IOUAmountPage extends React.Component {
                             />
                         ) : <View />}
 
-                    <ExpensifyButton
+                    <Button
                         success
                         style={[styles.w100, styles.mt5]}
                         onPress={() => this.props.onStepComplete(this.state.amount)}