Skip to content

Commit c2eba4e

Browse files
ilhan007ilhan007
authored
refactor(ui5-checkbox, ui5-radiobutton): rename "readOnly" to "readonly" (#413)
1 parent dcfccec commit c2eba4e

File tree

10 files changed

+27
-27
lines changed

10 files changed

+27
-27
lines changed

‎packages/main/src/CheckBox.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
aria-readonly="{{ariaReadonly}}"
77
tabindex="{{tabIndex}}">
88
<div id="{{ctr._id}}-CbBg" class="{{classes.inner}}">
9-
<input id="{{ctr._id}}-CB" type='checkbox' ?checked="{{ctr.checked}}" ?readonly="{{ctr.readOnly}}" data-sap-no-tab-ref/>
9+
<input id="{{ctr._id}}-CB" type='checkbox' ?checked="{{ctr.checked}}" ?readonly="{{ctr.readonly}}" data-sap-no-tab-ref/>
1010
</div>
1111

1212
{{#if ctr._label.text}}

‎packages/main/src/CheckBox.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const metadata = {
4343
* @defaultvalue false
4444
* @public
4545
*/
46-
readOnly: {
46+
readonly: {
4747
type: Boolean,
4848
},
4949

@@ -157,7 +157,7 @@ const metadata = {
157157
* <br><br>
158158
* You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to
159159
* <code>true</code>,
160-
* or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readOnly</code>
160+
* or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code>
161161
* property to <code>true</code>.
162162
*
163163
* <h3>ES6 Module Import</h3>
@@ -242,7 +242,7 @@ class CheckBox extends UI5Element {
242242
}
243243

244244
canToggle() {
245-
return !(this.disabled || this.readOnly);
245+
return !(this.disabled || this.readonly);
246246
}
247247

248248
static get calculateTemplateContext() {

‎packages/main/src/CheckBoxTemplateContext.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class CheckBoxTemplateContext {
77

88
const context = {
99
ctr: state,
10-
ariaReadonly: state.readOnly,
10+
ariaReadonly: state.readonly,
1111
tabIndex: state.disabled ? undefined : "0",
1212
classes: { main: mainClasses, inner: innerClasses },
1313
styles: {
@@ -19,13 +19,13 @@ class CheckBoxTemplateContext {
1919
}
2020

2121
static getMainClasses(state) {
22-
const hoverable = !state.disabled && !state.readOnly && isDesktop();
22+
const hoverable = !state.disabled && !state.readonly && isDesktop();
2323

2424
return {
2525
"ui5-checkbox-wrapper": true,
2626
"ui5-checkbox-with-label": !!state.text,
2727
"ui5-checkbox--disabled": state.disabled,
28-
"ui5-checkbox--readonly": state.readOnly,
28+
"ui5-checkbox--readonly": state.readonly,
2929
"ui5-checkbox--error": state.valueState === "Error",
3030
"ui5-checkbox--warning": state.valueState === "Warning",
3131
"ui5-checkbox--wrap": state.wrap,

‎packages/main/src/RadioButton.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
style="{{styles.main}}"
44
role="radio"
55
aria-checked="{{ctr.selected}}"
6-
aria-readonly="{{readOnly}}"
6+
aria-readonly="{{readonly}}"
77
tabindex="{{tabIndex}}">
88

99
<div class='{{classes.inner}}'>
1010
<svg class="sapMRbSvg" focusable="false">
1111
<circle class="sapMRbSvgOuter" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rOuter}}" stroke-width="2" fill="none" />
1212
<circle class="sapMRbSvgInner" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rInner}}" stroke-width="10" />
1313
</svg>
14-
<input type='radio' ?checked="{{ctr.selected}}" ?readonly="{{ctr.readOnly}}" ?disabled="{{ctr.readOnly}}" name="{{ctr.name}}" data-sap-no-tab-ref/>
14+
<input type='radio' ?checked="{{ctr.selected}}" ?readonly="{{ctr.readonly}}" ?disabled="{{ctr.readonly}}" name="{{ctr.name}}" data-sap-no-tab-ref/>
1515
</div>
1616

1717
{{#if ctr._label.text}}

‎packages/main/src/RadioButton.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const metadata = {
5151
* @defaultvalue false
5252
* @public
5353
*/
54-
readOnly: {
54+
readonly: {
5555
type: Boolean,
5656
},
5757

@@ -304,7 +304,7 @@ class RadioButton extends UI5Element {
304304
}
305305

306306
canToggle() {
307-
return !(this.disabled || this.readOnly || this.selected);
307+
return !(this.disabled || this.readonly || this.selected);
308308
}
309309

310310
static get calculateTemplateContext() {

‎packages/main/src/RadioButtonTemplateContext.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ class RadioButtonTemplateContext {
2424
innerClasses = RadioButtonTemplateContext.getInnerClasses(state),
2525
context = {
2626
ctr: state,
27-
readOnly: state.disabled || state.readOnly,
27+
readonly: state.disabled || state.readonly,
2828
tabIndex: state.disabled || (!state.selected && state.name) ? "-1" : "0",
2929
circle: compact ? SVGConfig.compact : SVGConfig.default,
3030
classes: { main: mainClasses, inner: innerClasses },
@@ -42,14 +42,14 @@ class RadioButtonTemplateContext {
4242
sapMRbHasLabel: state.text && state.text.length > 0,
4343
sapMRbSel: state.selected,
4444
sapMRbDis: state.disabled,
45-
sapMRbRo: state.readOnly,
45+
sapMRbRo: state.readonly,
4646
sapMRbErr: state.valueState === "Error",
4747
sapMRbWarn: state.valueState === "Warning",
4848
};
4949
}
5050

5151
static getInnerClasses(state) {
52-
const hoverable = !state.disabled && !state.readOnly && isDesktop();
52+
const hoverable = !state.disabled && !state.readonly && isDesktop();
5353

5454
return {
5555
sapMRbInner: true,

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ <h1>ui5-radiobutton</h1>
6060
<section>
6161
<ui5-title>ui5-radiobutton states</ui5-title></p>
6262
<ui5-radiobutton id="myRb6" selected text="Default"></ui5-radiobutton>
63-
<ui5-radiobutton id="myRb7" read-only text="read only"></ui5-radiobutton>
63+
<ui5-radiobutton id="myRb7" readonly text="read only"></ui5-radiobutton>
6464
<ui5-radiobutton id="myRb8" disabled text="disabled"></ui5-radiobutton>
65-
<ui5-radiobutton id="myRb9" read-only text="read only" selected></ui5-radiobutton>
65+
<ui5-radiobutton id="myRb9" readonly text="read only" selected></ui5-radiobutton>
6666
<ui5-radiobutton id="myRb10" disabled text="disabled" selected></ui5-radiobutton>
6767
<ui5-radiobutton id="myRb11" value-state="Warning" text="warning"></ui5-radiobutton>
6868
<ui5-radiobutton id="myRb12" value-state="Error" text="error"></ui5-radiobutton>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ TestHelper.ready(function () {
3636
assert.notOk(radiobutton.classList.contains(expectedClass), "root element does not have ." + expectedClass);
3737
});
3838

39-
QUnit.test("The 'read-only' is not set by default", function (assert) {
39+
QUnit.test("The 'readonly' is not set by default", function (assert) {
4040
var expectedClass = "sapMRbRo",
4141
radiobutton = this.getRadioButtonRoot();
4242

@@ -97,14 +97,14 @@ TestHelper.ready(function () {
9797
});
9898
});
9999

100-
QUnit.test("changing the 'read-only' is reflected in the DOM", function (assert) {
100+
QUnit.test("changing the 'readonly' is reflected in the DOM", function (assert) {
101101
assert.expect(1);
102102

103103
var done = assert.async(),
104104
expectedClass = "sapMRbRo",
105105
radiobutton = this.getRadioButtonRoot();
106106

107-
this.radiobutton.setAttribute("read-only", "");
107+
this.radiobutton.setAttribute("readonly", "");
108108

109109
RenderScheduler.whenFinished().then(function () {
110110
assert.ok(radiobutton.classList.contains(expectedClass), "root element has ." + expectedClass);

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -59,21 +59,21 @@ <h3>CheckBox states</h3>
5959
<ui5-checkbox text="Error" value-state="Error"></ui5-checkbox>
6060
<ui5-checkbox text="Warning" value-state="Warning"></ui5-checkbox>
6161
<ui5-checkbox text="Disabled" disabled checked></ui5-checkbox>
62-
<ui5-checkbox text="Read-only" read-only checked></ui5-checkbox>
62+
<ui5-checkbox text="Readonly" readonly checked></ui5-checkbox>
6363
<ui5-checkbox text="Error disabled" disabled value-state="Error" checked></ui5-checkbox>
6464
<ui5-checkbox text="Warning disabled " disabled value-state="Warning" checked></ui5-checkbox>
65-
<ui5-checkbox text="Error read-only" read-only value-state="Error" checked></ui5-checkbox>
66-
<ui5-checkbox text="Warning read-only" read-only value-state="Warning" checked></ui5-checkbox>
65+
<ui5-checkbox text="Error readonly" readonly value-state="Error" checked></ui5-checkbox>
66+
<ui5-checkbox text="Warning readonly" readonly value-state="Warning" checked></ui5-checkbox>
6767
</div>
6868
<pre class="prettyprint lang-html"><xmp>
6969
<ui5-checkbox text="Error" value-state="Error"></ui5-checkbox>
7070
<ui5-checkbox text="Warning" value-state="Warning"></ui5-checkbox>
7171
<ui5-checkbox text="Disabled" disabled checked></ui5-checkbox>
72-
<ui5-checkbox text="Read-only" read-only checked></ui5-checkbox>
72+
<ui5-checkbox text="Readonly" readonly checked></ui5-checkbox>
7373
<ui5-checkbox text="Error disabled" disabled value-state="Error" checked></ui5-checkbox>
7474
<ui5-checkbox text="Warning disabled " disabled value-state="Warning" checked></ui5-checkbox>
75-
<ui5-checkbox text="Error read-only" read-only value-state="Error" checked></ui5-checkbox>
76-
<ui5-checkbox text="Warning read-only" read-only value-state="Warning" checked></ui5-checkbox>
75+
<ui5-checkbox text="Error readonly" readonly value-state="Error" checked></ui5-checkbox>
76+
<ui5-checkbox text="Warning readonly" readonly value-state="Warning" checked></ui5-checkbox>
7777
</xmp></pre>
7878
</section>
7979

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ describe("Default values", () => {
2525
assertBooleanProperty(button, "submits");
2626

2727
// CheckBox
28-
assertBooleanProperty(cb, "readOnly");
28+
assertBooleanProperty(cb, "readonly");
2929
assertBooleanProperty(cb, "checked");
3030
assertBooleanProperty(cb, "disabled");
3131

@@ -54,7 +54,7 @@ describe("Default values", () => {
5454
assertBooleanProperty(panel, "fixed");
5555

5656
// RadioButton
57-
assertBooleanProperty(radiobutton, "readOnly");
57+
assertBooleanProperty(radiobutton, "readonly");
5858
assertBooleanProperty(radiobutton, "selected");
5959
assertBooleanProperty(radiobutton, "disabled");
6060

0 commit comments

Comments
 (0)