refactor!: move button to new package (#2373)

packages/button/README.md

@@ -1,5 +1,54 @@
 # @vaadin/button
 
-> ⚠️ Work in progress, please do not use this component yet.
+An accessible and customizable button that allows users to perform actions.
 
-The new version of `vaadin-button` component.
+[Live Demo ↗](https://vaadin.com/docs/latest/ds/components/button)
+
+```html
+<vaadin-button>Press me</vaadin-button>
+```
+
+## Installation
+
+Install the component:
+
+```sh
+npm i @vaadin/button --save
+```
+
+Once installed, import the component in your application:
+
+```js
+import '@vaadin/button';
+```
+
+## 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/button/vaadin-button.js)
+of the package uses the Lumo theme.
+
+To use the Material theme, import the component from the `theme/material` folder:
+
+```js
+import '@vaadin/button/theme/material/vaadin-button.js';
+```
+
+You can also import the Lumo version of the component explicitly:
+
+```js
+import '@vaadin/button/theme/lumo/vaadin-button.js';
+```
+
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
+
+```js
+import '@vaadin/button/src/vaadin-button.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/button/src/vaadin-button.d.ts

@@ -8,11 +8,40 @@ import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.
 import { ActiveMixin } from '@vaadin/field-base/src/active-mixin.js';
 import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
 
-declare class Button extends ControlStateMixin(ActiveMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
-  /**
-   * A getter that returns the native button as a focusable element for ControlStateMixin.
-   */
-  readonly focusElement: HTMLButtonElement | null;
+/**
+ * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
+ *
+ * ```html
+ * <vaadin-button>Press me</vaadin-button>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ----------|-------------
+ * `label`   | The label (text) inside the button.
+ * `prefix`  | A slot for content before the label (e.g. an icon).
+ * `suffix`  | A slot for content after the label (e.g. an icon).
+ *
+ * The following attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `active`     | Set when the button is pressed down, either with mouse, touch or the keyboard.
+ * `disabled`   | Set when the button is disabled.
+ * `focus-ring` | Set when the button is focused using the keyboard.
+ * `focused`    | Set when the button is focused.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ */
+declare class Button extends ControlStateMixin(ActiveMixin(ElementMixin(ThemableMixin(HTMLElement)))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-button': Button;
+  }
 }
 
 export { Button };

packages/button/src/vaadin-button.js

@@ -10,6 +10,41 @@ import { TabindexMixin } from '@vaadin/field-base/src/tabindex-mixin.js';
 import { ActiveMixin } from '@vaadin/field-base/src/active-mixin.js';
 import { FocusMixin } from '@vaadin/field-base/src/focus-mixin.js';
 
+/**
+ * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
+ *
+ * ```html
+ * <vaadin-button>Press me</vaadin-button>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ----------|-------------
+ * `label`   | The label (text) inside the button.
+ * `prefix`  | A slot for content before the label (e.g. an icon).
+ * `suffix`  | A slot for content after the label (e.g. an icon).
+ *
+ * The following attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `active`     | Set when the button is pressed down, either with mouse, touch or the keyboard.
+ * `disabled`   | Set when the button is disabled.
+ * `focus-ring` | Set when the button is focused using the keyboard.
+ * `focused`    | Set when the button is focused.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
+ * @extends HTMLElement
+ * @mixes ActiveMixin
+ * @mixes TabindexMixin
+ * @mixes FocusMixin
+ * @mixes ElementMixin
+ * @mixes ThemableMixin
+ */
 class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
   static get is() {
     return 'vaadin-button';
@@ -32,7 +67,8 @@ class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableM
           display: none !important;
         }
 
-        /* Ensure the button is always aligned on the baseline */
+        /* Aligns the button with form fields when placed on the same line.
+          Note, to make it work, the form fields should have the same "::before" pseudo-element. */
         .vaadin-button-container::before {
           content: '\\2003';
           display: inline-block;
@@ -91,4 +127,6 @@ class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableM
   }
 }
 
+customElements.define(Button.is, Button);
+
 export { Button };

packages/button/test/button.test.js

@@ -14,9 +14,7 @@ import {
   touchstart
 } from '@vaadin/testing-helpers';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { Button } from '../vaadin-button.js';
