refactor!: make vaadin-crud-edit extend vaadin-button (#3146)

packages/crud/src/vaadin-crud-edit.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { Button } from '@vaadin/button/src/vaadin-button.js';
 
 /**
  * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
@@ -13,7 +13,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * Typical usage is in a `<vaadin-grid-column>` of a custom `<vaadin-grid>` inside
  * a `<vaadin-crud>` to enable editing.
  */
-declare class CrudEdit extends ThemableMixin(HTMLElement) {}
+declare class CrudEdit extends Button {}
 
 declare global {
   interface HTMLElementTagNameMap {

packages/crud/src/vaadin-crud-edit.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2017 - 2021 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { html } from '@polymer/polymer/polymer-element.js';
+import { Button } from '@vaadin/button/src/vaadin-button.js';
 
 /**
  * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
@@ -17,14 +17,15 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @extends HTMLElement
  * @mixes ThemableMixin
  */
-class CrudEdit extends ThemableMixin(PolymerElement) {
+class CrudEdit extends Button {
   static get template() {
     return html`
       <style>
         :host {
           display: block;
         }
       </style>
+      <div part="icon"></div>
     `;
   }
 
@@ -37,7 +38,6 @@ class CrudEdit extends ThemableMixin(PolymerElement) {
     super.ready();
     this.addEventListener('click', this.__onClick);
     this.setAttribute('aria-label', 'Edit');
-    this.setAttribute('role', 'button');
   }
 
   /** @private */
@@ -57,4 +57,4 @@ class CrudEdit extends ThemableMixin(PolymerElement) {
    */
 }
 
-window.customElements.define(CrudEdit.is, CrudEdit);
+customElements.define(CrudEdit.is, CrudEdit);

packages/crud/test/visual/lumo/crud.test.js

@@ -17,6 +17,13 @@ describe('crud', () => {
     await visualDiff(div, 'basic');
   });
 
+  it('edit-button-focus', async () => {
+    const button = element.$.grid.querySelector('vaadin-crud-edit');
+    button.focus();
+    button.setAttribute('focus-ring', '');
+    await visualDiff(div, 'edit-button-focus');
+  });
+
   it('no-toolbar', async () => {
     element.noToolbar = true;
     await visualDiff(div, 'no-toolbar');

packages/crud/test/visual/material/crud.test.js

@@ -17,6 +17,13 @@ describe('crud', () => {
     await visualDiff(div, 'basic');
   });
 
+  it('edit-button-focus', async () => {
+    const button = element.$.grid.querySelector('vaadin-crud-edit');
+    button.focus();
+    button.setAttribute('focus-ring', '');
+    await visualDiff(div, 'edit-button-focus');
+  });
+
   it('no-toolbar', async () => {
     element.noToolbar = true;
     await visualDiff(div, 'no-toolbar');

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

@@ -8,19 +8,18 @@ registerStyles(
   'vaadin-crud-edit',
   css`
     :host {
+      min-width: auto;
+      margin: 0;
       font-family: 'lumo-icons', var(--lumo-font-family);
       font-size: var(--lumo-icon-size-m);
       line-height: 1;
-      color: var(--lumo-primary-text-color);
       position: relative;
-      background-color: var(--lumo-contrast-5pct);
-      border-radius: var(--lumo-border-radius-m);
       width: var(--lumo-size-s);
       height: var(--lumo-size-s);
-      cursor: var(--lumo-clickable-cursor);
+      outline: none;
     }
 
-    :host::before {
+    [part='icon']::before {
       content: var(--lumo-icons-edit);
       width: var(--lumo-size-m);
       height: var(--lumo-size-m);
@@ -30,28 +29,6 @@ registerStyles(
       top: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
       left: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
     }
-
-    :host::after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-      background-color: currentColor;
-      opacity: 0;
-      transition: opacity 100ms;
-    }
-
-    :host(:hover)::after {
-      opacity: 0.05;
-    }
-
-    :host(:active)::after {
-      opacity: 0.12;
-    }
   `,
   { moduleId: 'lumo-crud-grid-edit' }
 );

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

@@ -6,6 +6,8 @@ registerStyles(
   'vaadin-crud-edit',
   css`
     :host {
+      display: block;
+      min-width: auto;
       font-size: var(--material-button-font-size);
       line-height: 1;
       color: var(--material-text-color);
@@ -14,9 +16,14 @@ registerStyles(
       border-radius: 4px;
       width: 2em;
       height: 2em;
+      outline: none;
+      /* Reset button styles */
+      letter-spacing: normal;
+      -webkit-font-smoothing: auto;
+      -moz-font-smoothing: auto;
     }
 
-    :host::before {
+    [part='icon']::before {
       font-family: serif;
       font-size: var(--material-button-font-size);
       color: var(--material-primary-text-color);
@@ -26,25 +33,8 @@ registerStyles(
       line-height: 2em;
       text-align: center;
       position: absolute;
-    }
-
-    :host::after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-      background-color: currentColor;
-      opacity: 0;
-      transition: opacity 100ms;
-    }
-
-    :host(:hover)::after {
-      opacity: 0.05;
-    }
-
-    :host(:active)::after {
-      opacity: 0.12;
+      top: 0;
+      left: 0;
     }
   `,
   { moduleId: 'material-crud-grid-edit' }