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
This commit is contained in:
Dmitrii Filippov
2019-11-12 15:52:05 +01:00
parent 720b8b743d
commit 4c6970dee7
4 changed files with 8 additions and 8 deletions

View File

@@ -111,7 +111,7 @@ limitations under the License.
</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 @@ limitations under the License.
<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>

View File

@@ -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}));

View File

@@ -110,7 +110,7 @@ limitations under the License.
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 @@ limitations under the License.
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;

View File

@@ -156,7 +156,7 @@ limitations under the License.
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();
});