fix(css): widget properties in css didn't work (#6889)

tests/app/ui/search-bar/search-bar-tests-native.android.ts

@@ -23,6 +23,15 @@ export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorM
     return undefined;
 }
 
+export function getNativeTextFieldBackgroundColor(searchBar: searchBarModule.SearchBar): colorModule.Color {
+    var textView = getTextView(searchBar.android);
+
+    if (textView) {
+        return new colorModule.Color((<android.graphics.drawable.ColorDrawable>textView.getBackground()).getColor());
+    }
+    return undefined;
+}
+
 export function getNativeFontSize(searchBar: searchBarModule.SearchBar): number {
     var textView = getTextView(searchBar.android);
 

tests/app/ui/search-bar/search-bar-tests-native.d.ts

@@ -3,4 +3,5 @@ import * as searchBarModule from "tns-core-modules/ui/search-bar";
 import * as colorModule from "tns-core-modules/color";
 
 export declare function getNativeHintColor(textView: searchBarModule.SearchBar): colorModule.Color;
+export declare function getNativeTextFieldBackgroundColor(textView: searchBarModule.SearchBar): colorModule.Color;
 export declare function getNativeFontSize(searchBar: searchBarModule.SearchBar): number;

tests/app/ui/search-bar/search-bar-tests-native.ios.ts

@@ -5,6 +5,11 @@ import { getColor } from "../helper";
 export function getNativeHintColor(searchBar: SearchBar): Color {
     return (<any>searchBar)._placeholderLabel ? getColor((<any>searchBar)._placeholderLabel.textColor) : undefined; 
 }
+
+export function getNativeTextFieldBackgroundColor(searchBar: SearchBar): Color {
+    return (<any>searchBar)._textField ? getColor((<any>searchBar)._textField.backgroundColor) : undefined; 
+}
+
 export function getNativeFontSize(searchBar: SearchBar): number {
     return (<any>searchBar)._textField ? (<any>searchBar)._textField.font.pointSize : undefined;
 }

tests/app/ui/search-bar/search-bar-tests.ts

@@ -28,7 +28,7 @@ export function test_recycling() {
     helper.nativeView_recycling_test(() => new searchBarModule.SearchBar());
 }
 
-export var testSearchBarHintColorAndroid = function () {
+export var testSearchBarHintColor = function () {
     helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
         var searchBar = <searchBarModule.SearchBar>views[0];
 
@@ -50,6 +50,28 @@ export var testSearchBarHintColorAndroid = function () {
     });
 };
 
+export var testSearchBarTextFieldBackgroundColor = function () {
+    helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
+        var searchBar = <searchBarModule.SearchBar>views[0];
+
+        searchBar.text = "";
+        searchBar.hint = "";
+
+        var expectedNormalizedValue;
+        var actualValue;
+
+        searchBar.textFieldBackgroundColor = new colorModule.Color("blue");
+        expectedNormalizedValue = "#0000FF"; // blue
+        actualValue = searchBarTestsNative.getNativeTextFieldBackgroundColor(searchBar).hex;
+        TKUnit.assert(actualValue === expectedNormalizedValue, "Actual: " + actualValue + "; Expected: " + expectedNormalizedValue);
+
+        searchBar.textFieldBackgroundColor = new colorModule.Color("red");
+        expectedNormalizedValue = "#FF0000"; // red
+        actualValue = searchBarTestsNative.getNativeTextFieldBackgroundColor(searchBar).hex;
+        TKUnit.assert(actualValue === expectedNormalizedValue, "Actual: " + actualValue + "; Expected: " + expectedNormalizedValue);
+    });
+};
+
 export var testSearchBarFontSize = function () {
     helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
         var searchBar = <searchBarModule.SearchBar>views[0];
@@ -66,6 +88,32 @@ export var testSearchBarFontSize = function () {
     });
 };
 
+export var testSearchBarPropertiesWithCSS = function () {
+    helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
+        var searchBar = <searchBarModule.SearchBar>views[0];
+
+        const expectedHintColor = "#0000FF"; // blue
+        const expectedTextFieldBackgroundColor = "#FF0000"; // red
+        const expectedFontSize = 30;
+
+        const hintColorActualValue = searchBarTestsNative.getNativeHintColor(searchBar).hex;
+        const textFieldBackgroundColorActualValue = searchBarTestsNative.getNativeTextFieldBackgroundColor(searchBar).hex;
+        const fontSizeActualValue = searchBarTestsNative.getNativeFontSize(searchBar);
+
+        TKUnit.assert(hintColorActualValue === expectedHintColor, "HintColor - Actual: " + hintColorActualValue + "; Expected: " + expectedHintColor);
+        TKUnit.assert(expectedTextFieldBackgroundColor === textFieldBackgroundColorActualValue, "Text Background Color - Actual: " + textFieldBackgroundColorActualValue + "; Expected: " + expectedTextFieldBackgroundColor);
+        TKUnit.assertAreClose(expectedFontSize, fontSizeActualValue, 0.2, "Font Size - Actual: " + fontSizeActualValue + "; Expected: " + expectedFontSize);
+    }, { pageCss: `
+        SearchBar {
+            text: test;
+            hint: test;
+            text-field-hint-color: blue;
+            text-field-background-color: red;
+            font-size: 30;
+        }
+    `});
+};
+
 export function test_DummyTestForSnippetOnly() {
     // >> article-searching
     var searchBar = new searchBarModule.SearchBar();

tns-core-modules/ui/styling/style-scope.ts

@@ -481,7 +481,8 @@ export class CssState {
                 if (property in this.view.style) {
                     this.view.style[`css:${property}`] = value;
                 } else {
-                    this.view[property] = value;
+                    const camelCasedProperty = property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+                    this.view[camelCasedProperty] = value;
                 }
             } catch (e) {
                 traceWrite(`Failed to apply property [${property}] with value [${value}] to ${this.view}. ${e}`, traceCategories.Error, traceMessageType.error);