Use data-... attributes instead of name property
gr-button doesn't have name property. It is better to use data-...
attributes to attach additional data to the gr-button element.
Change-Id: I33cc62f2e426376db40b3060be91401361da0d90
diff --git a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
index b62764b..46fd227 100644
--- a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
+++ b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
@@ -111,7 +111,7 @@
</template>
<iron-selector
id="labelSelector"
- attr-for-selected="value"
+ attr-for-selected="data-value"
selected="[[_computeLabelValue(labels, permittedLabels, label)]]"
hidden$="[[!_computeAnyPermittedLabelValues(permittedLabels, label.name)]]"
on-selected-item-changed="_setSelectedValueText">
@@ -121,8 +121,8 @@
<gr-button
class$="[[_computeButtonClass(value, index, _items.length)]]"
has-tooltip
- name="[[label.name]]"
- value$="[[value]]"
+ data-name$="[[label.name]]"
+ data-value$="[[value]]"
title$="[[_computeLabelValueTitle(labels, label.name, value)]]">
[[value]]</gr-button>
</template>
diff --git a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js
index 76e6e64..bd7fff8 100644
--- a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js
+++ b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js
@@ -140,8 +140,8 @@
this._selectedValueText = e.target.selectedItem.getAttribute('title');
// Needed to update the style of the selected button.
this.updateStyles();
- const name = e.target.selectedItem.name;
- const value = e.target.selectedItem.getAttribute('value');
+ const name = e.target.selectedItem.dataset.name;
+ const value = e.target.selectedItem.dataset.value;
this.dispatchEvent(new CustomEvent(
'labels-changed',
{detail: {name, value}, bubbles: true, composed: true}));
diff --git a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row_test.html b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row_test.html
index 519fbb8..f1a009a 100644
--- a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row_test.html
+++ b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row_test.html
@@ -110,7 +110,7 @@
element.addEventListener('labels-changed', labelsChangedHandler);
assert.ok(element.$.labelSelector);
MockInteractions.tap(element.$$(
- 'gr-button[value="-1"]'));
+ 'gr-button[data-value="-1"]'));
flushAsynchronousOperations();
assert.strictEqual(element.selectedValue, '-1');
assert.strictEqual(element.selectedItem
@@ -167,7 +167,7 @@
test('do not display tooltips on touch devices', () => {
const verifiedBtn = element.$$(
- 'iron-selector > gr-button[value="-1"]');
+ 'iron-selector > gr-button[data-value="-1"]');
// On touch devices, tooltips should not be shown.
verifiedBtn._isTouchDevice = true;
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog-it_test.html b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog-it_test.html
index 3632348..a65f76c 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog-it_test.html
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog-it_test.html
@@ -156,7 +156,7 @@
const labelScoreRows = Polymer.dom(element.$.labelScores.root)
.querySelector('gr-label-score-row[name="Code-Review"]');
const selectedBtn = Polymer.dom(labelScoreRows.root)
- .querySelector('gr-button[value="+1"].iron-selected');
+ .querySelector('gr-button[data-value="+1"].iron-selected');
assert.isOk(selectedBtn);
done();
});
