refactor!: move text-field to new base class (#2620)

packages/crud/package.json

@@ -31,12 +31,12 @@
     "@vaadin/component-base": "^22.0.0-alpha6",
     "@vaadin/confirm-dialog": "^22.0.0-alpha6",
     "@vaadin/dialog": "^22.0.0-alpha6",
+    "@vaadin/text-field": "^22.0.0-alpha6",
     "@vaadin/vaadin-form-layout": "^22.0.0-alpha6",
     "@vaadin/vaadin-grid": "^22.0.0-alpha6",
     "@vaadin/vaadin-license-checker": "^2.1.0",
     "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
     "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha6",
     "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
   },
   "devDependencies": {

packages/crud/src/vaadin-crud-form.js

@@ -4,7 +4,7 @@
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { FormLayoutElement } from '@vaadin/vaadin-form-layout/src/vaadin-form-layout.js';
-import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
+import '@vaadin/text-field/src/vaadin-text-field.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**

packages/crud/theme/lumo/vaadin-crud.js

@@ -1,8 +1,8 @@
 import '@vaadin/vaadin-grid/theme/lumo/vaadin-grid.js';
 import '@vaadin/button/theme/lumo/vaadin-button.js';
 import '@vaadin/vaadin-form-layout/theme/lumo/vaadin-form-layout.js';
-import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/dialog/theme/lumo/vaadin-dialog.js';
+import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
 import '@vaadin/vaadin-grid/theme/lumo/vaadin-grid-sorter.js';
 import './vaadin-crud-styles.js';

packages/crud/theme/material/vaadin-crud.js

@@ -1,8 +1,8 @@
 import '@vaadin/vaadin-grid/theme/material/vaadin-grid.js';
 import '@vaadin/button/theme/material/vaadin-button.js';
 import '@vaadin/vaadin-form-layout/theme/material/vaadin-form-layout.js';
-import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
 import '@vaadin/dialog/theme/material/vaadin-dialog.js';
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';
 import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog.js';
 import '@vaadin/vaadin-grid/theme/material/vaadin-grid-sorter.js';
 import './vaadin-crud-styles.js';

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

@@ -9,9 +9,9 @@ import '@vaadin/vaadin-form-layout/theme/lumo/vaadin-form-layout.js';
 import '@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js';
 import '@vaadin/select/theme/lumo/vaadin-select.js';
 import '@vaadin/email-field/theme/lumo/vaadin-email-field.js';
-import '@vaadin/vaadin-text-field/theme/lumo/vaadin-number-field.js';
+import '@vaadin/number-field/theme/lumo/vaadin-number-field.js';
 import '@vaadin/text-area/theme/lumo/vaadin-text-area.js';
-import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
+import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
 import '@vaadin/vaadin-time-picker/theme/lumo/vaadin-time-picker.js';
 import '../../../theme/lumo/vaadin-custom-field.js';

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

@@ -9,9 +9,9 @@ import '@vaadin/vaadin-form-layout/theme/material/vaadin-form-layout.js';
 import '@vaadin/vaadin-list-box/theme/material/vaadin-list-box.js';
 import '@vaadin/select/theme/material/vaadin-select.js';
 import '@vaadin/email-field/theme/material/vaadin-email-field.js';
-import '@vaadin/vaadin-text-field/theme/material/vaadin-number-field.js';
+import '@vaadin/number-field/theme/material/vaadin-number-field.js';
 import '@vaadin/text-area/theme/material/vaadin-text-area.js';
-import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';
 import '@vaadin/password-field/theme/material/vaadin-password-field.js';
 import '@vaadin/vaadin-time-picker/theme/material/vaadin-time-picker.js';
 import '../../../theme/material/vaadin-custom-field.js';

packages/message-input/package.json

@@ -26,13 +26,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "^22.0.0-alpha6",
     "@vaadin/button": "^22.0.0-alpha6",
     "@vaadin/component-base": "^22.0.0-alpha6",
     "@vaadin/text-area": "^22.0.0-alpha6",
     "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
     "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha6",
     "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
   },
   "devDependencies": {

packages/message-list/package.json

@@ -29,12 +29,9 @@
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
     "@vaadin/avatar": "^22.0.0-alpha6",
-    "@vaadin/button": "^22.0.0-alpha6",
     "@vaadin/component-base": "^22.0.0-alpha6",
-    "@vaadin/text-area": "^22.0.0-alpha6",
     "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
     "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha6",
     "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
   },
   "devDependencies": {

packages/text-area/src/vaadin-text-area.d.ts

@@ -79,6 +79,16 @@ export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEve
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
 declare class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+  /**
+   * Maximum number of characters (in Unicode code points) that the user can enter.
+   */
+  maxlength: number | null | undefined;
+
+  /**
+   * Minimum number of characters (in Unicode code points) that the user can enter.
+   */
+  minlength: number | null | undefined;
+
   addEventListener<K extends keyof TextAreaEventMap>(
     type: K,
     listener: (this: TextArea, ev: TextAreaEventMap[K]) => void,

packages/text-field/README.md

@@ -1,5 +1,54 @@
 # @vaadin/text-field
 
-> ⚠️ Work in progress, please do not use this component yet.
+A web component that allows the user to input and edit text.
 
-The new version of `vaadin-text-field` component using slotted `<input>`.
+[Live Demo ↗](https://vaadin.com/docs/latest/ds/components/text-field)
+
+```html
+<vaadin-text-field label="Street Address"></vaadin-text-field>
+```
+
+## Installation
+
+Install the component:
+
+```sh
+npm i @vaadin/text-field --save
+```
+
+Once installed, import the component in your application:
+
+```js
+import '@vaadin/text-field';
+```
+
+## Themes
+
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes),
+Lumo and Material. The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/text-field/vaadin-text-field.js)
+of the package uses Lumo theme.
+
+To use the Material theme, import the component from the `theme/material` folder:
+
+```js
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';
+```
+
+You can also import the Lumo version of the component explicitly:
+
+```js
+import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
+```
+
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
+
+```js
+import '@vaadin/text-field/src/vaadin-text-field.js';
+```
+
+## License
+
+Apache License 2.0
+
+Vaadin collects development time usage statistics to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

packages/text-field/src/vaadin-text-field.d.ts

@@ -8,6 +8,111 @@ import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-declare class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement)))) {}
+/**
+ * Fired when the `invalid` property changes.
+ */
+export type TextFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `value` property changes.
+ */
+export type TextFieldValueChangedEvent = CustomEvent<{ value: string }>;
+
+export interface TextFieldCustomEventMap {
+  'invalid-changed': TextFieldInvalidChangedEvent;
+
+  'value-changed': TextFieldValueChangedEvent;
+}
+
+export interface TextFieldEventMap extends HTMLElementEventMap, TextFieldCustomEventMap {}
+
+/**
+ * `<vaadin-text-field>` is a web component that allows the user to input and edit text.
+ *
+ * ```html
+ * <vaadin-text-field label="First Name"></vaadin-text-field>
+ * ```
+ *
+ * ### Prefixes and suffixes
+ *
+ * These are child elements of a `<vaadin-text-field>` that are displayed
+ * inline with the input, before or after.
+ * In order for an element to be considered as a prefix, it must have the slot
+ * attribute set to `prefix` (and similarly for `suffix`).
+ *
+ * ```html
+ * <vaadin-text-field label="Email address">
+ *   <div slot="prefix">Sent to:</div>
+ *   <div slot="suffix">@vaadin.com</div>
+ * </vaadin-text-field>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|-------------
+ * `--vaadin-text-field-default-width` | Set the default width of the input field | `12em`
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `label`         | The label element
+ * `input-field`   | The element that wraps prefix, value and suffix
+ * `error-message` | The error message element
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute           | Description | Part name
+ * --------------------|-------------|------------
+ * `disabled`          | Set to a disabled text field | :host
+ * `has-value`         | Set when the element has a value | :host
+ * `has-label`         | Set when the element has a label | :host
+ * `has-helper`        | Set when the element has helper text or slot | :host
+ * `has-error-message` | Set when the element has an error message | :host
+ * `invalid`           | Set when the element is invalid | :host
+ * `input-prevented`   | Temporarily set when invalid input is prevented | :host
+ * `focused`           | Set when the element is focused | :host
+ * `focus-ring`        | Set when the element is keyboard focused | :host
+ * `readonly`          | Set to a readonly text field | :host
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
+ * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
+ * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
+ * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ */
+declare class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
+  /**
+   * Maximum number of characters (in Unicode code points) that the user can enter.
+   */
+  maxlength: number | null | undefined;
+
+  /**
+   * Minimum number of characters (in Unicode code points) that the user can enter.
+   */
+  minlength: number | null | undefined;
+
+  addEventListener<K extends keyof TextFieldEventMap>(
+    type: K,
+    listener: (this: TextField, ev: TextFieldEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof TextFieldEventMap>(
+    type: K,
+    listener: (this: TextField, ev: TextFieldEventMap[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-text-field': TextField;
+  }
+}
 
 export { TextField };

packages/text-field/src/vaadin-text-field.js

@@ -16,6 +16,71 @@ import '@vaadin/input-container/src/vaadin-input-container.js';
 
 registerStyles('vaadin-text-field', inputFieldShared, { moduleId: 'vaadin-text-field-styles' });
 
+/**
+ * `<vaadin-text-field>` is a web component that allows the user to input and edit text.
+ *
+ * ```html
+ * <vaadin-text-field label="First Name"></vaadin-text-field>
+ * ```
+ *
+ * ### Prefixes and suffixes
+ *
+ * These are child elements of a `<vaadin-text-field>` that are displayed
+ * inline with the input, before or after.
+ * In order for an element to be considered as a prefix, it must have the slot
+ * attribute set to `prefix` (and similarly for `suffix`).
+ *
+ * ```html
+ * <vaadin-text-field label="Email address">
+ *   <div slot="prefix">Sent to:</div>
+ *   <div slot="suffix">@vaadin.com</div>
+ * </vaadin-text-field>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|-------------
+ * `--vaadin-text-field-default-width` | Set the default width of the input field | `12em`
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `label`         | The label element
+ * `input-field`   | The element that wraps prefix, value and suffix
+ * `error-message` | The error message element
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute           | Description | Part name
+ * --------------------|-------------|------------
+ * `disabled`          | Set to a disabled text field | :host
+ * `has-value`         | Set when the element has a value | :host
+ * `has-label`         | Set when the element has a label | :host
+ * `has-helper`        | Set when the element has helper text or slot | :host
+ * `has-error-message` | Set when the element has an error message | :host
+ * `invalid`           | Set when the element is invalid | :host
+ * `input-prevented`   | Temporarily set when invalid input is prevented | :host
+ * `focused`           | Set when the element is focused | :host
+ * `focus-ring`        | Set when the element is keyboard focused | :host
+ * `readonly`          | Set to a readonly text field | :host
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
+ * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
+ * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
+ * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ *
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ * @mixes ThemableMixin
+ * @mixes PatternMixin
+ * @mixes InputFieldMixin
+ */
 export class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-text-field';
@@ -110,3 +175,5 @@ export class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(Elemen
     this.addController(new AriaLabelController(this.inputElement, this._labelNode));
   }
 }
+
+customElements.define(TextField.is, TextField);

packages/text-field/test/text-field.test.js

@@ -1,9 +1,7 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { aTimeout, fixtureSync, nextFrame } from '@vaadin/testing-helpers';
-import { TextField } from '../src/vaadin-text-field.js';
-
-customElements.define('vaadin-text-field', TextField);
+import '../src/vaadin-text-field.js';
 
 describe('text-field', () => {
   let textField, input;

packages/text-field/test/visual/common.js

@@ -0,0 +1,11 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+/* hide caret */
+registerStyles(
+  'vaadin-text-field',
+  css`
+    :host([focus-ring]) ::slotted(input) {
+      caret-color: transparent;
+    }
+  `
+);