From 32f3b681e5c65655f5b85415156d2aa4b8836219 Mon Sep 17 00:00:00 2001
From: Hans <visaocuoitroi193@gmail.com>
Date: Mon, 10 Feb 2025 13:29:35 +0700
Subject: [PATCH 1/4] add double decker button

---
 src/components/Button/index.tsx                 | 15 ++++++++++++++-
 src/components/ButtonWithDropdownMenu/index.tsx |  3 +++
 src/components/ButtonWithDropdownMenu/types.ts  |  3 +++
 src/styles/index.ts                             |  4 +++-
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index d943886982e4..7b2eb500c50d 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -145,6 +145,9 @@ type ButtonProps = Partial<ChildrenProps> & {
 
     /** Whether the Enter keyboard listening is active whether or not the screen that contains the button is focused */
     isPressOnEnterActive?: boolean;
+
+    /** The text displays under the first line */
+    secondLineText?: string;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority' | 'isPressOnEnterActive'>;
@@ -246,6 +249,7 @@ function Button(
         link = false,
         isContentCentered = false,
         isPressOnEnterActive,
+        secondLineText = '',
         ...rest
     }: ButtonProps,
     ref: ForwardedRef<View>,
@@ -260,7 +264,7 @@ function Button(
             return rest.children;
         }
 
-        const textComponent = (
+        const primaryText = (
             <Text
                 numberOfLines={1}
                 style={[
@@ -286,6 +290,15 @@ function Button(
             </Text>
         );
 
+        const textComponent = secondLineText ? (
+            <View style={[styles.alignItemsCenter, styles.flexColumn, styles.flexShrink1]}>
+                {primaryText}
+                <Text style={[isLoading && styles.opacity0, styles.pointerEventsNone, styles.fontWeightNormal, styles.textDoubleDecker]}>{secondLineText}</Text>
+            </View>
+        ) : (
+            primaryText
+        );
+
         const defaultFill = success || danger ? theme.textLight : theme.icon;
 
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
index dce7373c54bb..e7fbf9baab1c 100644
--- a/src/components/ButtonWithDropdownMenu/index.tsx
+++ b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -45,6 +45,7 @@ function ButtonWithDropdownMenu<IValueType>({
     defaultSelectedIndex = 0,
     shouldShowSelectedItemCheck = false,
     testID,
+    secondLineText = '',
 }: ButtonWithDropdownMenuProps<IValueType>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -144,6 +145,7 @@ function ButtonWithDropdownMenu<IValueType>({
                         shouldShowRightIcon={!isSplitButton}
                         isSplitButton={isSplitButton}
                         testID={testID}
+                        secondLineText={secondLineText}
                     />
 
                     {isSplitButton && (
@@ -193,6 +195,7 @@ function ButtonWithDropdownMenu<IValueType>({
                     small={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL}
                     innerStyles={[innerStyleDropButton]}
                     enterKeyEventListenerPriority={enterKeyEventListenerPriority}
+                    secondLineText={secondLineText}
                 />
             )}
             {(shouldAlwaysShowDropdownMenu || options.length > 1) && !!popoverAnchorPosition && (
diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts
index dbafbc497105..dd7782bb39ba 100644
--- a/src/components/ButtonWithDropdownMenu/types.ts
+++ b/src/components/ButtonWithDropdownMenu/types.ts
@@ -111,6 +111,9 @@ type ButtonWithDropdownMenuProps<TValueType> = {
 
     /** Used to locate the component in the tests */
     testID?: string;
+
+    /** The second line text displays under the first line */
+    secondLineText?: string;
 };
 
 export type {
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7eaeaeff459a..0a3f4a2164ab 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -438,7 +438,9 @@ const styles = (theme: ThemeColors) =>
             ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeExtraSmall,
         },
-
+        textDoubleDecker: {
+            fontSize: variables.fontSizeSmall,
+        },
         textNormal: {
             fontSize: variables.fontSizeNormal,
         },

From 104867f00a8a9835c96196ae188da466cab9b8f6 Mon Sep 17 00:00:00 2001
From: Hans <visaocuoitroi193@gmail.com>
Date: Tue, 11 Feb 2025 21:42:33 +0700
Subject: [PATCH 2/4] update double decker button style

---
 src/styles/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 0a3f4a2164ab..83bb16e9129a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -440,6 +440,8 @@ const styles = (theme: ThemeColors) =>
         },
         textDoubleDecker: {
             fontSize: variables.fontSizeSmall,
+            opacity: 0.8,
+            fontWeight: FontUtils.fontWeight.bold,
         },
         textNormal: {
             fontSize: variables.fontSizeNormal,

From d4db0f236a3588fbcf95dbfcd75a34f1a6051925 Mon Sep 17 00:00:00 2001
From: Hans <visaocuoitroi193@gmail.com>
Date: Tue, 11 Feb 2025 22:08:39 +0700
Subject: [PATCH 3/4] remove padding bottom for button with double decker style

---
 src/components/Button/index.tsx | 1 +
 src/styles/index.ts             | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 7b2eb500c50d..b98baab062ba 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -277,6 +277,7 @@ function Button(
                     success && styles.buttonSuccessText,
                     danger && styles.buttonDangerText,
                     !!icon && styles.textAlignLeft,
+                    !!secondLineText && styles.noPaddingBottom,
                     textStyles,
                     isHovered && textHoverStyles,
                     link && styles.link,
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 83bb16e9129a..ebac0f76bbd1 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -443,6 +443,9 @@ const styles = (theme: ThemeColors) =>
             opacity: 0.8,
             fontWeight: FontUtils.fontWeight.bold,
         },
+        noPaddingBottom: {
+            paddingBottom: 0,
+        },
         textNormal: {
             fontSize: variables.fontSizeNormal,
         },

From 9cf8558d022d1389d342b7842682036055d829e6 Mon Sep 17 00:00:00 2001
From: Hans <visaocuoitroi193@gmail.com>
Date: Wed, 12 Feb 2025 13:27:52 +0700
Subject: [PATCH 4/4] update line height

---
 src/styles/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index ebac0f76bbd1..3fe42eb5db37 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -442,6 +442,7 @@ const styles = (theme: ThemeColors) =>
             fontSize: variables.fontSizeSmall,
             opacity: 0.8,
             fontWeight: FontUtils.fontWeight.bold,
+            lineHeight: 12,
         },
         noPaddingBottom: {
             paddingBottom: 0,
