fix: add missing RTL styles and visual tests

packages/vaadin-date-picker/src/vaadin-date-picker-styles.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+export const datePickerStyles = css`
+  :host([dir='rtl']) [part='input-field'] {
+    direction: ltr;
+  }
+
+  :host([dir='rtl']) [part='value']::placeholder {
+    direction: rtl;
+    text-align: left;
+  }
+
+  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+    direction: rtl;
+    text-align: left;
+  }
+`;

packages/vaadin-date-picker/src/vaadin-date-picker.js

@@ -17,10 +17,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
+import { datePickerStyles } from './vaadin-date-picker-styles.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
 
-registerStyles('vaadin-date-picker', inputFieldShared, { moduleId: 'vaadin-date-picker-styles' });
+registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { moduleId: 'vaadin-date-picker-styles' });
 
 /**
  * `<vaadin-date-picker>` is a date selection field which includes a scrollable

packages/vaadin-date-picker/test/visual/lumo/date-picker.test.js

@@ -27,51 +27,63 @@ describe('date-picker', () => {
     await visualDiff(div, 'readonly');
   });
 
-  it('label', async () => {
-    element.label = 'Label';
-    await visualDiff(div, 'label');
-  });
+  ['ltr', 'rtl'].forEach((dir) => {
+    describe(dir, () => {
+      before(() => {
+        document.documentElement.setAttribute('dir', dir);
+      });
 
-  it('placeholder', async () => {
-    element.placeholder = 'Placeholder';
-    await visualDiff(div, 'placeholder');
-  });
+      after(() => {
+        document.documentElement.removeAttribute('dir');
+      });
 
-  it('value', async () => {
-    element.value = '1991-12-20';
-    await visualDiff(div, 'value');
-  });
+      it('label', async () => {
+        element.label = 'Label';
+        await visualDiff(div, `${dir}-label`);
+      });
 
-  it('required', async () => {
-    element.label = 'Label';
-    element.required = true;
-    await visualDiff(div, 'required');
-  });
+      it('placeholder', async () => {
+        element.placeholder = 'Placeholder';
+        await visualDiff(div, `${dir}-placeholder`);
+      });
 
-  it('error message', async () => {
-    element.label = 'Label';
-    element.errorMessage = 'This field is required';
-    element.required = true;
-    element.validate();
-    await visualDiff(div, 'error-message');
-  });
+      it('value', async () => {
+        element.value = '1991-12-20';
+        await visualDiff(div, `${dir}-value`);
+      });
 
-  it('helper text', async () => {
-    element.helperText = 'Helper text';
-    await visualDiff(div, 'helper-text');
-  });
+      it('required', async () => {
+        element.label = 'Label';
+        element.required = true;
+        await visualDiff(div, `${dir}-required`);
+      });
 
-  it('clear button', async () => {
-    element.value = '1991-12-20';
-    element.clearButtonVisible = true;
-    await visualDiff(div, 'clear-button');
-  });
+      it('error message', async () => {
+        element.label = 'Label';
+        element.errorMessage = 'This field is required';
+        element.required = true;
+        element.validate();
+        await visualDiff(div, `${dir}-error-message`);
+      });
+
+      it('helper text', async () => {
+        element.helperText = 'Helper text';
+        await visualDiff(div, `${dir}-helper-text`);
+      });
+
+      it('clear button', async () => {
+        element.value = '1991-12-20';
+        element.clearButtonVisible = true;
+        await visualDiff(div, `${dir}-clear-button`);
+      });
 
-  it('prefix slot', async () => {
-    const span = document.createElement('span');
-    span.setAttribute('slot', 'prefix');
-    span.textContent = '$';
-    element.appendChild(span);
-    await visualDiff(div, 'prefix');
+      it('prefix slot', async () => {
+        const span = document.createElement('span');
+        span.setAttribute('slot', 'prefix');
+        span.textContent = '$';
+        element.appendChild(span);
+        await visualDiff(div, `${dir}-prefix`);
+      });
+    });
   });
 });

packages/vaadin-date-picker/test/visual/material/date-picker.test.js

@@ -27,51 +27,63 @@ describe('date-picker', () => {
     await visualDiff(div, 'readonly');
   });
 
-  it('label', async () => {
-    element.label = 'Label';
-    await visualDiff(div, 'label');
-  });
+  ['ltr', 'rtl'].forEach((dir) => {
+    describe(dir, () => {
+      before(() => {
+        document.documentElement.setAttribute('dir', dir);
+      });
 
-  it('placeholder', async () => {
-    element.placeholder = 'Placeholder';
-    await visualDiff(div, 'placeholder');
-  });
+      after(() => {
+        document.documentElement.removeAttribute('dir');
+      });
 
-  it('value', async () => {
-    element.value = '1991-12-20';
-    await visualDiff(div, 'value');
-  });
+      it('label', async () => {
+        element.label = 'Label';
+        await visualDiff(div, `${dir}-label`);
+      });
 
-  it('required', async () => {
-    element.label = 'Label';
-    element.required = true;
-    await visualDiff(div, 'required');
-  });
+      it('placeholder', async () => {
+        element.placeholder = 'Placeholder';
+        await visualDiff(div, `${dir}-placeholder`);
+      });
 
-  it('error message', async () => {
-    element.label = 'Label';
-    element.errorMessage = 'This field is required';
-    element.required = true;
-    element.validate();
-    await visualDiff(div, 'error-message');
-  });
+      it('value', async () => {
+        element.value = '1991-12-20';
+        await visualDiff(div, `${dir}-value`);
+      });
 
-  it('helper text', async () => {
-    element.helperText = 'Helper text';
-    await visualDiff(div, 'helper-text');
-  });
+      it('required', async () => {
+        element.label = 'Label';
+        element.required = true;
+        await visualDiff(div, `${dir}-required`);
+      });
 
-  it('clear button', async () => {
-    element.value = '1991-12-20';
-    element.clearButtonVisible = true;
-    await visualDiff(div, 'clear-button');
-  });
+      it('error message', async () => {
+        element.label = 'Label';
+        element.errorMessage = 'This field is required';
+        element.required = true;
+        element.validate();
+        await visualDiff(div, `${dir}-error-message`);
+      });
+
+      it('helper text', async () => {
+        element.helperText = 'Helper text';
+        await visualDiff(div, `${dir}-helper-text`);
+      });
+
+      it('clear button', async () => {
+        element.value = '1991-12-20';
+        element.clearButtonVisible = true;
+        await visualDiff(div, `${dir}-clear-button`);
+      });
 
-  it('prefix slot', async () => {
-    const span = document.createElement('span');
-    span.setAttribute('slot', 'prefix');
-    span.textContent = '$';
-    element.appendChild(span);
-    await visualDiff(div, 'prefix');
+      it('prefix slot', async () => {
+        const span = document.createElement('span');
+        span.setAttribute('slot', 'prefix');
+        span.textContent = '$';
+        element.appendChild(span);
+        await visualDiff(div, `${dir}-prefix`);
+      });
+    });
   });
 });