refactor(ui5-checkbox, ui5-radiobutton): rename "readOnly" to "readonly" (#413)

Author: ilhan007

packages/main/src/CheckBox.hbs

@@ -6,7 +6,7 @@
 	aria-readonly="{{ariaReadonly}}"
 	tabindex="{{tabIndex}}">
 		<div id="{{ctr._id}}-CbBg" class="{{classes.inner}}">
-			<input id="{{ctr._id}}-CB" type='checkbox' ?checked="{{ctr.checked}}" ?readonly="{{ctr.readOnly}}" data-sap-no-tab-ref/>
+			<input id="{{ctr._id}}-CB" type='checkbox' ?checked="{{ctr.checked}}" ?readonly="{{ctr.readonly}}" data-sap-no-tab-ref/>
 		</div>
 
 		{{#if ctr._label.text}}

packages/main/src/CheckBox.js

@@ -43,7 +43,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		readOnly: {
+		readonly: {
 			type: Boolean,
 		},
 
@@ -157,7 +157,7 @@ const metadata = {
  * <br><br>
  * You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to
  * <code>true</code>,
- * or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readOnly</code>
+ * or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code>
  * property to <code>true</code>.
  *
  * <h3>ES6 Module Import</h3>
@@ -242,7 +242,7 @@ class CheckBox extends UI5Element {
 	}
 
 	canToggle() {
-		return !(this.disabled || this.readOnly);
+		return !(this.disabled || this.readonly);
 	}
 
 	static get calculateTemplateContext() {

packages/main/src/CheckBoxTemplateContext.js

@@ -7,7 +7,7 @@ class CheckBoxTemplateContext {
 
 		const context = {
 			ctr: state,
-			ariaReadonly: state.readOnly,
+			ariaReadonly: state.readonly,
 			tabIndex: state.disabled ? undefined : "0",
 			classes: { main: mainClasses, inner: innerClasses },
 			styles: {
@@ -19,13 +19,13 @@ class CheckBoxTemplateContext {
 	}
 
 	static getMainClasses(state) {
-		const hoverable = !state.disabled && !state.readOnly && isDesktop();
+		const hoverable = !state.disabled && !state.readonly && isDesktop();
 
 		return {
 			"ui5-checkbox-wrapper": true,
 			"ui5-checkbox-with-label": !!state.text,
 			"ui5-checkbox--disabled": state.disabled,
-			"ui5-checkbox--readonly": state.readOnly,
+			"ui5-checkbox--readonly": state.readonly,
 			"ui5-checkbox--error": state.valueState === "Error",
 			"ui5-checkbox--warning": state.valueState === "Warning",
 			"ui5-checkbox--wrap": state.wrap,

packages/main/src/RadioButton.hbs

@@ -3,15 +3,15 @@
 	style="{{styles.main}}"
 	role="radio"
 	aria-checked="{{ctr.selected}}"
-	aria-readonly="{{readOnly}}"
+	aria-readonly="{{readonly}}"
 	tabindex="{{tabIndex}}">
 
 	<div class='{{classes.inner}}'>
 		<svg class="sapMRbSvg" focusable="false">
 			<circle class="sapMRbSvgOuter" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rOuter}}" stroke-width="2" fill="none" />
 			<circle class="sapMRbSvgInner" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rInner}}" stroke-width="10" />
 		</svg>
- 		<input type='radio' ?checked="{{ctr.selected}}" ?readonly="{{ctr.readOnly}}" ?disabled="{{ctr.readOnly}}" name="{{ctr.name}}" data-sap-no-tab-ref/>
+ 		<input type='radio' ?checked="{{ctr.selected}}" ?readonly="{{ctr.readonly}}" ?disabled="{{ctr.readonly}}" name="{{ctr.name}}" data-sap-no-tab-ref/>
 	</div>
 
 	{{#if ctr._label.text}}

packages/main/src/RadioButton.js

@@ -51,7 +51,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		readOnly: {
+		readonly: {
 			type: Boolean,
 		},
 
@@ -304,7 +304,7 @@ class RadioButton extends UI5Element {
 	}
 
 	canToggle() {
-		return !(this.disabled || this.readOnly || this.selected);
+		return !(this.disabled || this.readonly || this.selected);
 	}
 
 	static get calculateTemplateContext() {

packages/main/src/RadioButtonTemplateContext.js

@@ -24,7 +24,7 @@ class RadioButtonTemplateContext {
 			innerClasses = RadioButtonTemplateContext.getInnerClasses(state),
 			context = {
 				ctr: state,
-				readOnly: state.disabled || state.readOnly,
+				readonly: state.disabled || state.readonly,
 				tabIndex: state.disabled || (!state.selected && state.name) ? "-1" : "0",
 				circle: compact ? SVGConfig.compact : SVGConfig.default,
 				classes: { main: mainClasses, inner: innerClasses },
@@ -42,14 +42,14 @@ class RadioButtonTemplateContext {
 			sapMRbHasLabel: state.text && state.text.length > 0,
 			sapMRbSel: state.selected,
 			sapMRbDis: state.disabled,
-			sapMRbRo: state.readOnly,
+			sapMRbRo: state.readonly,
 			sapMRbErr: state.valueState === "Error",
 			sapMRbWarn: state.valueState === "Warning",
 		};
 	}
 
 	static getInnerClasses(state) {
-		const hoverable = !state.disabled && !state.readOnly && isDesktop();
+		const hoverable = !state.disabled && !state.readonly && isDesktop();
 
 		return {
 			sapMRbInner: true,

packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html

@@ -60,9 +60,9 @@ <h1>ui5-radiobutton</h1>
 	<section>
 		<ui5-title>ui5-radiobutton states</ui5-title></p>
 		<ui5-radiobutton id="myRb6" selected text="Default"></ui5-radiobutton>
-		<ui5-radiobutton id="myRb7" read-only text="read only"></ui5-radiobutton>
+		<ui5-radiobutton id="myRb7" readonly text="read only"></ui5-radiobutton>
 		<ui5-radiobutton id="myRb8" disabled text="disabled"></ui5-radiobutton>
-		<ui5-radiobutton id="myRb9" read-only text="read only" selected></ui5-radiobutton>
+		<ui5-radiobutton id="myRb9" readonly text="read only" selected></ui5-radiobutton>
 		<ui5-radiobutton id="myRb10" disabled text="disabled" selected></ui5-radiobutton>
 		<ui5-radiobutton id="myRb11" value-state="Warning" text="warning"></ui5-radiobutton>
 		<ui5-radiobutton id="myRb12" value-state="Error" text="error"></ui5-radiobutton>

packages/main/test/sap/ui/webcomponents/main/qunit/RadioButton.qunit.js

@@ -36,7 +36,7 @@ TestHelper.ready(function () {
 			assert.notOk(radiobutton.classList.contains(expectedClass), "root element does not have ." + expectedClass);
 		});
 
-		QUnit.test("The 'read-only' is not set by default", function (assert) {
+		QUnit.test("The 'readonly' is not set by default", function (assert) {
 			var expectedClass = "sapMRbRo",
 				radiobutton = this.getRadioButtonRoot();
 
@@ -97,14 +97,14 @@ TestHelper.ready(function () {
 			});
 		});
 
-		QUnit.test("changing the 'read-only' is reflected in the DOM", function (assert) {
+		QUnit.test("changing the 'readonly' is reflected in the DOM", function (assert) {
 			assert.expect(1);
 
 			var done = assert.async(),
 				expectedClass = "sapMRbRo",
 				radiobutton = this.getRadioButtonRoot();
 
-			this.radiobutton.setAttribute("read-only", "");
+			this.radiobutton.setAttribute("readonly", "");
 
 			RenderScheduler.whenFinished().then(function () {
 				assert.ok(radiobutton.classList.contains(expectedClass), "root element has ." + expectedClass);

packages/main/test/sap/ui/webcomponents/main/samples/CheckBox.sample.html

@@ -59,21 +59,21 @@ <h3>CheckBox states</h3>
 			<ui5-checkbox text="Error" value-state="Error"></ui5-checkbox>
 			<ui5-checkbox text="Warning" value-state="Warning"></ui5-checkbox>
 			<ui5-checkbox text="Disabled" disabled checked></ui5-checkbox>
-			<ui5-checkbox text="Read-only" read-only checked></ui5-checkbox>
+			<ui5-checkbox text="Readonly" readonly checked></ui5-checkbox>
 			<ui5-checkbox text="Error disabled" disabled value-state="Error" checked></ui5-checkbox>
 			<ui5-checkbox text="Warning disabled " disabled value-state="Warning" checked></ui5-checkbox>
-			<ui5-checkbox text="Error read-only" read-only value-state="Error" checked></ui5-checkbox>
-			<ui5-checkbox text="Warning read-only" read-only value-state="Warning" checked></ui5-checkbox>
+			<ui5-checkbox text="Error readonly" readonly value-state="Error" checked></ui5-checkbox>
+			<ui5-checkbox text="Warning readonly" readonly value-state="Warning" checked></ui5-checkbox>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-checkbox text="Error" value-state="Error"></ui5-checkbox>
 <ui5-checkbox text="Warning" value-state="Warning"></ui5-checkbox>
 <ui5-checkbox text="Disabled" disabled checked></ui5-checkbox>
-<ui5-checkbox text="Read-only" read-only checked></ui5-checkbox>
+<ui5-checkbox text="Readonly" readonly checked></ui5-checkbox>
 <ui5-checkbox text="Error disabled" disabled value-state="Error" checked></ui5-checkbox>
 <ui5-checkbox text="Warning disabled " disabled value-state="Warning" checked></ui5-checkbox>
-<ui5-checkbox text="Error read-only" read-only value-state="Error" checked></ui5-checkbox>
-<ui5-checkbox text="Warning read-only" read-only value-state="Warning" checked></ui5-checkbox>
+<ui5-checkbox text="Error readonly" readonly value-state="Error" checked></ui5-checkbox>
+<ui5-checkbox text="Warning readonly" readonly value-state="Warning" checked></ui5-checkbox>
 		</xmp></pre>
 	</section>
 

packages/main/test/specs/DefaultValues.spec.js

@@ -25,7 +25,7 @@ describe("Default values", () => {
 		assertBooleanProperty(button, "submits");
 
 		// CheckBox
-		assertBooleanProperty(cb, "readOnly");
+		assertBooleanProperty(cb, "readonly");
 		assertBooleanProperty(cb, "checked");
 		assertBooleanProperty(cb, "disabled");
 
@@ -54,7 +54,7 @@ describe("Default values", () => {
 		assertBooleanProperty(panel, "fixed");
 
 		// RadioButton
-		assertBooleanProperty(radiobutton, "readOnly");
+		assertBooleanProperty(radiobutton, "readonly");
 		assertBooleanProperty(radiobutton, "selected");
 		assertBooleanProperty(radiobutton, "disabled");