fix: add missing RTL styles and visual tests (#2574)

vaadin · Sep 20, 2021 · 30cec7e · 30cec7e
1 parent ac319b3
commit 30cec7e
Show file tree

Hide file tree

Showing 40 changed files with 126 additions and 79 deletions.
diff --git a/packages/vaadin-date-picker/src/vaadin-date-picker-styles.js b/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;
+  }
+`;
diff --git a/packages/vaadin-date-picker/src/vaadin-date-picker.js b/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

diff --git a/packages/vaadin-date-picker/test/visual/lumo/date-picker.test.js b/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`);
+      });
+    });
   });
 });
diff --git a/...ots/date-picker/baseline/clear-button.png → ...date-picker/baseline/ltr-clear-button.png b/...ots/date-picker/baseline/clear-button.png → ...date-picker/baseline/ltr-clear-button.png
diff --git a/...ts/date-picker/baseline/error-message.png → ...ate-picker/baseline/ltr-error-message.png b/...ts/date-picker/baseline/error-message.png → ...ate-picker/baseline/ltr-error-message.png
diff --git a/...hots/date-picker/baseline/helper-text.png → .../date-picker/baseline/ltr-helper-text.png b/...hots/date-picker/baseline/helper-text.png → .../date-picker/baseline/ltr-helper-text.png
diff --git a/...creenshots/date-picker/baseline/label.png → ...nshots/date-picker/baseline/ltr-label.png b/...creenshots/date-picker/baseline/label.png → ...nshots/date-picker/baseline/ltr-label.png
diff --git a/...hots/date-picker/baseline/placeholder.png → .../date-picker/baseline/ltr-placeholder.png b/...hots/date-picker/baseline/placeholder.png → .../date-picker/baseline/ltr-placeholder.png
diff --git a/...reenshots/date-picker/baseline/prefix.png → ...shots/date-picker/baseline/ltr-prefix.png b/...reenshots/date-picker/baseline/prefix.png → ...shots/date-picker/baseline/ltr-prefix.png
diff --git a/...enshots/date-picker/baseline/required.png → ...ots/date-picker/baseline/ltr-required.png b/...enshots/date-picker/baseline/required.png → ...ots/date-picker/baseline/ltr-required.png
diff --git a/...creenshots/date-picker/baseline/value.png → ...nshots/date-picker/baseline/ltr-value.png b/...creenshots/date-picker/baseline/value.png → ...nshots/date-picker/baseline/ltr-value.png
diff --git a/...e-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-clear-button.png b/...e-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-clear-button.png
diff --git a/...-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-error-message.png b/...-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-error-message.png
diff --git a/...te-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-helper-text.png b/...te-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-helper-text.png
diff --git a/...din-date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-label.png b/...din-date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-label.png
diff --git a/...te-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-placeholder.png b/...te-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-placeholder.png
diff --git a/...in-date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-prefix.png b/...in-date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-prefix.png
diff --git a/...-date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-required.png b/...-date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-required.png
diff --git a/...din-date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-value.png b/...din-date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-value.png
diff --git a/packages/vaadin-date-picker/test/visual/material/date-picker.test.js b/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`);
+      });
+    });
   });
 });
diff --git a/...ots/date-picker/baseline/clear-button.png → ...date-picker/baseline/ltr-clear-button.png b/...ots/date-picker/baseline/clear-button.png → ...date-picker/baseline/ltr-clear-button.png
diff --git a/...ts/date-picker/baseline/error-message.png → ...ate-picker/baseline/ltr-error-message.png b/...ts/date-picker/baseline/error-message.png → ...ate-picker/baseline/ltr-error-message.png
diff --git a/...hots/date-picker/baseline/helper-text.png → .../date-picker/baseline/ltr-helper-text.png b/...hots/date-picker/baseline/helper-text.png → .../date-picker/baseline/ltr-helper-text.png
diff --git a/...creenshots/date-picker/baseline/label.png → ...nshots/date-picker/baseline/ltr-label.png b/...creenshots/date-picker/baseline/label.png → ...nshots/date-picker/baseline/ltr-label.png
diff --git a/...hots/date-picker/baseline/placeholder.png → .../date-picker/baseline/ltr-placeholder.png b/...hots/date-picker/baseline/placeholder.png → .../date-picker/baseline/ltr-placeholder.png
diff --git a/...reenshots/date-picker/baseline/prefix.png → ...shots/date-picker/baseline/ltr-prefix.png b/...reenshots/date-picker/baseline/prefix.png → ...shots/date-picker/baseline/ltr-prefix.png
diff --git a/...enshots/date-picker/baseline/required.png → ...ots/date-picker/baseline/ltr-required.png b/...enshots/date-picker/baseline/required.png → ...ots/date-picker/baseline/ltr-required.png
diff --git a/...creenshots/date-picker/baseline/value.png → ...nshots/date-picker/baseline/ltr-value.png b/...creenshots/date-picker/baseline/value.png → ...nshots/date-picker/baseline/ltr-value.png
diff --git a/...cker/test/visual/material/screenshots/date-picker/baseline/rtl-clear-button.png b/...cker/test/visual/material/screenshots/date-picker/baseline/rtl-clear-button.png
diff --git a/...ker/test/visual/material/screenshots/date-picker/baseline/rtl-error-message.png b/...ker/test/visual/material/screenshots/date-picker/baseline/rtl-error-message.png
diff --git a/...icker/test/visual/material/screenshots/date-picker/baseline/rtl-helper-text.png b/...icker/test/visual/material/screenshots/date-picker/baseline/rtl-helper-text.png
diff --git a/...date-picker/test/visual/material/screenshots/date-picker/baseline/rtl-label.png b/...date-picker/test/visual/material/screenshots/date-picker/baseline/rtl-label.png
diff --git a/...icker/test/visual/material/screenshots/date-picker/baseline/rtl-placeholder.png b/...icker/test/visual/material/screenshots/date-picker/baseline/rtl-placeholder.png
diff --git a/...ate-picker/test/visual/material/screenshots/date-picker/baseline/rtl-prefix.png b/...ate-picker/test/visual/material/screenshots/date-picker/baseline/rtl-prefix.png
diff --git a/...e-picker/test/visual/material/screenshots/date-picker/baseline/rtl-required.png b/...e-picker/test/visual/material/screenshots/date-picker/baseline/rtl-required.png
diff --git a/...date-picker/test/visual/material/screenshots/date-picker/baseline/rtl-value.png b/...date-picker/test/visual/material/screenshots/date-picker/baseline/rtl-value.png
diff --git a/...ime-picker/test/visual/lumo/screenshots/date-time-picker/baseline/rtl-basic.png b/...ime-picker/test/visual/lumo/screenshots/date-time-picker/baseline/rtl-basic.png
diff --git a/...er/test/visual/lumo/screenshots/date-time-picker/baseline/rtl-error-message.png b/...er/test/visual/lumo/screenshots/date-time-picker/baseline/rtl-error-message.png
diff --git a/...picker/test/visual/material/screenshots/date-time-picker/baseline/rtl-basic.png b/...picker/test/visual/material/screenshots/date-time-picker/baseline/rtl-basic.png
diff --git a/...est/visual/material/screenshots/date-time-picker/baseline/rtl-error-message.png b/...est/visual/material/screenshots/date-time-picker/baseline/rtl-error-message.png