diff --git a/bower.json b/bower.json
index 872d209..df8b41d 100644
--- a/bower.json
+++ b/bower.json
@@ -26,21 +26,21 @@
],
"dependencies": {
"polymer": "^2.0.0",
- "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.4.0",
- "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0",
- "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0",
- "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.0",
+ "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.5.2",
+ "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.2",
+ "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0",
+ "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.3.0",
"vaadin-license-checker": "vaadin/license-checker#^2.1.0",
- "vaadin-dialog": "vaadin/vaadin-dialog#^2.1.0",
- "vaadin-button": "vaadin/vaadin-button#^2.1.0",
- "vaadin-overlay": "vaadin/vaadin-overlay#^3.2.0"
+ "vaadin-dialog": "vaadin/vaadin-dialog#^2.3.0",
+ "vaadin-button": "vaadin/vaadin-button#^2.3.0-alpha1",
+ "vaadin-overlay": "vaadin/vaadin-overlay#^3.4.0"
},
"devDependencies": {
"iron-component-page": "^3.0.0",
"iron-demo-helpers": "^2.0.0",
"webcomponentsjs": "^1.0.0",
"web-component-tester": "^6.1.5",
- "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0",
+ "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0-alpha1",
"vaadin-icons": "vaadin/vaadin-icons#^4.2.0",
"iron-test-helpers": "^2.0.0"
}
diff --git a/src/vaadin-confirm-dialog.html b/src/vaadin-confirm-dialog.html
index 28f22da..a8aa68a 100644
--- a/src/vaadin-confirm-dialog.html
+++ b/src/vaadin-confirm-dialog.html
@@ -242,6 +242,27 @@
}
}
+ attributeChangedCallback(name, oldValue, newValue) {
+ super.attributeChangedCallback(name, oldValue, newValue);
+ if (name === 'dir') {
+ const value = newValue === 'rtl';
+ this.__isRTL = value;
+ this.opened && this.__toggleContentRTL(value);
+ }
+ }
+
+ __toggleContentRTL(rtl) {
+ const contentBlock = this.$.dialog.$.overlay.content.querySelector('#content');
+ const footerBlock = this.$.dialog.$.overlay.content.querySelector('[part=footer]');
+ if (rtl) {
+ contentBlock.setAttribute('dir', 'rtl');
+ footerBlock.setAttribute('dir', 'rtl');
+ } else {
+ contentBlock.removeAttribute('dir');
+ footerBlock.removeAttribute('dir');
+ }
+ }
+
_openedChanged() {
if (!this.opened) {
return;
@@ -254,6 +275,8 @@
}
});
+ this.opened && this.__toggleContentRTL(this.__isRTL);
+
Polymer.RenderStatus.beforeNextRender(this, () => {
var confirmButton = this._confirmButton || this.$.dialog.$.overlay.content.querySelector('#confirm');
confirmButton.focus();
diff --git a/test/alert-api-test.html b/test/alert-api-test.html
index c5ca7a9..3a8c867 100644
--- a/test/alert-api-test.html
+++ b/test/alert-api-test.html
@@ -51,6 +51,22 @@
var confirmButtonText = confirmButton.textContent;
expect(confirmButtonText).to.contain('Of course');
});
+
+ describe('RTL', function() {
+ it('should apply rtl to content and footer before openning', function() {
+ confirm.setAttribute('dir', 'rtl');
+ confirm.opened = true;
+ expect(content.querySelector('#content').getAttribute('dir')).to.be.equal('rtl');
+ expect(content.querySelector('[part="footer"]').getAttribute('dir')).to.be.equal('rtl');
+ });
+
+ it('should apply rtl to content and footer when opened', function() {
+ confirm.opened = true;
+ confirm.setAttribute('dir', 'rtl');
+ expect(content.querySelector('#content').getAttribute('dir')).to.be.equal('rtl');
+ expect(content.querySelector('[part="footer"]').getAttribute('dir')).to.be.equal('rtl');
+ });
+ });
});
diff --git a/test/visual/custom-buttons.html b/test/visual/custom-buttons.html
index 3ddaef4..cdc56be 100644
--- a/test/visual/custom-buttons.html
+++ b/test/visual/custom-buttons.html
@@ -22,6 +22,9 @@