diff --git a/apps/tests/pages/page8.ts b/apps/tests/pages/page8.ts index 866d26ab8..2ca481b73 100644 --- a/apps/tests/pages/page8.ts +++ b/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; diff --git a/apps/tests/pages/property-bindings.ts b/apps/tests/pages/property-bindings.ts index 745748083..07700dc0e 100644 --- a/apps/tests/pages/property-bindings.ts +++ b/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; diff --git a/apps/tests/ui/label/label-tests.ts b/apps/tests/ui/label/label-tests.ts index 15a165eec..7b41fd379 100644 --- a/apps/tests/ui/label/label-tests.ts +++ b/apps/tests/ui/label/label-tests.ts @@ -195,7 +195,7 @@ export class LabelTest extends testModule.UITest { // ### 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;}"; // ``` diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts index 870b2ab5f..04f7982bc 100644 --- a/apps/tests/ui/style/style-tests.ts +++ b/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) { 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) { TKUnit.assertEqual(30, testButton.style.fontSize); diff --git a/apps/tests/ui/view/view-tests-common.ts b/apps/tests/ui/view/view-tests-common.ts index 46f118b78..5fce0b08e 100644 --- a/apps/tests/ui/view/view-tests-common.ts +++ b/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) { var page = views[1]; page.css = ".myClass { background-image: url('~/logo.png') }"; diff --git a/apps/tests/xml-declaration/mymodule/MyControl.ts b/apps/tests/xml-declaration/mymodule/MyControl.ts index aca0396d3..9b8c81f9a 100644 --- a/apps/tests/xml-declaration/mymodule/MyControl.ts +++ b/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"; } } \ No newline at end of file diff --git a/ui/core/view-common.ts b/ui/core/view-common.ts index eb9670586..770fb3538 100644 --- a/ui/core/view-common.ts +++ b/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; } diff --git a/ui/core/view.d.ts b/ui/core/view.d.ts index ef69f1304..72b217b3f 100644 --- a/ui/core/view.d.ts +++ b/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. */