@vaadin/button 23.1.0-alpha1 → 23.1.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/button",
-  "version": "23.1.0-alpha1",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -32,16 +32,17 @@
     "web-component"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha1"
+    "@vaadin/component-base": "23.1.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.4"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "5d0cdee069f866037c507265fafb4d0476795333"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

package/src/vaadin-button-mixin.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { ActiveMixinClass } from '@vaadin/component-base/src/active-mixin.js';
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
+
+/**
+ * A mixin providing common button functionality.
+ */
+export declare function ButtonMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): T &
+  Constructor<ActiveMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<TabindexMixinClass>;

package/src/vaadin-button-mixin.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
+
+/**
+ * A mixin providing common button functionality.
+ *
+ * @polymerMixin
+ * @mixes ActiveMixin
+ * @mixes FocusMixin
+ * @mixes TabindexMixin
+ */
+export const ButtonMixin = (superClass) =>
+  class ButtonMixinClass extends ActiveMixin(TabindexMixin(FocusMixin(superClass))) {
+    static get properties() {
+      return {
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         *
+         * @override
+         * @protected
+         */
+        tabindex: {
+          value: 0,
+        },
+      };
+    }
+
+    /**
+     * By default, `Space` is the only possible activation key for a focusable HTML element.
+     * Nonetheless, the button is an exception as it can be also activated by pressing `Enter`.
+     * See the "Keyboard Support" section in https://www.w3.org/TR/wai-aria-practices/examples/button/button.html.
+     *
+     * @protected
+     * @override
+     */
+    get _activeKeys() {
+      return ['Enter', ' '];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      // By default, if the user hasn't provided a custom role,
+      // the role attribute is set to "button".
+      if (!this.hasAttribute('role')) {
+        this.setAttribute('role', 'button');
+      }
+    }
+
+    /**
+     * Since the button component is designed on the base of the `[role=button]` attribute,
+     * and doesn't have a native <button> inside, in order to be fully accessible from the keyboard,
+     * it should manually fire the `click` event once an activation key is pressed,
+     * as it follows from the WAI-ARIA specifications:
+     * https://www.w3.org/TR/wai-aria-practices-1.1/#button
+     *
+     * According to the UI Events specifications,
+     * the `click` event should be fired exactly on `keydown`:
+     * https://www.w3.org/TR/uievents/#event-type-keydown
+     *
+     * @param {KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      super._onKeyDown(event);
+
+      if (this._activeKeys.includes(event.key)) {
+        event.preventDefault();
+
+        // `DisabledMixin` overrides the standard `click()` method
+        // so that it doesn't fire the `click` event when the element is disabled.
+        this.click();
+      }
+    }
+  };

package/src/vaadin-button.d.ts

@@ -3,11 +3,9 @@
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ButtonMixin } from './vaadin-button-mixin.js';
 
 /**
  * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
@@ -37,7 +35,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  */
-declare class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableMixin(HTMLElement))))) {}
+declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-button.js

@@ -4,11 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ButtonMixin } from './vaadin-button-mixin.js';
 
 /**
  * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
@@ -39,13 +37,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @extends HTMLElement
- * @mixes ActiveMixin
- * @mixes TabindexMixin
- * @mixes FocusMixin
+ * @mixes ButtonMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
+class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-button';
   }
@@ -85,10 +81,6 @@ class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableM
           height: 100%;
           min-height: inherit;
           text-shadow: inherit;
-          background: transparent;
-          padding: 0;
-          border: none;
-          box-shadow: none;
         }
 
         [part='prefix'],
@@ -115,56 +107,6 @@ class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableM
       </div>
     `;
   }
-
-  /**
-   * By default, `Space` is the only possible activation key for a focusable HTML element.
-   * Nonetheless, the button is an exception as it can be also activated by pressing `Enter`.
-   * See the "Keyboard Support" section in https://www.w3.org/TR/wai-aria-practices/examples/button/button.html.
-   *
-   * @protected
-   * @override
-   */
-  get _activeKeys() {
-    return ['Enter', ' '];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // By default, if the user hasn't provided a custom role,
-    // the role attribute is set to "button".
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'button');
-    }
-  }
-
-  /**
-   * Since the button component is designed on the base of the `[role=button]` attribute,
-   * and doesn't have a native <button> inside, in order to be fully accessible from the keyboard,
-   * it should manually fire the `click` event once an activation key is pressed,
-   * as it follows from the WAI-ARIA specifications:
-   * https://www.w3.org/TR/wai-aria-practices-1.1/#button
-   *
-   * According to the UI Events specifications,
-   * the `click` event should be fired exactly on `keydown`:
-   * https://www.w3.org/TR/uievents/#event-type-keydown
-   *
-   * @param {KeyboardEvent} event
-   * @protected
-   * @override
-   */
-  _onKeyDown(event) {
-    super._onKeyDown(event);
-
-    if (this._activeKeys.includes(event.key)) {
-      event.preventDefault();
-
-      // `DisabledMixin` overrides the standard `click()` method
-      // so that it doesn't fire the `click` event when the element is disabled.
-      this.click();
-    }
-  }
 }
 
 customElements.define(Button.is, Button);