className property added cssClass deprecated

apps/tests/pages/page8.ts

@@ -49,7 +49,7 @@ export function createPage() {
 
     var info = new btns.Button();
     info.text = "info";
-    info.cssClass = "info";
+    info.className = "info";
     info.on(btns.Button.tapEvent, function () {
         info.text = "hi: " + counter++;
         btn.isEnabled = true;

apps/tests/pages/property-bindings.ts

@@ -118,7 +118,7 @@ export function createPage() {
     createStringPropertyUI({ name: "style.verticalAlignment", value: "stretch" });
     createStringPropertyUI({ name: "margin", value: "20" });
 
-    createStringPropertyUI({ name: "cssClass", value: "testClass" });
+    createStringPropertyUI({ name: "className", value: "testClass" });
 
     page.css = ".testClass { background-color: LightGreen }";
     return page;

apps/tests/ui/label/label-tests.ts

@@ -195,7 +195,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         // ### How to style a label via css class
         // ``` JavaScript
         label.text = "The quick brown fox jumps over the lazy dog.";
-        label.cssClass = "title";
+        label.className = "title";
         //// after that all we have to do is to set a similar css entry within parent page css property
         //// label.parentPage.css = ".title {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
         // ```

apps/tests/ui/style/style-tests.ts

@@ -139,7 +139,7 @@ export function test_class_selector() {
 
         //// Will be styled
         btnWithClass = new buttonModule.Button();
-        btnWithClass.cssClass = "test";
+        btnWithClass.className = "test";
 
         //// Won't be styled
         btnWithNoClass = new buttonModule.Button();
@@ -172,7 +172,7 @@ export function test_multiple_class_selector() {
 
         //// Will be styled
         btnWithClasses = new buttonModule.Button();
-        btnWithClasses.cssClass = "style1 style2";
+        btnWithClasses.className = "style1 style2";
 
         var stack = new stackModule.StackLayout();
         page.content = stack;
@@ -290,7 +290,7 @@ export function test_class_and_state_selector() {
         page.content = testStack;
 
         btn = new buttonModule.Button();
-        btn.cssClass = "test"
+        btn.className = "test"
         testStack.addChild(btn);
 
         page.css = ".test:pressed { color: red; }";
@@ -315,7 +315,7 @@ export function test_class_and_state_selector_with_multiple_classes() {
         page.content = testStack;
 
         btn = new buttonModule.Button();
-        btn.cssClass = "test otherClass"
+        btn.className = "test otherClass"
         testStack.addChild(btn);
 
         page.css = ".test:pressed { color: red; }";
@@ -392,14 +392,14 @@ export function test_restore_original_values_when_state_is_changed() {
 //    testPage.content = testStack;
 
 //    var btnWithClass = new button.Button();
-//    btnWithClass.cssClass = "test";
+//    btnWithClass.className = "test";
 //    testStack.addChild(btnWithClass);
 
 //    var btnWithNoClass = new button.Button();
 //    testStack.addChild(btnWithNoClass);
 
 //    var lblWithClass = new label.Label();
-//    lblWithClass.cssClass = "test";
+//    lblWithClass.className = "test";
 //    testStack.addChild(lblWithClass);
 
 //    testPage.css = "button.test { color: red; }";
@@ -431,14 +431,14 @@ export function test_restore_original_values_when_state_is_changed() {
 //    testPage.content = testStack;
 
 //    var btnWithClass = new button.Button();
-//    btnWithClass.cssClass = "test";
+//    btnWithClass.className = "test";
 //    testStack.addChild(btnWithClass);
 
 //    var btnWithNoClass = new button.Button();
 //    testStack.addChild(btnWithNoClass);
 
 //    var lblWithClass = new label.Label();
-//    lblWithClass.cssClass = "test";
+//    lblWithClass.className = "test";
 //    testStack.addChild(lblWithClass);
 
 //    testPage.css = "button.test:pressed { color: red; }";
@@ -506,7 +506,7 @@ export function test_styles_are_updated_when_cssCalss_is_set() {
         helper.assertViewBackgroundColor(btn, "#111111");
         helper.assertViewBackgroundColor(btn2, "#111111");
 
-        btn.cssClass = "button-class";
+        btn.className = "button-class";
 
         helper.assertViewBackgroundColor(btn, "#222222");
         helper.assertViewBackgroundColor(btn2, "#111111");
@@ -518,7 +518,7 @@ export function test_styles_are_updated_when_cssCalss_is_set() {
 export function test_styles_are_updated_when_cssCalss_is_changed() {
     var testStack = new stackModule.StackLayout();
     var btn = new buttonModule.Button();
-    btn.cssClass = "button-class";
+    btn.className = "button-class";
     var btn2 = new buttonModule.Button();
     testStack.addChild(btn);
     testStack.addChild(btn2);
@@ -527,7 +527,7 @@ export function test_styles_are_updated_when_cssCalss_is_changed() {
         helper.assertViewBackgroundColor(btn, "#222222");
         helper.assertViewBackgroundColor(btn2, "#111111");
 
-        btn.cssClass = "button-class-two";
+        btn.className = "button-class-two";
 
         helper.assertViewBackgroundColor(btn, "#333333");
         helper.assertViewBackgroundColor(btn2, "#111111");
@@ -539,7 +539,7 @@ export function test_styles_are_updated_when_cssCalss_is_changed() {
 export function test_styles_are_updated_when_cssCalss_is_cleared() {
     var testStack = new stackModule.StackLayout();
     var btn = new buttonModule.Button();
-    btn.cssClass = "button-class";
+    btn.className = "button-class";
     var btn2 = new buttonModule.Button();
     testStack.addChild(btn);
     testStack.addChild(btn2);
@@ -548,7 +548,7 @@ export function test_styles_are_updated_when_cssCalss_is_cleared() {
         helper.assertViewBackgroundColor(btn, "#222222");
         helper.assertViewBackgroundColor(btn2, "#111111");
 
-        btn.cssClass = undefined;
+        btn.className = undefined;
 
         helper.assertViewBackgroundColor(btn, "#111111");
         helper.assertViewBackgroundColor(btn2, "#111111");
@@ -661,11 +661,11 @@ function testSelectorsPrioritiesTemplate(css: string) {
         testStack.addChild(btn);
 
         btnWithClass = new buttonModule.Button();
-        btnWithClass.cssClass = "button-class";
+        btnWithClass.className = "button-class";
         testStack.addChild(btnWithClass);
 
         btnWithId = new buttonModule.Button();
-        btnWithId.cssClass = "button-class";
+        btnWithId.className = "button-class";
         btnWithId.id = "myButton"
         testStack.addChild(btnWithId);
 
@@ -817,7 +817,7 @@ var invalidCSS = ".invalid { " +
 export function test_set_invalid_CSS_values_dont_cause_crash() {
     var testButton = new buttonModule.Button();
     testButton.text = "Test";
-    testButton.cssClass = "invalid";
+    testButton.className = "invalid";
 
     helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
         TKUnit.assertEqual(30, testButton.style.fontSize);
@@ -834,7 +834,7 @@ var casedCSS = ".cased {" +
 export function test_set_mixed_CSS_cases_works() {
     var testButton = new buttonModule.Button();
     testButton.text = "Test";
-    testButton.cssClass = "cased";
+    testButton.className = "cased";
 
     helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
         TKUnit.assertEqual(30, testButton.style.fontSize);

apps/tests/ui/view/view-tests-common.ts

@@ -495,7 +495,11 @@ export var test_binding_id = function () {
 }
 
 export var test_binding_cssClass = function () {
-    property_binding_test("cssClass", "class1", "class2");
+    property_binding_test("className", "class1", "class2");
+}
+
+export var test_binding_cssClass = function () {
+    property_binding_test("className", "class1", "class2");
 }
 
 export var test_binding_style_color = function () {
@@ -661,7 +665,7 @@ export var testBackgroundColor = function () {
 
 export var testBackgroundImage = function () {
     var lbl = _createLabelWithBorder();
-    lbl.cssClass = "myClass";
+    lbl.className = "myClass";
     helper.buildUIAndRunTest(lbl, function (views: Array<viewModule.View>) {
         var page = <page.Page>views[1];
         page.css = ".myClass { background-image: url('~/logo.png') }";

apps/tests/xml-declaration/mymodule/MyControl.ts

@@ -19,6 +19,6 @@ export class MyControl extends stackLayoutModule.StackLayout {
         this.addChild(lbl);
         this.addChild(btn);
 
-        this.cssClass = "MyStackLayout";
+        this.className = "MyStackLayout";
     }
 }

ui/core/view-common.ts

@@ -17,7 +17,7 @@ import observable = require("data/observable");
 import {registerSpecialProperty} from "ui/builder/special-properties";
 
 registerSpecialProperty("class", (instance: definition.View, propertyValue: string) => {
-    instance.cssClass = propertyValue;
+    instance.className = propertyValue;
 });
 
 export function isEventOrGesture(name: string, view: View): boolean {
@@ -112,7 +112,13 @@ var cssClassProperty = new dependencyObservable.Property(
     "cssClass",
     "View",
     new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsStyle, onCssClassPropertyChanged)
-    );
+);
+
+var classNameProperty = new dependencyObservable.Property(
+    "className",
+    "View",
+    new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsStyle, onCssClassPropertyChanged)
+);
 
 var translateXProperty = new dependencyObservable.Property(
     "translateX",
@@ -162,6 +168,7 @@ export class View extends proxy.ProxyObject implements definition.View {
 
     public static idProperty = idProperty;
     public static cssClassProperty = cssClassProperty;
+    public static classNameProperty = classNameProperty;
     public static translateXProperty = translateXProperty;
     public static translateYProperty = translateYProperty;
     public static scaleXProperty = scaleXProperty;
@@ -496,6 +503,13 @@ export class View extends proxy.ProxyObject implements definition.View {
         this._setValue(View.cssClassProperty, value);
     }
 
+    get className(): string {
+        return this._getValue(View.cssClassProperty);
+    }
+    set className(value: string) {
+        this._setValue(View.cssClassProperty, value);
+    }
+
     get style(): style.Style {
         return this._style;
     }

ui/core/view.d.ts

@@ -84,9 +84,14 @@ declare module "ui/core/view" {
          */
         visibility?: string;
         /**
-         * Gets or sets the CSS class of this view.
+         * [Deprecated. Please use className instead] Gets or sets the CSS class of this view.
          */
         cssClass?: string;
+
+        /**
+         * Gets or sets the CSS class name of this view.
+         */
+        className?: string;
         /**
          * Gets or sets the id of this view.
          */
@@ -129,10 +134,15 @@ declare module "ui/core/view" {
         public static idProperty: dependencyObservable.Property;
 
         /**
-         * Represents the observable property backing the cssClass property of each View.
+         * [Deprecated. Please use className instead.] Represents the observable property backing the cssClass property of each View.
          */
         public static cssClassProperty: dependencyObservable.Property;
 
+        /**
+         * Represents the observable property backing the className property of each View.
+         */
+        public static classNameProperty: dependencyObservable.Property;
+
         /**
          * Represents the observable property backing the isEnabled property of each View.
          */
@@ -270,10 +280,15 @@ declare module "ui/core/view" {
         id: string;
 
         /**
-         * Gets or sets the CSS class for this view.
+         * [Deprecated. Please use className instead.] Gets or sets the CSS class for this view.
          */
         cssClass: string;
 
+        /**
+         * Gets or sets the CSS class name for this view.
+         */
+        className: string;
+
         /**
          * Gets the style object associated to this view.
          */