@vaadin/custom-field 22.0.0-alpha9 → 22.0.0

package/README.md

@@ -1,5 +1,66 @@
 # @vaadin/custom-field
 
-> ⚠️ Work in progress, please do not use this component yet.
+A web component for wrapping multiple components as a single field.
 
-The new version of `vaadin-custom-field` component.
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/custom-field)
+
+[![npm version](https://badgen.net/npm/v/@vaadin/custom-field)](https://www.npmjs.com/package/@vaadin/custom-field)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
+
+```html
+<vaadin-custom-field label="Enrollment period" helper-text="Cannot be longer than 30 days" required>
+  <vaadin-date-picker id="start" placeholder="Start date"></vaadin-date-picker>
+  &ndash;
+  <vaadin-date-picker id="end" placeholder="End date"></vaadin-date-picker>
+</vaadin-custom-field>
+```
+
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/custom-field/screenshot.png" width="401" alt="Screenshot of vaadin-custom-field">](https://vaadin.com/docs/latest/ds/components/custom-field)
+
+## Installation
+
+Install the component:
+
+```sh
+npm i @vaadin/custom-field
+```
+
+Once installed, import the component in your application:
+
+```js
+import '@vaadin/custom-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/custom-field/vaadin-custom-field.js) of the package uses the Lumo theme.
+
+To use the Material theme, import the component from the `theme/material` folder:
+
+```js
+import '@vaadin/custom-field/theme/material/vaadin-custom-field.js';
+```
+
+You can also import the Lumo version of the component explicitly:
+
+```js
+import '@vaadin/custom-field/theme/lumo/vaadin-custom-field.js';
+```
+
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
+
+```js
+import '@vaadin/custom-field/src/vaadin-custom-field.js';
+```
+
+## Contributing
+
+Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+
+## License
+
+Apache License 2.0
+
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/custom-field",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -32,28 +32,28 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-alpha9",
-    "@vaadin/field-base": "22.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
+    "@vaadin/component-base": "^22.0.0",
+    "@vaadin/field-base": "^22.0.0",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0",
+    "@vaadin/vaadin-material-styles": "^22.0.0",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/combo-box": "22.0.0-alpha9",
-    "@vaadin/date-picker": "22.0.0-alpha9",
-    "@vaadin/email-field": "22.0.0-alpha9",
-    "@vaadin/form-layout": "22.0.0-alpha9",
-    "@vaadin/list-box": "22.0.0-alpha9",
-    "@vaadin/number-field": "22.0.0-alpha9",
-    "@vaadin/password-field": "22.0.0-alpha9",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-alpha9",
-    "@vaadin/select": "22.0.0-alpha9",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/text-area": "22.0.0-alpha9",
-    "@vaadin/text-field": "22.0.0-alpha9",
-    "@vaadin/time-picker": "22.0.0-alpha9",
+    "@vaadin/combo-box": "^22.0.0",
+    "@vaadin/date-picker": "^22.0.0",
+    "@vaadin/email-field": "^22.0.0",
+    "@vaadin/form-layout": "^22.0.0",
+    "@vaadin/list-box": "^22.0.0",
+    "@vaadin/number-field": "^22.0.0",
+    "@vaadin/password-field": "^22.0.0",
+    "@vaadin/polymer-legacy-adapter": "^22.0.0",
+    "@vaadin/select": "^22.0.0",
+    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/text-area": "^22.0.0",
+    "@vaadin/text-field": "^22.0.0",
+    "@vaadin/time-picker": "^22.0.0",
     "sinon": "^9.2.1"
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
 }

package/src/vaadin-custom-field.d.ts

@@ -48,9 +48,6 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
  *
  * ### Styling
  *
- * You may set the attribute `disabled` or `readonly` on this component to make the label styles
- * behave the same way as they would on a `<vaadin-text-field>` which is disabled or readonly.
- *
  * The following shadow DOM parts are available for styling:
  *
  * Part name            | Description

package/src/vaadin-custom-field.js

@@ -3,8 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { isChrome } from '@vaadin/component-base/src/browser-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
@@ -22,9 +23,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * ### Styling
  *
- * You may set the attribute `disabled` or `readonly` on this component to make the label styles
- * behave the same way as they would on a `<vaadin-text-field>` which is disabled or readonly.
- *
  * The following shadow DOM parts are available for styling:
  *
  * Part name            | Description
@@ -191,14 +189,6 @@ class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(Polym
     };
   }
 
-  /**
-   * Attribute used by `FieldAriaMixin` to set accessible name.
-   * @protected
-   */
-  get _ariaAttr() {
-    return 'aria-labelledby';
-  }
-
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
@@ -282,7 +272,6 @@ class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(Polym
 
   /** @private */
   __fixChromeFocus() {
-    const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
     this.addEventListener('keydown', (e) => {
       if (e.keyCode === 9) {
         // FIXME(yuriy): remove this workaround once this issue is fixed:

package/theme/lumo/vaadin-custom-field-styles.js

@@ -3,13 +3,13 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
 import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const customField = css`
   :host {

package/theme/material/vaadin-custom-field-styles.js

@@ -3,11 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import { helper } from '@vaadin/vaadin-material-styles/mixins/helper.js';
 import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const customField = css`
   :host {