Add small button styling

Expensify · Aug 27, 2024 · 2d9c4e9 · 2d9c4e9
1 parent 0f7b3f8
commit 2d9c4e9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -3902,6 +3902,7 @@ const CONST = {
     DROPDOWN_BUTTON_SIZE: {
         LARGE: 'large',
         MEDIUM: 'medium',
+        SMALL: 'small',
     },
 
     SF_COORDINATES: [-122.4194, 37.7749],

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -289,8 +289,9 @@ function Button(
                                 <Icon
                                     src={iconRight}
                                     fill={isHovered ? iconHoverFill ?? defaultFill : iconFill ?? defaultFill}
-                                    small={medium}
-                                    medium={large}
+                                    small={small}
+                                    medium={medium}
+                                    large={large}
                                 />
                             ) : (
                                 <Icon

diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -112,8 +112,9 @@ function ButtonWithDropdownMenu<IValueType>({
                         isLoading={isLoading}
                         shouldRemoveRightBorderRadius
                         style={[styles.flex1, styles.pr0]}
-                        large={isButtonSizeLarge}
-                        medium={!isButtonSizeLarge}
+                        large={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE}
+                        medium={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                        small={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL}
                         innerStyles={[innerStyleDropButton, !isSplitButton && styles.dropDownButtonCartIconView]}
                         enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                         iconRight={Expensicons.DownArrow}
@@ -129,8 +130,9 @@ function ButtonWithDropdownMenu<IValueType>({
                             style={[styles.pl0]}
                             onPress={() => setIsMenuVisible(!isMenuVisible)}
                             shouldRemoveLeftBorderRadius
-                            large={isButtonSizeLarge}
-                            medium={!isButtonSizeLarge}
+                            large={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE}
+                            medium={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                            small={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL}
                             innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton]}
                             enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                         >
@@ -158,8 +160,9 @@ function ButtonWithDropdownMenu<IValueType>({
                     isLoading={isLoading}
                     text={selectedItem.text}
                     onPress={(event) => onPress(event, options[0].value)}
-                    large={isButtonSizeLarge}
-                    medium={!isButtonSizeLarge}
+                    large={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE}
+                    medium={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                    small={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL}
                     innerStyles={[innerStyleDropButton]}
                     enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                 />

diff --git a/src/components/ImportColumn.tsx b/src/components/ImportColumn.tsx
@@ -188,6 +188,7 @@ function ImportColumn({column, containsHeader, columnName, columnRoles, columnIn
                 <View style={styles.ml2}>
                     <ButtonWithDropdownMenu
                         onPress={() => {}}
+                        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
                         shouldShowSelectedItemCheck
                         menuHeaderText={columnHeader}
                         isSplitButton={false}

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -991,6 +991,13 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle {
             height: variables.componentSizeLarge,
         };
     }
+
+    if (buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL) {
+        return {
+            height: variables.componentSizeSmall,
+        };
+    }
+
     return {
         height: variables.componentSizeNormal,
     };