From 8d1309f4be88215d6c2e67a19475c88a39d3ff98 Mon Sep 17 00:00:00 2001
From: Guy Carmeli <guyca@users.noreply.github.com>
Date: Thu, 30 Jul 2020 15:18:50 +0300
Subject: [PATCH] Set button text in dp (#6443)

TopBar button text broke in 6.5.0 and instead of being applied in sp it was applied in pixels. This made if seem like the fontSize option didn't work. This commit fixes the problem and also sets button fontSize in dp so it won't increase too much if users change font size settings in their device.

closes #6405
---
 .../viewcontrollers/stack/StackPresenter.java   |  2 +-
 .../stack/topbar/button/ButtonPresenter.kt      |  5 +++--
 .../stack/topbar/button/ButtonSpan.kt           |  6 ++++--
 .../utils/ButtonPresenterTest.java              |  2 +-
 .../utils/ButtonSpanTest.java                   | 17 ++++++++++++++++-
 .../utils/TitleBarHelper.java                   |  2 +-
 .../stack/TitleBarButtonControllerTest.java     |  2 +-
 .../viewcontrollers/stack/TitleBarTest.java     |  2 +-
 .../stack/TopBarButtonControllerTest.java       |  2 +-
 lib/src/interfaces/Options.ts                   |  4 ++++
 playground/src/screens/ButtonsScreen.tsx        |  6 +++---
 website/api/options-button.mdx                  |  8 ++++++++
 12 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackPresenter.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackPresenter.java
index 8e1e20ce9cd..b5c60c1ce35 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackPresenter.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackPresenter.java
@@ -317,7 +317,7 @@ private List<ButtonController> getOrCreateButtonControllers(@Nullable Map<String
 
     private ButtonController createButtonController(ButtonOptions button) {
         ButtonController controller = new ButtonController(activity,
-                new ButtonPresenter(button, iconResolver),
+                new ButtonPresenter(activity, button, iconResolver),
                 button,
                 buttonCreator,
                 onClickListener
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonPresenter.kt b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonPresenter.kt
index 05353bb26b3..439ea2dae3d 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonPresenter.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonPresenter.kt
@@ -1,5 +1,6 @@
 package com.reactnativenavigation.viewcontrollers.stack.topbar.button
 
+import android.content.Context
 import android.graphics.Color
 import android.graphics.PorterDuff
 import android.graphics.PorterDuffColorFilter
@@ -18,7 +19,7 @@ import com.reactnativenavigation.options.ButtonOptions
 import com.reactnativenavigation.utils.*
 import com.reactnativenavigation.views.stack.topbar.titlebar.TitleBar
 
-open class ButtonPresenter(private val button: ButtonOptions, private val iconResolver: IconResolver) {
+open class ButtonPresenter(private val context: Context, private val button: ButtonOptions, private val iconResolver: IconResolver) {
     companion object {
         const val DISABLED_COLOR = Color.LTGRAY
     }
@@ -26,7 +27,7 @@ open class ButtonPresenter(private val button: ButtonOptions, private val iconRe
     val styledText: SpannableString
         get() {
             return SpannableString(button.text.get("")).apply {
-                setSpan(ButtonSpan(button), 0, button.text.length(), Spanned.SPAN_EXCLUSIVE_INCLUSIVE)
+                setSpan(ButtonSpan(context, button), 0, button.text.length(), Spanned.SPAN_EXCLUSIVE_INCLUSIVE)
             }
         }
 
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonSpan.kt b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonSpan.kt
index 50c98616814..1449390382f 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonSpan.kt
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonSpan.kt
@@ -1,13 +1,15 @@
 package com.reactnativenavigation.viewcontrollers.stack.topbar.button
 
+import android.content.Context
 import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.Typeface
 import android.text.TextPaint
 import android.text.style.MetricAffectingSpan
 import com.reactnativenavigation.options.ButtonOptions
+import com.reactnativenavigation.utils.UiUtils
 
-class ButtonSpan(private val button: ButtonOptions) : MetricAffectingSpan() {
+class ButtonSpan(private val context: Context, private val button: ButtonOptions) : MetricAffectingSpan() {
     override fun updateDrawState(drawState: TextPaint) = apply(drawState)
 
     override fun updateMeasureState(paint: TextPaint) = apply(paint)
@@ -17,7 +19,7 @@ class ButtonSpan(private val button: ButtonOptions) : MetricAffectingSpan() {
             val fakeStyle = (paint.typeface?.style ?: 0) and (fontFamily?.style?.inv() ?: 1)
             if (fakeStyle and Typeface.BOLD != 0) paint.isFakeBoldText = true
             if (fakeStyle and Typeface.ITALIC != 0) paint.textSkewX = -0.25f
-            if (fontSize.hasValue()) paint.textSize = fontSize.get().toFloat()
+            if (fontSize.hasValue()) paint.textSize = UiUtils.dpToPx(context, fontSize.get().toFloat())
             paint.typeface = fontFamily
         }
     }
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/utils/ButtonPresenterTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/utils/ButtonPresenterTest.java
index f870725af07..113efbd97e5 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/utils/ButtonPresenterTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/utils/ButtonPresenterTest.java
@@ -43,7 +43,7 @@ public void beforeEach() {
         activity.setContentView(titleBar);
         button = createButton();
 
-        uut = new ButtonPresenter(button, new IconResolverFake(activity));
+        uut = new ButtonPresenter(activity, button, new IconResolverFake(activity));
         buttonController = new ButtonController(
                 activity,
                 uut,
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/utils/ButtonSpanTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/utils/ButtonSpanTest.java
index 8a1ddf01176..0e7e6aa95fa 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/utils/ButtonSpanTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/utils/ButtonSpanTest.java
@@ -1,26 +1,32 @@
 package com.reactnativenavigation.utils;
 
+import android.app.Activity;
 import android.graphics.Color;
 import android.graphics.Paint;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.options.ButtonOptions;
 import com.reactnativenavigation.options.params.Colour;
+import com.reactnativenavigation.options.params.Fraction;
 import com.reactnativenavigation.viewcontrollers.stack.topbar.button.ButtonSpan;
 
 import org.jetbrains.annotations.NotNull;
 import org.junit.Test;
+import org.robolectric.annotation.Config;
 
 import static org.assertj.core.api.Java6Assertions.assertThat;
 
+@Config(qualifiers = "xhdpi")
 public class ButtonSpanTest extends BaseTest {
     private ButtonSpan uut;
     private ButtonOptions button;
+    private Activity activity;
 
     @Override
     public void beforeEach() {
         button = createButton();
-        uut = new ButtonSpan(button);
+        activity = newActivity();
+        uut = new ButtonSpan(activity, button);
     }
 
     @Test
@@ -31,6 +37,15 @@ public void apply_colorIsNotHandled() {
         assertThat(paint.getColor()).isNotEqualTo(button.color.get());
     }
 
+    @Test
+    public void apply_fontSizeIsAppliedInDp() {
+        button.fontSize = new Fraction(14);
+        Paint paint = new Paint();
+        uut.apply(paint);
+
+        assertThat(paint.getTextSize()).isEqualTo(UiUtils.dpToPx(activity, 14));
+    }
+
     @NotNull
     private ButtonOptions createButton() {
         ButtonOptions button = new ButtonOptions();
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/utils/TitleBarHelper.java b/lib/android/app/src/test/java/com/reactnativenavigation/utils/TitleBarHelper.java
index e07618889c9..e2b6ede3bef 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/utils/TitleBarHelper.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/utils/TitleBarHelper.java
@@ -45,7 +45,7 @@ public static ButtonOptions iconButton(String id, String icon) {
 
     public static ButtonController createButtonController(Activity activity, ButtonOptions button) {
         return new ButtonController(activity,
-                new ButtonPresenter(button, new IconResolver(activity, ImageLoaderMock.mock())),
+                new ButtonPresenter(activity, button, new IconResolver(activity, ImageLoaderMock.mock())),
                 button,
                 new TitleBarButtonCreatorMock(),
                 buttonId -> {}
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TitleBarButtonControllerTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TitleBarButtonControllerTest.java
index 80e11681c08..340bac43161 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TitleBarButtonControllerTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TitleBarButtonControllerTest.java
@@ -30,7 +30,7 @@ public void beforeEach() {
         ButtonOptions button = createComponentButton();
         uut = new ButtonController(
                 activity,
-                new ButtonPresenter(button, new IconResolver(activity, ImageLoaderMock.mock())),
+                new ButtonPresenter(activity, button, new IconResolver(activity, ImageLoaderMock.mock())),
                 button,
                 new TitleBarButtonCreatorMock(),
                 Mockito.mock(ButtonController.OnClickListener.class)
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TitleBarTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TitleBarTest.java
index 98d5c83d9d1..b9fe7587896 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TitleBarTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TitleBarTest.java
@@ -123,7 +123,7 @@ public void setTitleFontSize_usesDpInsteadofSp() {
     private ButtonController createButtonController(ButtonOptions b) {
         return new ButtonController(
                 activity,
-                new ButtonPresenter(b, new IconResolverFake(activity)),
+                new ButtonPresenter(activity, b, new IconResolverFake(activity)),
                 b,
                 mock(TitleBarButtonCreator.class),
                 mock(ButtonController.OnClickListener.class)
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TopBarButtonControllerTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TopBarButtonControllerTest.java
index 66804e465d4..998c7bec60a 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TopBarButtonControllerTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/TopBarButtonControllerTest.java
@@ -47,7 +47,7 @@ public void beforeEach() {
         stackController.getTopBar().layout(0, 0, 1080, 200);
         getTitleBar().layout(0, 0, 1080, 200);
 
-        optionsPresenter = spy(new ButtonPresenter(button, new IconResolverFake(activity)));
+        optionsPresenter = spy(new ButtonPresenter(activity, button, new IconResolverFake(activity)));
         uut = new ButtonController(activity, optionsPresenter, button, buttonCreatorMock, (buttonId) -> {});
 
         stackController.ensureViewIsCreated();
diff --git a/lib/src/interfaces/Options.ts b/lib/src/interfaces/Options.ts
index a4b847d5973..1efc5525071 100644
--- a/lib/src/interfaces/Options.ts
+++ b/lib/src/interfaces/Options.ts
@@ -393,6 +393,10 @@ export interface OptionsTopBarButton {
    * #### (iOS specific)
    */
   fontWeight?: FontWeight;
+  /**
+   * Set the font size in dp
+   */
+  fontSize?: number;
   /**
    * Set the button enabled or disabled
    * @default true
diff --git a/playground/src/screens/ButtonsScreen.tsx b/playground/src/screens/ButtonsScreen.tsx
index bb8da269b71..268ed8e3dbf 100644
--- a/playground/src/screens/ButtonsScreen.tsx
+++ b/playground/src/screens/ButtonsScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationComponentProps } from 'react-native-navigation';
+import { NavigationComponent, Options } from 'react-native-navigation';
 import Root from '../components/Root';
 import Button from '../components/Button';
 import Navigation from '../services/Navigation';
@@ -18,8 +18,8 @@ const {
   CHANGE_BUTTON_PROPS,
 } = testIDs;
 
-export default class Options extends React.Component<NavigationComponentProps> {
-  static options() {
+export default class ButtonOptions extends NavigationComponent {
+  static options(): Options {
     return {
       fab: {
         id: 'fab',
diff --git a/website/api/options-button.mdx b/website/api/options-button.mdx
index ec949a6ebbd..3fe0c22b45d 100644
--- a/website/api/options-button.mdx
+++ b/website/api/options-button.mdx
@@ -25,6 +25,14 @@ This option will set whether characters are all capitalized or not.
 | ------- | -------- | -------- | ------- |
 | boolean | No       | Android  | true    |
 
+### `fontSize`
+
+If the button has text, this option is used to set font size in DP.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
 ### `id`
 
 Buttons are identified by their id property. When a button is clicked, a buttonPress event is emitted to js, containing the id of the clicked button.