[UI]-Dropdown Button

src/CONST.js

@@ -2563,7 +2563,14 @@ const CONST = {
         DISTANCE: 'distance',
     },
     STATUS_TEXT_MAX_LENGTH: 100,
+
+    DROPDOWN_BUTTON_SIZE: {
+        LARGE: 'large',
+        MEDIUM: 'medium',
+    },
+
     SF_COORDINATES: [-122.4194, 37.7749],
+
     MAPBOX_STYLE_URL: 'mapbox://styles/expensify/cllcoiqds00cs01r80kp34tmq',
     NAVIGATION: {
         TYPE: {

src/components/ButtonWithDropdownMenu.js

@@ -10,6 +10,7 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import themeColors from '../styles/themes/default';
 import CONST from '../CONST';
+import * as StyleUtils from '../styles/StyleUtils';
 
 const propTypes = {
     /** Text to display for the menu header */
@@ -21,6 +22,9 @@ const propTypes = {
     /** Whether we should show a loading state for the main button */
     isLoading: PropTypes.bool,
 
+    /** The size of button size */
+    buttonSize: PropTypes.oneOf(_.values(CONST.DROPDOWN_BUTTON_SIZE)),
+
     /** Should the confirmation button be disabled? */
     isDisabled: PropTypes.bool,
 
@@ -55,6 +59,7 @@ const defaultProps = {
     isDisabled: false,
     menuHeaderText: '',
     style: [],
+    buttonSize: CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
     anchorAlignment: {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
@@ -69,6 +74,8 @@ function ButtonWithDropdownMenu(props) {
     const {windowWidth, windowHeight} = useWindowDimensions();
     const caretButton = useRef(null);
     const selectedItem = props.options[selectedItemIndex];
+    const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(props.buttonSize);
+    const isButtonSizeLarge = props.buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE;
 
     useEffect(() => {
         if (!caretButton.current) {
@@ -102,20 +109,31 @@ function ButtonWithDropdownMenu(props) {
                         shouldRemoveRightBorderRadius
                         style={[styles.flex1, styles.pr0]}
                         pressOnEnter
+                        large={isButtonSizeLarge}
+                        medium={!isButtonSizeLarge}
+                        innerStyles={[innerStyleDropButton]}
                     />
-                    <View style={styles.buttonDivider} />
+
                     <Button
                         ref={caretButton}
                         success
                         isDisabled={props.isDisabled}
                         style={[styles.pl0]}
                         onPress={() => setIsMenuVisible(!isMenuVisible)}
                         shouldRemoveLeftBorderRadius
+                        large={isButtonSizeLarge}
+                        medium={!isButtonSizeLarge}
+                        innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton]}
                     >
-                        <Icon
-                            src={Expensicons.DownArrow}
-                            fill={themeColors.textLight}
-                        />
+                        <View style={[styles.dropDownButtonCartIconView, innerStyleDropButton]}>
+                            <View style={[styles.buttonDivider]} />
+                            <View style={[styles.dropDownButtonArrowContain]}>
+                                <Icon
+                                    src={Expensicons.DownArrow}
+                                    fill={themeColors.textLight}
+                                />
+                            </View>
+                        </View>
                     </Button>
                 </View>
             ) : (
@@ -127,6 +145,9 @@ function ButtonWithDropdownMenu(props) {
                     text={selectedItem.text}
                     onPress={(event) => props.onPress(event, props.options[0].value)}
                     pressOnEnter
+                    large={isButtonSizeLarge}
+                    medium={!isButtonSizeLarge}
+                    innerStyles={[innerStyleDropButton]}
                 />
             )}
             {props.options.length > 1 && !_.isEmpty(popoverAnchorPosition) && (

src/components/MoneyRequestConfirmationList.js

@@ -300,6 +300,7 @@ function MoneyRequestConfirmationList(props) {
                 currency={props.iouCurrencyCode}
                 policyID={props.policyID}
                 shouldShowPaymentOptions
+                buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE}
                 anchorAlignment={{
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
@@ -310,6 +311,7 @@ function MoneyRequestConfirmationList(props) {
                 isDisabled={shouldDisableButton}
                 onPress={(_event, value) => confirm(value)}
                 options={splitOrRequestOptions}
+                buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE}
             />
         );
     }, [confirm, props.selectedParticipants, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions]);

src/components/SettlementButton.js

@@ -57,7 +57,11 @@ const propTypes = {
     /** Total money amount in form <currency><amount> */
     formattedAmount: PropTypes.string,
 
+    /** The size of button size */
+    buttonSize: PropTypes.oneOf(_.values(CONST.DROPDOWN_BUTTON_SIZE)),
+
     /** The anchor alignment of the popover menu */
+
     anchorAlignment: PropTypes.shape({
         horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
@@ -77,6 +81,7 @@ const defaultProps = {
     iouReport: {},
     policyID: '',
     formattedAmount: '',
+    buttonSize: CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
     anchorAlignment: {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
@@ -189,6 +194,7 @@ class SettlementButton extends React.Component {
                         }}
                         options={this.getButtonOptionsFromProps()}
                         style={this.props.style}
+                        buttonSize={this.props.buttonSize}
                         anchorAlignment={this.props.anchorAlignment}
                     />
                 )}

src/styles/StyleUtils.js

@@ -1302,6 +1302,22 @@ function getCheckboxContainerStyle(size, borderRadius) {
     };
 }
 
+/**
+ * Returns style object for the dropbutton height
+ * @param {String} buttonSize
+ * @returns {Object}
+ */
+function getDropDownButtonHeight(buttonSize) {
+    if (buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE) {
+        return {
+            height: variables.componentSizeLarge,
+        };
+    }
+    return {
+        height: variables.componentSizeNormal,
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarWidthStyle,
@@ -1375,4 +1391,5 @@ export {
     getMenuItemTextContainerStyle,
     getDisabledLinkStyles,
     getCheckboxContainerStyle,
+    getDropDownButtonHeight,
 };

src/styles/styles.js

@@ -564,10 +564,9 @@ const styles = {
     },
 
     buttonDivider: {
-        width: 1,
-        alignSelf: 'stretch',
-        backgroundColor: themeColors.appBG,
-        marginVertical: 1,
+        height: variables.dropDownButtonDividerHeight,
+        borderWidth: 0.7,
+        borderColor: themeColors.text,
     },
 
     noBorderRadius: {
@@ -3695,6 +3694,23 @@ const styles = {
         willChange: 'transform',
     },
 
+    dropDownButtonCartIconContainerPadding: {
+        paddingRight: 0,
+        paddingLeft: 0,
+    },
+
+    dropDownButtonArrowContain: {
+        marginLeft: 12,
+        marginRight: 14,
+    },
+
+    dropDownButtonCartIconView: {
+        borderTopRightRadius: variables.buttonBorderRadius,
+        borderBottomRightRadius: variables.buttonBorderRadius,
+        ...flex.flexRow,
+        ...flex.alignItemsCenter,
+    },
+
     emojiPickerButtonDropdown: {
         justifyContent: 'center',
         backgroundColor: themeColors.activeComponentBG,

src/styles/variables.js

@@ -143,6 +143,7 @@ export default {
     addPaymentPopoverTopSpacing: 8,
     addPaymentPopoverRightSpacing: 13,
     anonymousReportFooterBreakpoint: 650,
+    dropDownButtonDividerHeight: 28,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility