From 32f3b681e5c65655f5b85415156d2aa4b8836219 Mon Sep 17 00:00:00 2001 From: Hans 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 & { /** 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; @@ -246,6 +249,7 @@ function Button( link = false, isContentCentered = false, isPressOnEnterActive, + secondLineText = '', ...rest }: ButtonProps, ref: ForwardedRef, @@ -260,7 +264,7 @@ function Button( return rest.children; } - const textComponent = ( + const primaryText = ( ); + const textComponent = secondLineText ? ( + + {primaryText} + {secondLineText} + + ) : ( + 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({ defaultSelectedIndex = 0, shouldShowSelectedItemCheck = false, testID, + secondLineText = '', }: ButtonWithDropdownMenuProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -144,6 +145,7 @@ function ButtonWithDropdownMenu({ shouldShowRightIcon={!isSplitButton} isSplitButton={isSplitButton} testID={testID} + secondLineText={secondLineText} /> {isSplitButton && ( @@ -193,6 +195,7 @@ function ButtonWithDropdownMenu({ 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 = { /** 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 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 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 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,