-
-customElements.define(Button.is, Button);
+import '../vaadin-button.js';
 
 describe('vaadin-button', () => {
   let element;

packages/button/test/visual/lumo/button.test.js

@@ -3,13 +3,7 @@ import { visualDiff } from '@web/test-runner-visual-regression';
 import { sendKeys } from '@web/test-runner-commands';
 import '@vaadin/vaadin-icon/theme/lumo/vaadin-icon.js';
 import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
-// TODO: Remove in https://github.com/vaadin/web-components/issues/2224.
-import './vaadin-button-styles.js';
-// TODO: Remove in https://github.com/vaadin/web-components/issues/2224.
-import { Button } from '../../../src/vaadin-button.js';
-
-// TODO: Remove in https://github.com/vaadin/web-components/issues/2224.
-customElements.define(Button.is, Button);
+import '../../../theme/lumo/vaadin-button.js';
 
 describe('button', () => {
   let div, element;

packages/button/test/visual/material/button.test.js

@@ -3,13 +3,7 @@ import { visualDiff } from '@web/test-runner-visual-regression';
 import { sendKeys } from '@web/test-runner-commands';
 import '@vaadin/vaadin-icon/theme/material/vaadin-icon.js';
 import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
-// TODO: Remove in https://github.com/vaadin/web-components/issues/2224.
-import './vaadin-button-styles.js';
-// TODO: Remove in https://github.com/vaadin/web-components/issues/2224.
-import { Button } from '../../../src/vaadin-button.js';
-
-// TODO: Remove in https://github.com/vaadin/web-components/issues/2224.
-customElements.define(Button.is, Button);
+import '../../../theme/material/vaadin-button.js';
 
 describe('button', () => {
   let div, element;

packages/button/theme/lumo/vaadin-button-styles.js

@@ -6,7 +6,7 @@ import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 
 registerStyles(
-  '',
+  'vaadin-button',
   css`
     :host {
       /* Sizing */
@@ -289,5 +289,5 @@ registerStyles(
       margin-right: 0;
     }
   `,
-  { moduleId: 'lumo-button-styles' }
+  { moduleId: 'lumo-button' }
 );

packages/button/theme/material/vaadin-button-styles.js

@@ -4,7 +4,7 @@ import '@vaadin/vaadin-material-styles/shadow.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 
 registerStyles(
-  '',
+  'vaadin-button',
   css`
     :host {
       padding: 8px;
@@ -176,5 +176,5 @@ registerStyles(
       margin-right: 8px;
     }
   `,
-  { moduleId: 'material-button-styles' }
+  { moduleId: 'material-button' }
 );

packages/vaadin-app-layout/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-button": "^22.0.0-alpha3",
+    "@vaadin/button": "^22.0.0-alpha3",
     "@vaadin/vaadin-element-mixin": "^22.0.0-alpha3",
     "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha3",
     "@vaadin/vaadin-material-styles": "^22.0.0-alpha3",

packages/vaadin-app-layout/src/vaadin-drawer-toggle.d.ts

@@ -1,4 +1,4 @@
-import { ButtonElement } from '@vaadin/vaadin-button/src/vaadin-button.js';
+import { Button } from '@vaadin/button/src/vaadin-button.js';
 
 /**
  * The Drawer Toggle component controls the drawer in App Layout component.
@@ -9,7 +9,7 @@ import { ButtonElement } from '@vaadin/vaadin-button/src/vaadin-button.js';
  * </vaadin-app-layout>
  * ```
  */
-declare class DrawerToggleElement extends ButtonElement {
+declare class DrawerToggleElement extends Button {
   ariaLabel: string | null | undefined;
 }
 

packages/vaadin-app-layout/src/vaadin-drawer-toggle.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { ButtonElement } from '@vaadin/vaadin-button/src/vaadin-button.js';
+import { Button } from '@vaadin/button/src/vaadin-button.js';
 
 /**
  * The Drawer Toggle component controls the drawer in App Layout component.
@@ -15,7 +15,7 @@ import { ButtonElement } from '@vaadin/vaadin-button/src/vaadin-button.js';
  * </vaadin-app-layout>
  * ```
  */
-class DrawerToggleElement extends ButtonElement {
+class DrawerToggleElement extends Button {
   static get template() {
     return html`
       <style>

packages/vaadin-app-layout/theme/lumo/vaadin-drawer-toggle-styles.js

@@ -1,5 +1,5 @@
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-button/theme/lumo/vaadin-button-styles.js';
+import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 
 registerStyles(

packages/vaadin-app-layout/theme/material/vaadin-drawer-toggle-styles.js

@@ -1,5 +1,5 @@
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-button/theme/material/vaadin-button-styles.js';
+import '@vaadin/button/theme/material/vaadin-button-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 
 registerStyles(

packages/vaadin-button/package.json

@@ -25,18 +25,7 @@
     "theme"
   ],
   "dependencies": {
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha3",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha3",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha3"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-icon": "^22.0.0-alpha3",
-    "sinon": "^9.2.4"
+    "@vaadin/button": "^22.0.0-alpha1"
   },
   "publishConfig": {
     "access": "public"

packages/vaadin-button/src/vaadin-button.d.ts

@@ -1,53 +1,6 @@
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
 /**
- * `<vaadin-button>` is a Web Component providing an accessible and customizable button.
- *
- * ```html
- * <vaadin-button>
- * </vaadin-button>
- * ```
- *
- * ```js
- * document.querySelector('vaadin-button').addEventListener('click', () => alert('Hello World!'));
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are exposed for styling:
- *
- * Part name | Description
- * ----------------|----------------
- * `label` | The label (text) inside the button
- * `prefix` | A slot for e.g. an icon before the label
- * `suffix` | A slot for e.g. an icon after the label
- *
- *
- * The following attributes are exposed for styling:
- *
- * Attribute | Description
- * --------- | -----------
- * `active` | Set when the button is pressed down, either with mouse, touch or the keyboard.
- * `disabled` | Set when the button is disabled.
- * `focus-ring` | Set when the button is focused using the keyboard.
- * `focused` | Set when the button is focused.
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class ButtonElement extends ElementMixin(ControlStateMixin(ThemableMixin(GestureEventListeners(HTMLElement)))) {
-  readonly focusElement: Element | null;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-button': ButtonElement;
-  }
-}
-
-export { ButtonElement };
+export * from '@vaadin/button/src/vaadin-button.js';