@vaadin/password-field 23.0.0-alpha1 → 23.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/password-field",
-  "version": "23.0.0-alpha1",
+  "version": "23.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -32,14 +32,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/text-field": "23.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha1"
+    "@vaadin/button": "23.0.0-alpha2",
+    "@vaadin/text-field": "23.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
+  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
 }

package/src/vaadin-password-field-button.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html } from '@polymer/polymer/polymer-element.js';
+import { Button } from '@vaadin/button/src/vaadin-button.js';
+
+/**
+ * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
+ *
+ * @extends Button
+ * @private
+ */
+class PasswordFieldButton extends Button {
+  static get is() {
+    return 'vaadin-password-field-button';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+    `;
+  }
+}
+
+customElements.define(PasswordFieldButton.is, PasswordFieldButton);

package/src/vaadin-password-field.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-password-field-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
@@ -125,8 +126,7 @@ export class PasswordField extends SlotStylesMixin(TextField) {
     return {
       ...super.slots,
       reveal: () => {
-        const btn = document.createElement('button');
-        btn.setAttribute('type', 'button');
+        const btn = document.createElement('vaadin-password-field-button');
         btn.disabled = this.disabled;
         return btn;
       }

package/theme/lumo/vaadin-password-field-button-styles.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const passwordFieldButton = css`
+  :host {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    min-width: auto;
+    background: transparent;
+    outline: none;
+  }
+`;
+
+registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
+  moduleId: 'lumo-password-field-button'
+});

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

@@ -27,23 +27,6 @@ const passwordField = css`
   [part='reveal-button'][hidden] {
     display: none !important;
   }
-
-  ::slotted([slot='reveal']) {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    background: transparent;
-    border: none;
-  }
-
-  ::slotted([slot='reveal']:focus) {
-    border-radius: var(--lumo-border-radius-s);
-    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-    outline: none;
-  }
 `;
 
 registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { moduleId: 'lumo-password-field' });

package/theme/lumo/vaadin-password-field.js

@@ -4,5 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
+import './vaadin-password-field-button-styles.js';
 import './vaadin-password-field-styles.js';
 import '../../src/vaadin-password-field.js';

package/theme/material/vaadin-password-field-button-styles.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { button } from '@vaadin/button/theme/material/vaadin-button-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const passwordFieldButton = css`
+  :host {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    min-width: auto;
+    background: transparent;
+    outline: none;
+    border-radius: 50%;
+    overflow: visible;
+  }
+
+  :host::before {
+    transform: scale(1.5);
+  }
+
+  /* Disable ripple */
+  :host::after {
+    display: none;
+  }
+`;
+
+registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
+  moduleId: 'material-password-field-button'
+});

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

@@ -35,53 +35,9 @@ const passwordField = css`
     display: none !important;
   }
 
-  ::slotted([slot='reveal']) {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    background: transparent;
-    border: none;
-    outline: none;
-  }
-
-  ::slotted([slot='reveal'])::before {
-    position: absolute;
-    content: '';
-    top: 0;
-    left: 0;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background-color: var(--material-body-text-color);
-    transform: scale(0);
-    opacity: 0;
-    transition: transform 0.08s, opacity 0.01s;
-    will-change: transform, opacity;
-  }
-
   :host([focused]) ::slotted([slot='reveal'])::before {
     background-color: var(--material-primary-text-color);
   }
-
-  ::slotted([slot='reveal']:hover)::before {
-    opacity: 0.08;
-  }
-
-  ::slotted([slot='reveal']:focus)::before {
-    opacity: 0.12;
-  }
-
-  ::slotted([slot='reveal']:active)::before {
-    opacity: 0.16;
-  }
-
-  ::slotted([slot='reveal']:hover)::before,
-  ::slotted([slot='reveal']:focus)::before {
-    transform: scale(1.5);
-  }
 `;
 
 registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { moduleId: 'material-password-field' });

package/theme/material/vaadin-password-field.js

@@ -4,5 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/text-field/theme/material/vaadin-text-field.js';
+import './vaadin-password-field-button-styles.js';
 import './vaadin-password-field-styles.js';
 import '../../src/vaadin-password-field.js';