From cce0a2d42fd61d3475933237d089ce6ac7142db9 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Wed, 4 Jan 2017 10:20:33 +0200
Subject: [PATCH] Fix all property types

---
 tns-core-modules/ui/core/properties.ts        |  12 +-
 tns-core-modules/ui/core/view-common.ts       | 188 ++++++++++++------
 tns-core-modules/ui/core/view.d.ts            |  22 +-
 tns-core-modules/ui/definitions.d.ts          |  10 +-
 .../flexbox-layout/flexbox-layout-common.ts   |   4 +-
 .../ui/layouts/layout-base-common.ts          |  34 +++-
 tns-core-modules/ui/layouts/layout-base.d.ts  |  42 ++--
 tns-core-modules/ui/styling/style.d.ts        |   6 +-
 tns-core-modules/ui/styling/style.ts          |   6 +-
 .../ui/text-base/text-base-common.ts          |  37 +++-
 tns-core-modules/ui/text-base/text-base.d.ts  |  27 ++-
 .../ui/text-field/text-field.ios.ts           |  38 +++-
 12 files changed, 308 insertions(+), 118 deletions(-)

diff --git a/tns-core-modules/ui/core/properties.ts b/tns-core-modules/ui/core/properties.ts
index 4f57a1df7..1c81ac8bd 100644
--- a/tns-core-modules/ui/core/properties.ts
+++ b/tns-core-modules/ui/core/properties.ts
@@ -44,11 +44,11 @@ export interface CoerciblePropertyOptions<T, U> extends PropertyOptions<T, U> {
     readonly coerceValue: (t: T, u: U) => U;
 }
 
-export interface ShorthandPropertyOptions {
+export interface ShorthandPropertyOptions<P> {
     name: string;
     cssName: string;
-    converter(this: void, value: string): [CssProperty<any, any>, any][];
-    getter(this: Style): string;
+    converter(this: void, value: string | P): [CssProperty<any, any>, any][];
+    getter(this: Style): string | P;
 }
 
 export interface CssPropertyOptions<T extends Style, U> extends PropertyOptions<T, U> {
@@ -684,7 +684,7 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
     }
 }
 
