refactor(ui): apply input mappings

akveo · Apr 8, 2019 · db1161d · db1161d
1 parent bdd4e5e
commit db1161d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 39 deletions.
diff --git a/src/framework/ui/common/mapping.json b/src/framework/ui/common/mapping.json
@@ -990,6 +990,12 @@
           "textMarginHorizontal": {
             "type": "number"
           },
+          "textFontSize": {
+            "type": "number"
+          },
+          "textLineHeight": {
+            "type": "number"
+          },
           "textColor": {
             "type": "string"
           },
@@ -1025,7 +1031,7 @@
             "warning": {
               "default": false
             },
-            "error": {
+            "danger": {
               "default": false
             }
           }
@@ -1046,24 +1052,26 @@
       "appearances": {
         "default": {
           "mapping": {
-            "paddingVertical": 12,
-            "paddingHorizontal": 6,
+            "paddingVertical": 14,
+            "paddingHorizontal": 8,
             "minHeight": 48,
-            "borderRadius": 6,
+            "borderRadius": 8,
             "borderWidth": 2,
-            "borderColor": "transparent",
-            "backgroundColor": "gray-100",
-            "textMarginHorizontal": 6,
-            "textColor": "gray-400",
+            "borderColor": "opacity-transparent",
+            "backgroundColor": "color-basic-100",
+            "textMarginHorizontal": 8,
+            "textFontSize": 15,
+            "textLineHeight": 20,
+            "textColor": "color-basic-600",
             "iconWidth": 24,
             "iconHeight": 24,
-            "iconMarginHorizontal": 6,
-            "iconTintColor": "gray-400",
+            "iconMarginHorizontal": 8,
+            "iconTintColor": "color-basic-500",
             "state": {
               "disabled": {
-                "backgroundColor": "gray-200",
-                "textColor": "gray-300",
-                "iconTintColor": "gray-300"
+                "backgroundColor": "color-basic-200",
+                "textColor": "color-basic-400",
+                "iconTintColor": "color-basic-400"
               }
             }
           },
@@ -1072,40 +1080,40 @@
               "primary": {
                 "state": {
                   "focused": {
-                    "borderColor": "blue-primary",
-                    "iconTintColor": "blue-primary"
+                    "borderColor": "color-primary-500",
+                    "iconTintColor": "color-primary-500"
                   }
                 }
               },
               "success": {
                 "state": {
                   "focused": {
-                    "borderColor": "#4CAF50",
-                    "iconTintColor": "#4CAF50"
+                    "borderColor": "color-success-500",
+                    "iconTintColor": "color-success-500"
                   }
                 }
               },
               "info": {
                 "state": {
                   "focused": {
-                    "borderColor": "#03A9F4",
-                    "iconTintColor": "#03A9F4"
+                    "borderColor": "color-info-500",
+                    "iconTintColor": "color-info-500"
                   }
                 }
               },
               "warning": {
                 "state": {
                   "focused": {
-                    "borderColor": "#FFC107",
-                    "iconTintColor": "#FFC107"
+                    "borderColor": "color-warning-500",
+                    "iconTintColor": "color-warning-500"
                   }
                 }
               },
-              "error": {
+              "danger": {
                 "state": {
                   "focused": {
-                    "borderColor": "#F44336",
-                    "iconTintColor": "#F44336"
+                    "borderColor": "color-danger-500",
+                    "iconTintColor": "color-danger-500"
                   }
                 }
               }

diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx
@@ -51,6 +51,8 @@ export class Input extends React.Component<Props> {
 
     const {
       textMarginHorizontal,
+      textFontSize,
+      textLineHeight,
       textColor,
       iconWidth,
       iconHeight,
@@ -67,6 +69,8 @@ export class Input extends React.Component<Props> {
       },
       text: {
         marginHorizontal: textMarginHorizontal,
+        fontSize: textFontSize,
+        lineHeight: textLineHeight,
         color: textColor,
         ...derivedTextStyle,
         ...styles.text,

diff --git a/src/framework/ui/input/input.spec.tsx.snap b/src/framework/ui/input/input.spec.tsx.snap
@@ -4,14 +4,14 @@ exports[`@input: matches snapshot * appearance * icon 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#f7f8fa",
+      "backgroundColor": "#F7F8FA",
       "borderColor": "transparent",
-      "borderRadius": 6,
+      "borderRadius": 8,
       "borderWidth": 2,
       "flexDirection": "row",
       "minHeight": 48,
-      "paddingHorizontal": 6,
-      "paddingVertical": 12,
+      "paddingHorizontal": 8,
+      "paddingVertical": 14,
     }
   }
 >
@@ -26,9 +26,11 @@ exports[`@input: matches snapshot * appearance * icon 1`] = `
     status="primary"
     style={
       Object {
-        "color": "#a6aebd",
+        "color": "#8992A3",
         "flex": 1,
-        "marginHorizontal": 6,
+        "fontSize": 15,
+        "lineHeight": 20,
+        "marginHorizontal": 8,
       }
     }
     theme={
@@ -145,8 +147,8 @@ exports[`@input: matches snapshot * appearance * icon 1`] = `
     style={
       Object {
         "height": 24,
-        "marginHorizontal": 6,
-        "tintColor": "#a6aebd",
+        "marginHorizontal": 8,
+        "tintColor": "#A6AEBD",
         "width": 24,
       }
     }
@@ -158,14 +160,14 @@ exports[`@input: matches snapshot * interaction * stateless 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#f7f8fa",
+      "backgroundColor": "#F7F8FA",
       "borderColor": "transparent",
-      "borderRadius": 6,
+      "borderRadius": 8,
       "borderWidth": 2,
       "flexDirection": "row",
       "minHeight": 48,
-      "paddingHorizontal": 6,
-      "paddingVertical": 12,
+      "paddingHorizontal": 8,
+      "paddingVertical": 14,
     }
   }
 >
@@ -179,9 +181,11 @@ exports[`@input: matches snapshot * interaction * stateless 1`] = `
     status="primary"
     style={
       Object {
-        "color": "#a6aebd",
+        "color": "#8992A3",
         "flex": 1,
-        "marginHorizontal": 6,
+        "fontSize": 15,
+        "lineHeight": 20,
+        "marginHorizontal": 8,
       }
     }
     theme={

diff --git a/src/playground/src/ui/screen/input.component.tsx b/src/playground/src/ui/screen/input.component.tsx
@@ -112,7 +112,7 @@ class InputScreen extends React.Component<Props, State> {
               placeholder={PLACEHOLDER}
             />
             <Input
-              status='error'
+              status='danger'
               style={this.props.themedStyle.component}
               icon={this.renderIcon}
               placeholder={PLACEHOLDER}