experiment: add custom-field base styles and visual tests (#9628)

Author: web-padawan

packages/custom-field/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/custom-field/src/styles/vaadin-custom-field-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 customFieldStyles: CSSResult;

packages/custom-field/src/styles/vaadin-custom-field-base-styles.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { container } from '@vaadin/field-base/src/styles/container-base-styles.js';
+import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
+
+const customField = css`
+  @layer base {
+    .vaadin-custom-field-container {
+      width: 100%;
+    }
+
+    .inputs-wrapper {
+      flex: none;
+    }
+  }
+`;
+
+export const customFieldStyles = [field, container, customField];

packages/custom-field/test/visual/base/custom-field.test.js

@@ -0,0 +1,69 @@
+import { fixtureSync } from '@vaadin/testing-helpers';
+import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
+import '../../../src/vaadin-custom-field.js';
+
+describe('custom-field', () => {
+  describe('basic', () => {
+    let div, element;
+
+    beforeEach(() => {
+      div = document.createElement('div');
+      div.style.display = 'inline-block';
+      div.style.padding = '10px';
+
+      element = fixtureSync(
+        `
+        <vaadin-custom-field>
+          <input type="text" />
+          <input type="number" />
+        </vaadin-custom-field>
+      `,
+        div,
+      );
+    });
+
+    it('basic', async () => {
+      await visualDiff(div, 'default');
+    });
+
+    it('label', async () => {
+      element.label = 'Home address';
+      await visualDiff(div, 'label');
+    });
+
+    it('value', async () => {
+      element.value = 'Foo street\t42';
+      await visualDiff(div, 'value');
+    });
+
+    it('required', async () => {
+      element.label = 'Home address';
+      element.required = true;
+      await visualDiff(div, 'required');
+    });
+
+    it('error message', async () => {
+      element.label = 'Home address';
+      element.required = true;
+      element.errorMessage = 'This field is required';
+      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 = 'Home address';
+      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');
+    });
+  });
+});