Allow hiding cancel button in gr-dialog
With this change, the cancel button may be hidden from the footer of the
dialog by supplying an empty string as the cancel label.
Bug: Issue 9543
Change-Id: Ic9841424bd2bb28a92a488280e7e7bbd0c4aae54
diff --git a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.html b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.html
index 7d56606..ac0a829 100644
--- a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.html
+++ b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.html
@@ -55,12 +55,17 @@
flex-shrink: 0;
justify-content: flex-end;
}
+ .hidden {
+ display: none;
+ }
</style>
<div class="container" on-keydown="_handleKeydown">
<header><slot name="header"></slot></header>
<main><slot name="main"></slot></main>
<footer>
- <gr-button link on-tap="_handleCancelTap">[[cancelLabel]]</gr-button>
+ <gr-button id="cancel" class$="[[_computeCancelClass(cancelLabel)]]" link on-tap="_handleCancelTap">
+ [[cancelLabel]]
+ </gr-button>
<gr-button id="confirm" link primary on-tap="_handleConfirm" disabled="[[disabled]]">
[[confirmLabel]]
</gr-button>
diff --git a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.js b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.js
index f874110..6163b09 100644
--- a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.js
+++ b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.js
@@ -37,6 +37,7 @@
type: String,
value: 'Confirm',
},
+ // Supplying an empty cancel label will hide the button completely.
cancelLabel: {
type: String,
value: 'Cancel',
@@ -74,5 +75,9 @@
resetFocus() {
this.$.confirm.focus();
},
+
+ _computeCancelClass(cancelLabel) {
+ return cancelLabel.length ? '' : 'hidden';
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_test.html b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_test.html
index 849a018..4a5a181 100644
--- a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_test.html
@@ -79,5 +79,13 @@
element.resetFocus();
assert.isTrue(focusStub.calledOnce);
});
+
+ test('empty cancel label hides cancel btn', () => {
+ assert.isFalse(isHidden(element.$.cancel));
+ element.cancelLabel = '';
+ flushAsynchronousOperations();
+
+ assert.isTrue(isHidden(element.$.cancel));
+ });
});
</script>