Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
May 20, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2059254
refactor: rename property "readOnly" to "readonly"
ilhan007 May 20, 2019
63ad9fd
fix default values test
ilhan007 May 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/main/src/CheckBox.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
6 changes: 3 additions & 3 deletions packages/main/src/CheckBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const metadata = {
* @defaultvalue false
* @public
*/
readOnly: {
readonly: {
type: Boolean,
defaultValue: false,
},
Expand Down Expand Up @@ -161,7 +161,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>
Expand Down Expand Up @@ -246,7 +246,7 @@ class CheckBox extends UI5Element {
}

canToggle() {
return !(this.disabled || this.readOnly);
return !(this.disabled || this.readonly);
}

static get calculateTemplateContext() {
Expand Down
6 changes: 3 additions & 3 deletions packages/main/src/CheckBoxTemplateContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/RadioButton.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/RadioButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const metadata = {
* @defaultvalue false
* @public
*/
readOnly: {
readonly: {
type: Boolean,
},

Expand Down Expand Up @@ -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() {
Expand Down
6 changes: 3 additions & 3 deletions packages/main/src/RadioButtonTemplateContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions packages/main/test/sap/ui/webcomponents/main/qunit/RadioButton.qunit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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);
Expand Down
12 changes: 6 additions & 6 deletions packages/main/test/sap/ui/webcomponents/main/samples/CheckBox.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions packages/main/test/specs/DefaultValues.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe("Default values", () => {
assertBooleanProperty(button, "submits");

// CheckBox
assertBooleanProperty(cb, "readOnly");
assertBooleanProperty(cb, "readonly");
assertBooleanProperty(cb, "checked");
assertBooleanProperty(cb, "disabled");

Expand Down Expand Up @@ -54,7 +54,7 @@ describe("Default values", () => {
assertBooleanProperty(panel, "fixed");

// RadioButton
assertBooleanProperty(radiobutton, "readOnly");
assertBooleanProperty(radiobutton, "readonly");
assertBooleanProperty(radiobutton, "selected");
assertBooleanProperty(radiobutton, "disabled");

Expand Down