refactor!: move text area to new package (#2353)

packages/custom-field/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
     "@vaadin/field-base": "^22.0.0-alpha1",
+    "@vaadin/text-area": "^22.0.0-alpha1",
     "@vaadin/vaadin-element-mixin": "^22.0.0-alpha1",
     "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha1",
     "@vaadin/vaadin-material-styles": "^22.0.0-alpha1",

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

@@ -10,7 +10,7 @@ import '@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js';
 import '@vaadin/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/vaadin-text-field/theme/lumo/vaadin-text-area.js';
+import '@vaadin/text-area/theme/lumo/vaadin-text-area.js';
 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-password-field.js';
 import '@vaadin/vaadin-time-picker/theme/lumo/vaadin-time-picker.js';

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

@@ -10,7 +10,7 @@ import '@vaadin/vaadin-list-box/theme/material/vaadin-list-box.js';
 import '@vaadin/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/vaadin-text-field/theme/material/vaadin-text-area.js';
+import '@vaadin/text-area/theme/material/vaadin-text-area.js';
 import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
 import '@vaadin/vaadin-text-field/theme/material/vaadin-password-field.js';
 import '@vaadin/vaadin-time-picker/theme/material/vaadin-time-picker.js';

packages/field-base/src/input-field-mixin.js

@@ -98,7 +98,7 @@ const InputFieldMixinImplementation = (superclass) =>
 
       if (this.inputElement) {
         // Discard value set on the custom slotted input.
-        if (this.inputElement.value !== this.value) {
+        if (this.inputElement.value && this.inputElement.value !== this.value) {
           console.warn(`Please define value on the <${this.localName}> component!`);
           this.inputElement.value = '';
         }

packages/text-area/README.md

@@ -1,5 +1,54 @@
 # @vaadin/text-area
 
-> ⚠️ Work in progress, please do not use this component yet.
+An input field component for multi-line text input.
 
-The new version of `vaadin-text-area` component using slotted `<input>`.
+[Live Demo ↗](https://vaadin.com/docs/latest/ds/components/text-area)
+
+```html
+<vaadin-text-area label="Comment"></vaadin-text-area>
+```
+
+## Installation
+
+Install the component:
+
+```sh
+npm i @vaadin/text-area --save
+```
+
+Once installed, import the component in your application:
+
+```js
+import '@vaadin/text-area';
+```
+
+## 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-area/vaadin-text-area.js)
+of the package uses Lumo theme.
+
+To use the Material theme, import the component from the `theme/material` folder:
+
+```js
+import '@vaadin/text-area/theme/material/vaadin-text-area.js';
+```
+
+You can also import the Lumo version of the component explicitly:
+
+```js
+import '@vaadin/text-area/theme/lumo/vaadin-text-area.js';
+```
+
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
+
+```js
+import '@vaadin/text-area/src/vaadin-text-area.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-area/src/vaadin-text-area.d.ts

@@ -9,8 +9,97 @@ import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { TextAreaSlotMixin } from '@vaadin/field-base/src/text-area-slot-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+/**
+ * Fired when the `invalid` property changes.
+ */
+export type TextAreaInvalidChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `value` property changes.
+ */
+export type TextAreaValueChangedEvent = CustomEvent<{ value: string }>;
+
+export interface TextAreaCustomEventMap {
+  'invalid-changed': TextAreaInvalidChangedEvent;
+
+  'value-changed': TextAreaValueChangedEvent;
+}
+
+export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEventMap {}
+
+/**
+ * `<vaadin-text-area>` is a web component for multi-line text input.
+ *
+ * ```html
+ * <vaadin-text-area label="Comment"></vaadin-text-area>
+ * ```
+ *
+ * ### Prefixes and suffixes
+ *
+ * These are child elements of a `<vaadin-text-area>` 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-area label="Description">
+ *   <div slot="prefix">Details:</div>
+ *   <div slot="suffix">The end!</div>
+ * </vaadin-text-area>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `label`         | The label element wrapper
+ * `input-field`   | The element that wraps prefix, textarea and suffix
+ * `error-message` | The error message element wrapper
+ * `helper-text`   | The helper text element wrapper
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute           | Description                               | Part name
+ * --------------------|-------------------------------------------|----------
+ * `disabled`          | Set when the element is disabled          | :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      | :host
+ * `has-error-message` | Set when the element has an error message | :host
+ * `invalid`           | Set when the element is invalid           | :host
+ * `focused`           | Set when the element is focused           | :host
+ * `focus-ring`        | Set when the element is keyboard focused  | :host
+ * `readonly`          | Set when the element is readonly          | :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 TextArea extends CharLengthMixin(
   InputFieldMixin(TextAreaSlotMixin(ThemableMixin(ElementMixin(HTMLElement))))
-) {}
+) {
+  addEventListener<K extends keyof TextAreaEventMap>(
+    type: K,
+    listener: (this: TextArea, ev: TextAreaEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof TextAreaEventMap>(
+    type: K,
+    listener: (this: TextArea, ev: TextAreaEventMap[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-text-area': TextArea;
+  }
+}
 
 export { TextArea };

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

@@ -12,6 +12,66 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import '@vaadin/text-field/src/vaadin-input-field-shared-styles.js';
 
+/**
+ * `<vaadin-text-area>` is a web component for multi-line text input.
+ *
+ * ```html
+ * <vaadin-text-area label="Comment"></vaadin-text-area>
+ * ```
+ *
+ * ### Prefixes and suffixes
+ *
+ * These are child elements of a `<vaadin-text-area>` 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-area label="Description">
+ *   <div slot="prefix">Details:</div>
+ *   <div slot="suffix">The end!</div>
+ * </vaadin-text-area>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `label`         | The label element wrapper
+ * `input-field`   | The element that wraps prefix, textarea and suffix
+ * `error-message` | The error message element wrapper
+ * `helper-text`   | The helper text element wrapper
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute           | Description                               | Part name
+ * --------------------|-------------------------------------------|----------
+ * `disabled`          | Set when the element is disabled          | :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      | :host
+ * `has-error-message` | Set when the element has an error message | :host
+ * `invalid`           | Set when the element is invalid           | :host
+ * `focused`           | Set when the element is focused           | :host
+ * `focus-ring`        | Set when the element is keyboard focused  | :host
+ * `readonly`          | Set when the element is readonly          | :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 CharLengthMixin
+ * @mixes InputFieldMixin
+ * @mixes TextAreaSlotMixin
+ * @mixes ElementMixin
+ * @mixes ThemableMixin
+ */
 export class TextArea extends CharLengthMixin(
   InputFieldMixin(TextAreaSlotMixin(ThemableMixin(ElementMixin(PolymerElement))))
 ) {
@@ -50,6 +110,7 @@ export class TextArea extends CharLengthMixin(
           display: grid;
           flex: 1 1 auto;
           align-self: stretch;
+          padding: 0;
         }
 
         .textarea-wrapper::after {
@@ -167,6 +228,7 @@ export class TextArea extends CharLengthMixin(
    * @param {unknown} newVal
    * @param {unknown} oldVal
    * @protected
+   * @override
    */
   _valueChanged(newVal, oldVal) {
     super._valueChanged(newVal, oldVal);
@@ -185,3 +247,5 @@ export class TextArea extends CharLengthMixin(
     }
   }
 }
+
+customElements.define(TextArea.is, TextArea);

packages/text-area/test/text-area.test.js

@@ -1,9 +1,7 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { fixtureSync, oneEvent } from '@vaadin/testing-helpers';
-import { TextArea } from '../src/vaadin-text-area.js';
-
-customElements.define('vaadin-text-area', TextArea);
+import '../src/vaadin-text-area.js';
 
 describe('text-area', () => {
   let textArea;

packages/text-area/test/typings/text-area.types.ts

@@ -0,0 +1,16 @@
+import '../../vaadin-text-area.js';
+import { TextAreaInvalidChangedEvent, TextAreaValueChangedEvent } from '../../vaadin-text-area.js';
+
+const assertType = <TExpected>(actual: TExpected) => actual;
+
+const area = document.createElement('vaadin-text-area');
+
+area.addEventListener('invalid-changed', (event) => {
+  assertType<TextAreaInvalidChangedEvent>(event);
+  assertType<boolean>(event.detail.value);
+});
+
+area.addEventListener('value-changed', (event) => {
+  assertType<TextAreaValueChangedEvent>(event);
+  assertType<string>(event.detail.value);
+});

packages/text-area/test/visual/lumo/text-area.test.js

@@ -1,9 +1,6 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/lumo/vaadin-text-area.js';
-import { TextArea } from '../../../src/vaadin-text-area.js';
-
-customElements.define('vaadin-text-area', TextArea);
 
 describe('text-area', () => {
   let div, element;

packages/text-area/test/visual/material/text-area.test.js

@@ -1,9 +1,6 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/material/vaadin-text-area.js';
-import { TextArea } from '../../../src/vaadin-text-area.js';
-
-customElements.define('vaadin-text-area', TextArea);
 
 describe('text-area', () => {
   let div, element;

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

@@ -1 +1 @@
-export { TextArea } from './src/vaadin-text-area.js';
+export * from './src/vaadin-text-area.js';

packages/text-area/vaadin-text-area.js

@@ -1,3 +1,3 @@
 import './theme/lumo/vaadin-text-area.js';
 
-export { TextArea } from './src/vaadin-text-area.js';
+export * from './src/vaadin-text-area.js';

packages/vaadin-dialog/package.json

@@ -35,9 +35,9 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
+    "@vaadin/text-area": "^22.0.0-alpha1",
     "@vaadin/testing-helpers": "^0.2.1",
     "@vaadin/vaadin-template-renderer": "^22.0.0-alpha1",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha1",
     "sinon": "^9.2.1"
   },
   "publishConfig": {

packages/vaadin-dialog/test/draggable-resizable.test.js

@@ -4,6 +4,7 @@ import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-template-renderer';
+import '@vaadin/text-area/vaadin-text-area.js';
 import '../src/vaadin-dialog.js';
 
 registerStyles(

packages/vaadin-messages/package.json

@@ -30,6 +30,7 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
+    "@vaadin/text-area": "^22.0.0-alpha1",
     "@vaadin/vaadin-avatar": "^22.0.0-alpha1",
     "@vaadin/vaadin-button": "^22.0.0-alpha1",
     "@vaadin/vaadin-element-mixin": "^22.0.0-alpha1",

packages/vaadin-messages/src/vaadin-message-input-text-area.d.ts

@@ -1,16 +1,16 @@
-import { TextAreaElement } from '@vaadin/vaadin-text-field/src/vaadin-text-area.js';
+import { TextArea } from '@vaadin/text-area/src/vaadin-text-area.js';
 
 /**
  * An element used internally by `<vaadin-message-input>`. Not intended to be used separately.
  *
  * @protected
  */
-declare class MessageInputTextAreaElement extends TextAreaElement {
+declare class MessageInputTextArea extends TextArea {
   ariaLabel: string;
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'vaadin-message-input-text-area': MessageInputTextAreaElement;
+    'vaadin-message-input-text-area': MessageInputTextArea;
   }
 }