@vaadin/button 22.0.0-alpha5 → 22.0.0-alpha9

package/package.json

@@ -1,44 +1,46 @@
 {
   "name": "@vaadin/button",
-  "version": "22.0.0-alpha5",
+  "version": "22.0.0-alpha9",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-button",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/button"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-button/issues"
+  },
   "main": "vaadin-button.js",
   "module": "vaadin-button.js",
-  "repository": "vaadin/web-components",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "button",
     "web-components",
     "web-component"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-button/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/field-base": "^22.0.0-alpha5",
-    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha5",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha5"
+    "@vaadin/component-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"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.2.1",
+    "@vaadin/testing-helpers": "^0.3.0",
     "sinon": "^9.2.4"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
+  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
 }

package/src/vaadin-button.d.ts

@@ -3,10 +3,11 @@
  * Copyright (c) 2021 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 { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { ActiveMixin } from '@vaadin/field-base/src/active-mixin.js';
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
 
 /**
  * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
@@ -36,7 +37,7 @@ import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-con
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  */
-declare class Button extends ControlStateMixin(ActiveMixin(ElementMixin(ThemableMixin(HTMLElement)))) {}
+declare class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableMixin(HTMLElement))))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-button.js

@@ -4,11 +4,11 @@
  * 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 { 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 { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-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.
@@ -157,6 +157,8 @@ class Button extends ActiveMixin(TabindexMixin(FocusMixin(ElementMixin(ThemableM
     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/theme/lumo/vaadin-button-styles.js

@@ -48,13 +48,6 @@ const button = css`
     --lumo-button-size: var(--lumo-size-l);
   }
 
-  /* This needs to be the last selector for it to take priority */
-  :host([disabled][disabled]) {
-    pointer-events: none;
-    color: var(--lumo-disabled-text-color);
-    background-color: var(--lumo-contrast-5pct);
-  }
-
   /* For interaction states */
   :host::before,
   :host::after {
@@ -75,14 +68,9 @@ const button = css`
 
   /* Hover */
 
-  :host(:hover)::before {
-    opacity: 0.05;
-  }
-
-  /* Disable hover for touch devices */
-  @media (pointer: coarse) {
-    :host(:not([active]):hover)::before {
-      opacity: 0;
+  @media (any-hover: hover) {
+    :host(:hover)::before {
+      opacity: 0.02;
     }
   }
 
@@ -94,7 +82,7 @@ const button = css`
   }
 
   :host([active])::before {
-    opacity: 0.1;
+    opacity: 0.05;
     transition-duration: 0s;
   }
 
@@ -110,34 +98,24 @@ const button = css`
     box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
   }
 
+  :host([theme~='primary'][focus-ring]) {
+    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
+  }
+
   /* Types (primary, tertiary, tertiary-inline */
 
   :host([theme~='tertiary']),
   :host([theme~='tertiary-inline']) {
     background-color: transparent !important;
-    transition: opacity 0.2s;
     min-width: 0;
   }
 
-  :host([theme~='tertiary'])::before,
-  :host([theme~='tertiary-inline'])::before {
-    display: none;
-  }
-
   :host([theme~='tertiary']) {
     padding: 0 calc(var(--lumo-button-size) / 6);
   }
 
-  @media (hover: hover) {
-    :host([theme*='tertiary']:not([active]):hover) {
-      opacity: 0.8;
-    }
-  }
-
-  :host([theme~='tertiary'][active]),
-  :host([theme~='tertiary-inline'][active]) {
-    opacity: 0.5;
-    transition-duration: 0s;
+  :host([theme~='tertiary-inline'])::before {
+    display: none;
   }
 
   :host([theme~='tertiary-inline']) {
@@ -161,27 +139,18 @@ const button = css`
     min-width: calc(var(--lumo-button-size) * 2.5);
   }
 
-  :host([theme~='primary'][disabled]) {
-    background-color: var(--lumo-primary-color-50pct);
-    color: var(--lumo-primary-contrast-color);
+  :host([theme~='primary'])::before {
+    background-color: black;
   }
 
-  :host([theme~='primary']:hover)::before {
-    opacity: 0.1;
+  @media (any-hover: hover) {
+    :host([theme~='primary']:hover)::before {
+      opacity: 0.05;
+    }
   }
 
   :host([theme~='primary'][active])::before {
-    background-color: var(--lumo-shade-20pct);
-  }
-
-  @media (pointer: coarse) {
-    :host([theme~='primary'][active])::before {
-      background-color: var(--lumo-shade-60pct);
-    }
-
-    :host([theme~='primary']:not([active]):hover)::before {
-      opacity: 0;
-    }
+    opacity: 0.1;
   }
 
   :host([theme~='primary'][active])::after {
@@ -199,10 +168,6 @@ const button = css`
     color: var(--lumo-success-contrast-color);
   }
 
-  :host([theme~='success'][theme~='primary'][disabled]) {
-    background-color: var(--lumo-success-color-50pct);
-  }
-
   :host([theme~='error']) {
     color: var(--lumo-error-text-color);
   }
@@ -212,10 +177,6 @@ const button = css`
     color: var(--lumo-error-contrast-color);
   }
 
-  :host([theme~='error'][theme~='primary'][disabled]) {
-    background-color: var(--lumo-error-color-50pct);
-  }
-
   :host([theme~='contrast']) {
     color: var(--lumo-contrast);
   }
@@ -225,8 +186,20 @@ const button = css`
     color: var(--lumo-base-color);
   }
 
-  :host([theme~='contrast'][theme~='primary'][disabled]) {
-    background-color: var(--lumo-contrast-50pct);
+  /* Disabled state. Keep selectors after other color variants. */
+
+  :host([disabled]) {
+    pointer-events: none;
+    color: var(--lumo-disabled-text-color);
+  }
+
+  :host([theme~='primary'][disabled]) {
+    background-color: var(--lumo-contrast-30pct);
+    color: var(--lumo-base-color);
+  }
+
+  :host([theme~='primary'][disabled]) [part] {
+    opacity: 0.7;
   }
 
   /* Icons */