-export class ShorthandProperty<T extends Style> {
+export class ShorthandProperty<T extends Style, P> {
     private registered: boolean;
 
     public readonly key: symbol;
@@ -697,7 +697,7 @@ export class ShorthandProperty<T extends Style> {
     public readonly native: symbol;
     public readonly sourceKey: symbol;
 
-    constructor(options: ShorthandPropertyOptions) {
+    constructor(options: ShorthandPropertyOptions<P>) {
         const name = options.name;
         this.name = name;
 
@@ -712,7 +712,7 @@ export class ShorthandProperty<T extends Style> {
 
         const converter = options.converter;
 
-        function setLocalValue(this: T, value: string): void {
+        function setLocalValue(this: T, value: string| P): void {
             this[sourceKey] = ValueSource.Local;
             if (this[key] !== value) {
                 this[key] = value;
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index ef201ac03..fdd4671fc 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -219,10 +219,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this.style.borderLeftColor = value;
     }
 
-    get borderWidth(): string | number {
+    get borderWidth(): string | Length {
         return this.style.borderWidth;
     }
-    set borderWidth(value: string | number) {
+    set borderWidth(value: string | Length) {
         this.style.borderWidth = value;
     }
 
@@ -338,10 +338,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this.style.height = value;
     }
 
-    get margin(): string {
+    get margin(): string | PercentLength {
         return this.style.margin;
     }
-    set margin(value: string) {
+    set margin(value: string | PercentLength) {
         this.style.margin = value;
     }
 
@@ -1116,9 +1116,16 @@ widthProperty.register(Style);
 export const heightProperty = new CssProperty<Style, PercentLength>({ name: "height", cssName: "height", defaultValue: "auto", affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 heightProperty.register(Style);
 
-const marginProperty = new ShorthandProperty<Style>({
+const marginProperty = new ShorthandProperty<Style, string | PercentLength>({
     name: "margin", cssName: "margin",
-    getter: function (this: Style) { return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`; },
+    getter: function (this: Style) { 
+        if (this.marginTop === this.marginRight && 
+            this.marginTop === this.marginBottom && 
+            this.marginTop === this.marginLeft) {
+                return this.marginTop;
+        }
+        return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`; 
+    },
     converter: convertToMargins
 });
 marginProperty.register(Style);
@@ -1135,9 +1142,16 @@ marginTopProperty.register(Style);
 export const marginBottomProperty = new CssProperty<Style, PercentLength>({ name: "marginBottom", cssName: "margin-bottom", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 marginBottomProperty.register(Style);
 
-const paddingProperty = new ShorthandProperty<Style>({
+const paddingProperty = new ShorthandProperty<Style, string | Length>({
     name: "padding", cssName: "padding",
-    getter: function (this: Style) { return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`; },
+    getter: function (this: Style) { 
+        if (this.paddingTop === this.paddingRight && 
+            this.paddingTop === this.paddingBottom &&
+            this.paddingTop === this.paddingLeft) {
+                return this.paddingTop;
+        }
+        return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`; 
+    },
     converter: convertToPaddings
 });
 paddingProperty.register(Style);
@@ -1263,24 +1277,44 @@ function parseThickness(value: string): Thickness {
     }
 }
 
-function convertToMargins(this: void, value: string): [CssProperty<any, any>, any][] {
-    let thickness = parseThickness(value);
-    return [
-        [marginTopProperty, PercentLength.parse(thickness.top)],
-        [marginRightProperty, PercentLength.parse(thickness.right)],
-        [marginBottomProperty, PercentLength.parse(thickness.bottom)],
-        [marginLeftProperty, PercentLength.parse(thickness.left)]
-    ];
+function convertToMargins(this: void, value: string | PercentLength): [CssProperty<any, any>, any][] {
+    if (typeof value === "string" && value !== "auto"){
+        let thickness = parseThickness(value);
+        return [
+            [marginTopProperty, PercentLength.parse(thickness.top)],
+            [marginRightProperty, PercentLength.parse(thickness.right)],
+            [marginBottomProperty, PercentLength.parse(thickness.bottom)],
+            [marginLeftProperty, PercentLength.parse(thickness.left)]
+        ];
+    }
+    else {
+        return [
+            [marginTopProperty, value],
+            [marginRightProperty, value],
+            [marginBottomProperty, value],
+            [marginLeftProperty, value]
+        ];
+    }
 }
 
-function convertToPaddings(this: void, value: string): [CssProperty<any, any>, any][] {
-    let thickness = parseThickness(value);
-    return [
-        [paddingTopProperty, Length.parse(thickness.top)],
-        [paddingRightProperty, Length.parse(thickness.right)],
-        [paddingBottomProperty, Length.parse(thickness.bottom)],
-        [paddingLeftProperty, Length.parse(thickness.left)]
-    ];
+function convertToPaddings(this: void, value: string | Length): [CssProperty<any, any>, any][] {
+    if (typeof value === "string" && value !== "auto"){
+        let thickness = parseThickness(value);
+        return [
+            [paddingTopProperty, Length.parse(thickness.top)],
+            [paddingRightProperty, Length.parse(thickness.right)],
+            [paddingBottomProperty, Length.parse(thickness.bottom)],
+            [paddingLeftProperty, Length.parse(thickness.left)]
+        ];
+    }
+    else {
+        return [
+            [paddingTopProperty, value],
+            [paddingRightProperty, value],
+            [paddingBottomProperty, value],
+            [paddingLeftProperty, value]
+        ];
+    }
 }
 
 export const rotateProperty = new CssProperty<Style, number>({ name: "rotate", cssName: "rotate", defaultValue: 0, valueConverter: (v) => parseFloat(v) });
@@ -1298,7 +1332,7 @@ translateXProperty.register(Style);
 export const translateYProperty = new CssProperty<Style, number>({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: (v) => parseFloat(v) });
 translateYProperty.register(Style);
 
-const transformProperty = new ShorthandProperty<Style>({
+const transformProperty = new ShorthandProperty<Style, string>({
     name: "transform", cssName: "transform",
     getter: function (this: Style) {
         let scaleX = this.scaleX;
@@ -1567,25 +1601,36 @@ function parseBorderColor(value: string): { top: Color, right: Color, bottom: Co
 }
 
 // Border Color properties.
-const borderColorProperty = new ShorthandProperty<Style>({
+const borderColorProperty = new ShorthandProperty<Style, string | Color>({
     name: "borderColor", cssName: "border-color",
     getter: function (this: Style) {
         if (Color.equals(this.borderTopColor, this.borderRightColor) &&
             Color.equals(this.borderTopColor, this.borderBottomColor) &&
             Color.equals(this.borderTopColor, this.borderLeftColor)) {
             return this.borderTopColor ? this.borderTopColor.toString() : "";
-        } else {
+        } 
+        else {
             return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
         }
     },
-    converter: function (value: string) {
-        let fourColors = parseBorderColor(value);
-        return [
-            [borderTopColorProperty, fourColors.top],
-            [borderRightColorProperty, fourColors.right],
-            [borderBottomColorProperty, fourColors.bottom],
-            [borderLeftColorProperty, fourColors.left]
-        ];
+    converter: function (value) {
+        if (typeof value === "string") {
+            let fourColors = parseBorderColor(value);
+            return [
+                [borderTopColorProperty, fourColors.top],
+                [borderRightColorProperty, fourColors.right],
+                [borderBottomColorProperty, fourColors.bottom],
+                [borderLeftColorProperty, fourColors.left]
+            ];
+        }
+        else {
+            return [
+                [borderTopColorProperty, value],
+                [borderRightColorProperty, value],
+                [borderBottomColorProperty, value],
+                [borderLeftColorProperty, value]
+            ];
+        }
     }
 })
 borderColorProperty.register(Style);
@@ -1623,25 +1668,36 @@ export const borderLeftColorProperty = new CssProperty<Style, Color>({
 borderLeftColorProperty.register(Style);
 
 // Border Width properties.
-const borderWidthProperty = new ShorthandProperty<Style>({
+const borderWidthProperty = new ShorthandProperty<Style, string | Length>({
     name: "borderWidth", cssName: "border-width",
     getter: function (this: Style) {
-        if (Color.equals(this.borderTopColor, this.borderRightColor) &&
-            Color.equals(this.borderTopColor, this.borderBottomColor) &&
-            Color.equals(this.borderTopColor, this.borderLeftColor)) {
-            return this.borderTopColor + "";
-        } else {
-            return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
+        if (this.borderTopWidth === this.borderRightWidth &&
+            this.borderTopWidth === this.borderBottomWidth &&
+            this.borderTopWidth === this.borderLeftWidth){
+                return this.borderTopWidth;
+        }
+        else {
+            return `${this.borderTopWidth} ${this.borderRightWidth} ${this.borderBottomWidth} ${this.borderLeftWidth}`;
         }
     },
-    converter: function (value: string) {
-        let borderWidths = parseThickness(value);
-        return [
-            [borderTopWidthProperty, borderWidths.top],
-            [borderRightWidthProperty, borderWidths.right],
-            [borderBottomWidthProperty, borderWidths.bottom],
-            [borderLeftWidthProperty, borderWidths.left]
-        ];
+    converter: function (value) {
+        if (typeof value === "string" && value !== "auto"){
+            let borderWidths = parseThickness(value);
+            return [
+                [borderTopWidthProperty, borderWidths.top],
+                [borderRightWidthProperty, borderWidths.right],
+                [borderBottomWidthProperty, borderWidths.bottom],
+                [borderLeftWidthProperty, borderWidths.left]
+            ];
+        }
+        else {
+            return [
+                [borderTopWidthProperty, value],
+                [borderRightWidthProperty, value],
+                [borderBottomWidthProperty, value],
+                [borderLeftWidthProperty, value]
+            ];
+        }
     }
 })
 borderWidthProperty.register(Style);
@@ -1711,7 +1767,7 @@ export const borderLeftWidthProperty = new CssProperty<Style, Length>({
 borderLeftWidthProperty.register(Style);
 
 // Border Radius properties.
-const borderRadiusProperty = new ShorthandProperty<Style>({
+const borderRadiusProperty = new ShorthandProperty<Style, number>({
     name: "borderRadius", cssName: "border-radius",
     getter: function (this: Style) {
         if (this.borderTopLeftRadius === this.borderTopRightRadius &&
@@ -1722,14 +1778,24 @@ const borderRadiusProperty = new ShorthandProperty<Style>({
             return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`;
         }
     },
-    converter: function (value: string) {
-        let borderRadius = parseThickness(value);
-        return [
-            [borderTopLeftRadiusProperty, borderRadius.top],
-            [borderTopRightRadiusProperty, borderRadius.right],
-            [borderBottomRightRadiusProperty, borderRadius.bottom],
-            [borderBottomLeftRadiusProperty, borderRadius.left]
-        ];
+    converter: function (value) {
+        if (typeof value === "string"){
+            let borderRadius = parseThickness(value);
+            return [
+                [borderTopLeftRadiusProperty, borderRadius.top],
+                [borderTopRightRadiusProperty, borderRadius.right],
+                [borderBottomRightRadiusProperty, borderRadius.bottom],
+                [borderBottomLeftRadiusProperty, borderRadius.left]
+            ];
+        }
+        else {
+            return [
+                [borderTopLeftRadiusProperty, value],
+                [borderTopRightRadiusProperty, value],
+                [borderBottomRightRadiusProperty, value],
+                [borderBottomLeftRadiusProperty, value]
+            ];
+        }
     }
 })
 borderRadiusProperty.register(Style);
@@ -1862,12 +1928,12 @@ export const fontWeightProperty = new InheritedCssProperty<Style, FontWeight>({
 });
 fontWeightProperty.register(Style);
 
-const fontProperty = new ShorthandProperty<Style>({
+const fontProperty = new ShorthandProperty<Style, string>({
     name: "font", cssName: "font",
     getter: function (this: Style) {
         return `${this.fontStyle} ${this.fontWeight} ${this.fontSize} ${this.fontFamily}`;
     },
-    converter: function (value: string) {
+    converter: function (value) {
         let font = parseFont(value);
         let fontSize = fontSizeConverter(font.fontSize);
 
diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts
index 162f372ab..1ea0062c7 100644
--- a/tns-core-modules/ui/core/view.d.ts
+++ b/tns-core-modules/ui/core/view.d.ts
@@ -2,7 +2,7 @@ declare module "ui/core/view" {
     import { GestureTypes, GesturesObserver, GestureEventData, TouchGestureEventData, TouchAction } from "ui/gestures";
     import { Animation, AnimationDefinition, AnimationPromise } from "ui/animation";
     import {
-        ViewBase, Property, CssProperty, InheritedCssProperty, Style, EventData
+        ViewBase, Property, CssProperty, InheritedCssProperty, Style, EventData, ShorthandProperty
     } from "ui/core/view-base";
     import { Background } from "ui/styling/background";
     import { Font, FontWeight, FontStyle } from "ui/styling/font";
@@ -153,7 +153,7 @@ declare module "ui/core/view" {
         /**
          * Gets or sets the border width of the view.
          */
-        borderWidth: string | number;
+        borderWidth: string | Length;
 
         /**
          * Gets or sets the top border width of the view.
@@ -238,7 +238,7 @@ declare module "ui/core/view" {
         /**
          * Gets or sets margin style property.
          */
-        margin: string;
+        margin: string | PercentLength;
 
         /**
          * Specifies extra space on the left side of this view.
@@ -710,13 +710,13 @@ declare module "ui/core/view" {
     export const backgroundSizeProperty: CssProperty<Style, string>;
     export const backgroundPositionProperty: CssProperty<Style, string>;
 
-    export const borderColorProperty: CssProperty<Style, Color>;
+    export const borderColorProperty: ShorthandProperty<Style, string | Color>;
     export const borderTopColorProperty: CssProperty<Style, Color>;
     export const borderRightColorProperty: CssProperty<Style, Color>;
     export const borderBottomColorProperty: CssProperty<Style, Color>;
     export const borderLeftColorProperty: CssProperty<Style, Color>;
 
-    export const borderWidthProperty: CssProperty<Style, number>;
+    export const borderWidthProperty: ShorthandProperty<Style, string | Length>;
     export const borderTopWidthProperty: CssProperty<Style, Length>;
     export const borderRightWidthProperty: CssProperty<Style, Length>;
     export const borderBottomWidthProperty: CssProperty<Style, Length>;
@@ -736,13 +736,13 @@ declare module "ui/core/view" {
     export const minHeightProperty: CssProperty<Style, Length>;
     export const widthProperty: CssProperty<Style, Length>;
     export const heightProperty: CssProperty<Style, Length>;
-    export const marginProperty: CssProperty<Style, string>;
-    export const marginLeftProperty: CssProperty<Style, Length>;
-    export const marginRightProperty: CssProperty<Style, Length>;
-    export const marginTopProperty: CssProperty<Style, Length>;
-    export const marginBottomProperty: CssProperty<Style, Length>;
+    export const marginProperty: ShorthandProperty<Style, string | PercentLength>;
+    export const marginLeftProperty: CssProperty<Style, PercentLength>;
+    export const marginRightProperty: CssProperty<Style, PercentLength>;
+    export const marginTopProperty: CssProperty<Style, PercentLength>;
+    export const marginBottomProperty: CssProperty<Style, PercentLength>;
 
-    export const paddingProperty: CssProperty<Style, string>;
+    export const paddingProperty: ShorthandProperty<Style, string | Length>;
     export const paddingLeftProperty: CssProperty<Style, Length>;
     export const paddingRightProperty: CssProperty<Style, Length>;
     export const paddingTopProperty: CssProperty<Style, Length>;
diff --git a/tns-core-modules/ui/definitions.d.ts b/tns-core-modules/ui/definitions.d.ts
index 9d9415518..4cfc72dc5 100644
--- a/tns-core-modules/ui/definitions.d.ts
+++ b/tns-core-modules/ui/definitions.d.ts
@@ -204,15 +204,15 @@ declare module "ui/core/properties" {
         constructor(options: CssPropertyOptions<T, U>);
     }
 
-    export interface ShorthandPropertyOptions {
+    export interface ShorthandPropertyOptions<P> {
         readonly name: string,
         readonly cssName: string;
-        readonly converter: (value: string) => [CssProperty<any, any>, any][],
-        readonly getter: (this: Style) => string
+        readonly converter: (value: string | P) => [CssProperty<any, any>, any][],
+        readonly getter: (this: Style) => string | P
     }
 
-    export class ShorthandProperty<T extends Style> {
-        constructor(options: ShorthandPropertyOptions);
+    export class ShorthandProperty<T extends Style, P> {
+        constructor(options: ShorthandPropertyOptions<P>);
 
         public readonly native: symbol;
         public readonly name: string;
diff --git a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
index 27bab7bfd..475abd561 100644
--- a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
+++ b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
@@ -325,7 +325,7 @@ alignSelfProperty1.register(View);
 //     (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, AlignSelf.AUTO)), "View");
 
 // flex-flow: <flex-direction> || <flex-wrap>
-const flexFlowProperty = new ShorthandProperty<Style>({
+const flexFlowProperty = new ShorthandProperty<Style, string>({
     name: "flex-flow", cssName: "flex-flow",
     getter: function (this: Style) {
         return `${this.flexDirection} ${this.flexWrap}`;
@@ -348,7 +348,7 @@ const flexFlowProperty = new ShorthandProperty<Style>({
 flexFlowProperty.register(Style);
 
 // flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis>
-const flexProperty = new ShorthandProperty<Style>({
+const flexProperty = new ShorthandProperty<Style, string>({
     name: "flex", cssName: "flex",
     getter: function (this: Style) {
         return `${this.flexGrow} ${this.flexShrink}`;
diff --git a/tns-core-modules/ui/layouts/layout-base-common.ts b/tns-core-modules/ui/layouts/layout-base-common.ts
index 1a8169fea..545496dca 100644
--- a/tns-core-modules/ui/layouts/layout-base-common.ts
+++ b/tns-core-modules/ui/layouts/layout-base-common.ts
@@ -1,5 +1,5 @@
 import { LayoutBase as LayoutBaseDefinition } from "ui/layouts/layout-base";
-import { View, CustomLayoutView, Property, AddChildFromBuilder, getViewById } from "ui/core/view";
+import { View, CustomLayoutView, Property, AddChildFromBuilder, getViewById, Length } from "ui/core/view";
 
 export * from "ui/core/view";
 
@@ -70,13 +70,41 @@ export class LayoutBaseCommon extends CustomLayoutView implements LayoutBaseDefi
         }
     }
 
-    get padding(): string {
+    get padding(): string | Length {
         return this.style.padding;
     }
-    set padding(value: string) {
+    set padding(value: string | Length) {
         this.style.padding = value;
     }
 
+    get paddingTop(): Length {
+        return this.style.paddingTop;
+    }
+    set paddingTop(value: Length) {
+        this.style.paddingTop = value;
+    }
+
+    get paddingRight(): Length {
+        return this.style.paddingRight;
+    }
+    set paddingRight(value: Length) {
+        this.style.paddingRight = value;
+    }
+
+    get paddingBottom(): Length {
+        return this.style.paddingBottom;
+    }
+    set paddingBottom(value: Length) {
+        this.style.paddingBottom = value;
+    }
+
+    get paddingLeft(): Length {
+        return this.style.paddingLeft;
+    }
+    set paddingLeft(value: Length) {
+        this.style.paddingLeft = value;
+    }
+
     public clipToBounds: boolean;
 
     public _childIndexToNativeChildIndex(index?: number): number {
diff --git a/tns-core-modules/ui/layouts/layout-base.d.ts b/tns-core-modules/ui/layouts/layout-base.d.ts
index 95f5c8776..9a216acb2 100644
--- a/tns-core-modules/ui/layouts/layout-base.d.ts
+++ b/tns-core-modules/ui/layouts/layout-base.d.ts
@@ -1,5 +1,5 @@
 declare module "ui/layouts/layout-base" {
-    import { View, CustomLayoutView, Property } from "ui/core/view";
+    import { View, CustomLayoutView, Property, Length } from "ui/core/view";
 
     export * from "ui/core/view";
     
@@ -64,30 +64,30 @@
          */
         eachLayoutChild(callback: (child: View, isLast: boolean) => void): void;
 
-        // /**
-        //  * Gets or sets padding style property.
-        //  */
-        // padding: string;
+        /**
+         * Gets or sets padding style property.
+         */
+        padding: string | Length;
 
-        // /**
-        //  * Specify the bottom padding of this layout.
-        //  */
-        // paddingBottom: number;
+        /**
+         * Specify the bottom padding of this layout.
+         */
+        paddingBottom: Length;
 
-        // /**
-        //  * Specify the left padding of this layout.
-        //  */
-        // paddingLeft: number;
+        /**
+         * Specify the left padding of this layout.
+         */
+        paddingLeft: Length;
 
-        // /**
-        //  * Specify the right padding of this layout.
-        //  */
-        // paddingRight: number;
+        /**
+         * Specify the right padding of this layout.
+         */
+        paddingRight: Length;
 
-        // /**
-        //  * Specify the top padding of this layout.
-        //  */
-        // paddingTop: number;
+        /**
+         * Specify the top padding of this layout.
+         */
+        paddingTop: Length;
 
         /**
          * Gets or sets a value indicating whether to clip the content of this layout.
diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts
index 5ba357d51..7f859c117 100644
--- a/tns-core-modules/ui/styling/style.d.ts
+++ b/tns-core-modules/ui/styling/style.d.ts
@@ -65,7 +65,7 @@ declare module "ui/styling/style" {
         public borderRightColor: Color;
         public borderBottomColor: Color;
         public borderLeftColor: Color;
-        public borderWidth: string | number;
+        public borderWidth: string | Length;
         public borderTopWidth: Length;
         public borderRightWidth: Length;
         public borderBottomWidth: Length;
@@ -96,12 +96,12 @@ declare module "ui/styling/style" {
         public minHeight: Length;
         public width: PercentLength;
         public height: PercentLength;
-        public margin: string;
+        public margin: string | PercentLength;
         public marginLeft: PercentLength;
         public marginTop: PercentLength;
         public marginRight: PercentLength;
         public marginBottom: PercentLength;
-        public padding: string;
+        public padding: string | Length;
         public paddingLeft: Length;
         public paddingTop: Length;
         public paddingRight: Length;
diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts
index d18340a19..7db7606b3 100644
--- a/tns-core-modules/ui/styling/style.ts
+++ b/tns-core-modules/ui/styling/style.ts
@@ -43,7 +43,7 @@ export class Style extends Observable implements StyleDefinition {
     public borderRightColor: Color;
     public borderBottomColor: Color;
     public borderLeftColor: Color;
-    public borderWidth: string | number;
+    public borderWidth: string | Length;
     public borderTopWidth: Length;
     public borderRightWidth: Length;
     public borderBottomWidth: Length;
@@ -74,12 +74,12 @@ export class Style extends Observable implements StyleDefinition {
     public minHeight: Length;
     public width: PercentLength;
     public height: PercentLength;
-    public margin: string;
+    public margin: string | PercentLength;
     public marginLeft: PercentLength;
     public marginTop: PercentLength;
     public marginRight: PercentLength;
     public marginBottom: PercentLength;
-    public padding: string;
+    public padding: string | Length;
     public paddingLeft: Length;
     public paddingTop: Length;
     public paddingRight: Length;
diff --git a/tns-core-modules/ui/text-base/text-base-common.ts b/tns-core-modules/ui/text-base/text-base-common.ts
index 1a696b830..0ddb17f56 100644
--- a/tns-core-modules/ui/text-base/text-base-common.ts
+++ b/tns-core-modules/ui/text-base/text-base-common.ts
@@ -1,5 +1,5 @@
 import { TextBase as TextBaseDefinition } from "ui/text-base";
-import { View, Property, CssProperty, InheritedCssProperty, Style, isIOS, Observable, makeValidator, makeParser } from "ui/core/view";
+import { View, Property, CssProperty, InheritedCssProperty, Style, isIOS, Observable, makeValidator, makeParser, Length } from "ui/core/view";
 import { PropertyChangeData } from "data/observable";
 import { FormattedString, FormattedStringView } from "text/formatted-string";
 import { addWeakEventListener, removeWeakEventListener } from "ui/core/weak-event-listener";
@@ -56,6 +56,41 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition,
         this.style.whiteSpace = value;
     }
 
+    get padding(): string | Length {
+        return this.style.padding;
+    }
+    set padding(value: string | Length) {
+        this.style.padding = value;
+    }
+
+    get paddingTop(): Length {
+        return this.style.paddingTop;
+    }
+    set paddingTop(value: Length) {
+        this.style.paddingTop = value;
+    }
+
+    get paddingRight(): Length {
+        return this.style.paddingRight;
+    }
+    set paddingRight(value: Length) {
+        this.style.paddingRight = value;
+    }
+
+    get paddingBottom(): Length {
+        return this.style.paddingBottom;
+    }
+    set paddingBottom(value: Length) {
+        this.style.paddingBottom = value;
+    }
+
+    get paddingLeft(): Length {
+        return this.style.paddingLeft;
+    }
+    set paddingLeft(value: Length) {
+        this.style.paddingLeft = value;
+    }
+
     public onFormattedTextChanged(data: PropertyChangeData) {
         let value = data.value;
         this._setFormattedTextPropertyToNative(value);
diff --git a/tns-core-modules/ui/text-base/text-base.d.ts b/tns-core-modules/ui/text-base/text-base.d.ts
index 1dfdb29d5..6074a8236 100644
--- a/tns-core-modules/ui/text-base/text-base.d.ts
+++ b/tns-core-modules/ui/text-base/text-base.d.ts
@@ -1,5 +1,5 @@
 declare module "ui/text-base" {
-    import { View, AddChildFromBuilder, Property, CssProperty, InheritedCssProperty, Style } from "ui/core/view";
+    import { View, AddChildFromBuilder, Property, CssProperty, InheritedCssProperty, Style, Length } from "ui/core/view";
     import { FormattedString, FormattedStringView } from "text/formatted-string";
 
     export * from "ui/core/view";
@@ -49,6 +49,31 @@
          */
         whiteSpace: WhiteSpace;
 
+        /**
+         * Gets or sets padding style property.
+         */
+        padding: string | Length;
+
+        /**
+         * Specify the bottom padding of this layout.
+         */
+        paddingBottom: Length;
+
+        /**
+         * Specify the left padding of this layout.
+         */
+        paddingLeft: Length;
+
+        /**
+         * Specify the right padding of this layout.
+         */
+        paddingRight: Length;
+
+        /**
+         * Specify the top padding of this layout.
+         */
+        paddingTop: Length;
+
         /**
          * Called for every child element declared in xml.
          * This method will add a child element (value) to current element.
diff --git a/tns-core-modules/ui/text-field/text-field.ios.ts b/tns-core-modules/ui/text-field/text-field.ios.ts
index 1cb4dcb55..549c5e03a 100644
--- a/tns-core-modules/ui/text-field/text-field.ios.ts
+++ b/tns-core-modules/ui/text-field/text-field.ios.ts
@@ -1,7 +1,15 @@
-import { TextFieldBase, Color, secureProperty, textProperty, hintProperty, colorProperty, placeholderColorProperty } from "./text-field-common";
+import { 
+    TextFieldBase, Color, secureProperty, textProperty, hintProperty, colorProperty, placeholderColorProperty, 
+    Length, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty
+} from "./text-field-common";
 
 export * from "./text-field-common";
 
+const zeroLength: Length = {
+    value: 0,
+    unit: "px"
+};
+
 class UITextFieldDelegateImpl extends NSObject implements UITextFieldDelegate {
     public static ObjCProtocols = [UITextFieldDelegate];
 
@@ -182,4 +190,32 @@ export class TextField extends TextFieldBase {
         colorAttibutes.setValueForKey(value instanceof Color ? value.ios : value, NSForegroundColorAttributeName);
         nativeView.attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(nativeView.placeholder || "", colorAttibutes);
     }
+
+    get [paddingTopProperty.native](): Length {
+        return zeroLength;
+    }
+    set [paddingTopProperty.native](value: Length) {
+        // Padding is realized via UITextFieldImpl.textRectForBounds method
+    }
+
+    get [paddingRightProperty.native](): Length {
+        return zeroLength;
+    }
+    set [paddingRightProperty.native](value: Length) {
+        // Padding is realized via UITextFieldImpl.textRectForBounds method
+    }
+
+    get [paddingBottomProperty.native](): Length {
+        return zeroLength;
+    }
+    set [paddingBottomProperty.native](value: Length) {
+        // Padding is realized via UITextFieldImpl.textRectForBounds method
+    }
+
+    get [paddingLeftProperty.native](): Length {
+        return zeroLength;
+    }
+    set [paddingLeftProperty.native](value: Length) {
+        // Padding is realized via UITextFieldImpl.textRectForBounds method
+    }
 }
\ No newline at end of file