Correctly align overlay in RTL mode

[samiheikki]

Fixes #421

---

This change is 

[platosha]

Reviewed 2 of 2 files at r1.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @samiheikki and @YuriyVaadin)

---

src/vaadin-date-picker-mixin.html, line 504 at r1 (raw file):

        if (rightAlign) {
          if (getComputedStyle(this._inputElement).getPropertyValue('direction') === 'rtl') {
            this.$.overlay.removeAttribute('right-aligned');

Does not make sense to me to remove right-aligned attribute. This case is still right-aligned in fact, so we should keep right-aligned attr in place. We should rather fix right-aligned to do the right thing in CSS (pun intended).

The problem is that in CSS we have :host([right-aligned]) { align-items: flex-end; } in the overlay styles, with flex-end meaning the left side in RTL mode. In this particular use case we rather need flex-right there (not a thing, but I wish we could), because we are bound to use right anyway, because the rest of the positioning logic for the overlay uses the right property.

#useThePlatform way of fixing the CSS would be to use append :host([right-aligned]:dir(rtl)) { align-items: flex-start; } in CSS. However, that wouldn’t work because the :dir() CSS selector support is poor. So I suggest:

this.$.overlay.setAttribute('dir',
  getComputedStyle(this._inputElement).getPropertyValue('direction')
);

/* vaadin-date-picker-overlay-styles */
:host([right-aligned]) { align-items: flex-end; }
:host([right-aligned][dir="rtl"]) { align-items: flex-start; }

Alternatively, we could use the Polymer.DirMixin as a workaround for :dir CSS selector as well, but I think that would be a slight overkill, the Vanilla workaround suggested above is enough.

[samiheikki]

Reviewable status: 1 of 3 files reviewed, 1 unresolved discussion (waiting on @platosha and @YuriyVaadin)

---

src/vaadin-date-picker-mixin.html, line 504 at r1 (raw file):

Previously, platosha (Anton Platonov) wrote…

Does not make sense to me to remove right-aligned attribute. This case is still right-aligned in fact, so we should keep right-aligned attr in place. We should rather fix right-aligned to do the right thing in CSS (pun intended).

The problem is that in CSS we have :host([right-aligned]) { align-items: flex-end; } in the overlay styles, with flex-end meaning the left side in RTL mode. In this particular use case we rather need flex-right there (not a thing, but I wish we could), because we are bound to use right anyway, because the rest of the positioning logic for the overlay uses the right property.

#useThePlatform way of fixing the CSS would be to use append :host([right-aligned]:dir(rtl)) { align-items: flex-start; } in CSS. However, that wouldn’t work because the :dir() CSS selector support is poor. So I suggest:

this.$.overlay.setAttribute('dir',
  getComputedStyle(this._inputElement).getPropertyValue('direction')
);

/* vaadin-date-picker-overlay-styles */
:host([right-aligned]) { align-items: flex-end; }
:host([right-aligned][dir="rtl"]) { align-items: flex-start; }

Alternatively, we could use the Polymer.DirMixin as a workaround for :dir CSS selector as well, but I think that would be a slight overkill, the Vanilla workaround suggested above is enough.

Done. And thanks for the detailed feedback.

[platosha]

Reviewed 3 of 3 files at r2, 1 of 1 files at r3.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @yuriy-fix)

[samiheikki]

🎉