experiment: add date-time-picker base styles and visual tests (#9601)

Author: jouni

packages/date-time-picker/package.json

@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",

packages/date-time-picker/src/styles/vaadin-date-time-picker-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const dateTimePickerStyles: CSSResult;

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const dateTimePickerStyles = css`
+  @layer base {
+    .vaadin-date-time-picker-container {
+      width: calc(
+        var(--vaadin-field-default-width, 12em) * 2 +
+          var(--vaadin-date-time-picker-gap, var(--vaadin-gap-container-inline))
+      );
+    }
+
+    .slots {
+      display: flex;
+      gap: var(--vaadin-date-time-picker-gap, var(--vaadin-gap-container-inline));
+    }
+
+    .slots ::slotted([slot='date-picker']) {
+      min-width: 0;
+      flex: 1 1 auto;
+    }
+
+    .slots ::slotted([slot='time-picker']) {
+      min-width: 0;
+      flex: 1 1.65 auto;
+    }
+  }
+`;

packages/date-time-picker/test/visual/base/date-time-picker.test.js

@@ -0,0 +1,104 @@
+import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
+import '../../../src/vaadin-date-time-picker.js';
+
+describe('date-time-picker', () => {
+  let div, element;
+
+  beforeEach(() => {
+    div = document.createElement('div');
+    div.style.display = 'inline-block';
+    div.style.padding = '10px';
+    element = fixtureSync('<vaadin-date-time-picker></vaadin-date-time-picker>', div);
+  });
+
+  describe('default', () => {
+    it('basic', async () => {
+      await visualDiff(div, 'basic');
+    });
+
+    it('disabled', async () => {
+      element.disabled = true;
+      await visualDiff(div, 'disabled');
+    });
+
+    it('readonly', async () => {
+      element.readonly = true;
+      await visualDiff(div, 'readonly');
+    });
+
+    it('label', async () => {
+      element.label = 'Label';
+      await visualDiff(div, 'label');
+    });
+
+    it('focused', async () => {
+      element.label = 'Label';
+      element.focus();
+      await visualDiff(div, 'focused');
+    });
+
+    it('placeholder', async () => {
+      element.datePlaceholder = 'Date';
+      element.timePlaceholder = 'Time';
+      await visualDiff(div, 'placeholder');
+    });
+
+    it('value', async () => {
+      element.value = '2019-09-16T15:00';
+      await visualDiff(div, 'value');
+    });
+
+    it('required', async () => {
+      element.label = 'Label';
+      element.required = true;
+      await visualDiff(div, 'required');
+    });
+
+    it('error message', async () => {
+      element.label = 'Label';
+      element.errorMessage = 'This field is required';
+      element.required = true;
+      element.validate();
+      await visualDiff(div, 'error-message');
+    });
+
+    it('helper text', async () => {
+      element.helperText = 'Helper text';
+      await visualDiff(div, 'helper-text');
+    });
+
+    it('helper above field', async () => {
+      element.label = 'Label';
+      element.errorMessage = 'This field is required';
+      element.required = true;
+      element.validate();
+      element.helperText = 'Helper text';
+      element.setAttribute('theme', 'helper-above-field');
+      await visualDiff(div, 'helper-above-field');
+    });
+  });
+
+  describe('RTL', () => {
+    before(() => {
+      document.documentElement.setAttribute('dir', 'rtl');
+    });
+
+    after(() => {
+      document.documentElement.removeAttribute('dir');
+    });
+
+    it('RTL', async () => {
+      await visualDiff(div, 'rtl-basic');
+    });
+
+    it('RTL error message', async () => {
+      element.label = 'Label';
+      element.errorMessage = 'This field is required';
+      element.required = true;
+      element.validate();
+      await visualDiff(div, 'rtl-error-message');
+    });
+  });
+});