fix(ui): button layout issues (#375)

akveo · Apr 29, 2019 · a2e61d4 · a2e61d4
1 parent 9b54310
commit a2e61d4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx
@@ -77,6 +77,7 @@ export class Button extends React.Component<Props> {
     const {
       textColor,
       textFontSize,
+      textLineHeight,
       textFontWeight,
       textMarginHorizontal,
       iconWidth,
@@ -100,6 +101,7 @@ export class Button extends React.Component<Props> {
       text: {
         color: textColor,
         fontSize: textFontSize,
+        lineHeight: textLineHeight,
         fontWeight: textFontWeight,
         marginHorizontal: textMarginHorizontal,
         ...derivedTextStyle,
@@ -165,12 +167,9 @@ export class Button extends React.Component<Props> {
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'space-evenly',
+    justifyContent: 'center',
     alignItems: 'center',
   },
-  text: {
-    flexGrow: 1,
-    textAlign: 'center',
-  },
+  text: {},
   icon: {},
 });
diff --git a/src/framework/ui/button/button.spec.tsx.snap b/src/framework/ui/button/button.spec.tsx.snap
@@ -17,7 +17,7 @@ exports[`@button: matches snapshot * appearance * empty 1`] = `
       "backgroundColor": "#3366FF",
       "borderRadius": 8,
       "flexDirection": "row",
-      "justifyContent": "space-evenly",
+      "justifyContent": "center",
       "minHeight": 40,
       "minWidth": 40,
       "paddingHorizontal": 10,
@@ -149,7 +149,7 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
       "backgroundColor": "#3366FF",
       "borderRadius": 8,
       "flexDirection": "row",
-      "justifyContent": "space-evenly",
+      "justifyContent": "center",
       "minHeight": 40,
       "minWidth": 40,
       "paddingHorizontal": 10,
@@ -297,7 +297,7 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
       "backgroundColor": "#3366FF",
       "borderRadius": 8,
       "flexDirection": "row",
-      "justifyContent": "space-evenly",
+      "justifyContent": "center",
       "minHeight": 40,
       "minWidth": 40,
       "paddingHorizontal": 10,
@@ -428,11 +428,10 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
     style={
       Object {
         "color": "#ffffff",
-        "flexGrow": 1,
         "fontSize": 14,
         "fontWeight": "800",
+        "lineHeight": 16,
         "marginHorizontal": 10,
-        "textAlign": "center",
       }
     }
   >
@@ -458,7 +457,7 @@ exports[`@button: matches snapshot * appearance * text 1`] = `
       "backgroundColor": "#3366FF",
       "borderRadius": 8,
       "flexDirection": "row",
-      "justifyContent": "space-evenly",
+      "justifyContent": "center",
       "minHeight": 40,
       "minWidth": 40,
       "paddingHorizontal": 10,
@@ -574,11 +573,10 @@ exports[`@button: matches snapshot * appearance * text 1`] = `
     style={
       Object {
         "color": "#ffffff",
-        "flexGrow": 1,
         "fontSize": 14,
         "fontWeight": "800",
+        "lineHeight": 16,
         "marginHorizontal": 10,
-        "textAlign": "center",
       }
     }
   >
@@ -604,7 +602,7 @@ exports[`@button: matches snapshot * interaction * stateless 1`] = `
       "backgroundColor": "#3366FF",
       "borderRadius": 8,
       "flexDirection": "row",
-      "justifyContent": "space-evenly",
+      "justifyContent": "center",
       "minHeight": 40,
       "minWidth": 40,
       "paddingHorizontal": 10,

diff --git a/src/framework/ui/common/mapping.json b/src/framework/ui/common/mapping.json
@@ -249,17 +249,20 @@
           "backgroundColor": {
             "type": "string"
           },
-          "textColor": {
-            "type": "string"
+          "textMarginHorizontal": {
+            "type": "number"
           },
           "textFontSize": {
             "type": "number"
           },
+          "textLineHeight": {
+            "type": "number"
+          },
           "textFontWeight": {
             "type": "string"
           },
-          "textMarginHorizontal": {
-            "type": "number"
+          "textColor": {
+            "type": "string"
           },
           "iconWidth": {
             "type": "number"
@@ -428,6 +431,7 @@
                 "paddingHorizontal": 6,
                 "paddingVertical": 6,
                 "textFontSize": 10,
+                "textLineHeight": 12,
                 "textMarginHorizontal": 6,
                 "iconWidth": 12,
                 "iconHeight": 12,
@@ -439,6 +443,7 @@
                 "paddingHorizontal": 8,
                 "paddingVertical": 8,
                 "textFontSize": 12,
+                "textLineHeight": 16,
                 "textMarginHorizontal": 8,
                 "iconWidth": 16,
                 "iconHeight": 16,
@@ -450,6 +455,7 @@
                 "paddingHorizontal": 10,
                 "paddingVertical": 12,
                 "textFontSize": 14,
+                "textLineHeight": 16,
                 "textMarginHorizontal": 10,
                 "iconWidth": 16,
                 "iconHeight": 16,
@@ -461,6 +467,7 @@
                 "paddingHorizontal": 10,
                 "paddingVertical": 14,
                 "textFontSize": 16,
+                "textLineHeight": 20,
                 "textMarginHorizontal": 10,
                 "iconWidth": 20,
                 "iconHeight": 20,
@@ -472,6 +479,7 @@
                 "paddingHorizontal": 12,
                 "paddingVertical": 16,
                 "textFontSize": 18,
+                "textLineHeight": 24,
                 "textMarginHorizontal": 12,
                 "iconWidth": 24,
                 "iconHeight": 24,