@vaadin/vaadin-app-layout - npm Package Compare versions

Comparing version 22.0.0-alpha4 to 22.0.0-alpha5

package.json

 {
   "name": "@vaadin/vaadin-app-layout",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha5",
   "description": "vaadin-app-layout",
@@ -30,7 +30,7 @@ "main": "vaadin-app-layout.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "^22.0.0-alpha4",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha4"
+    "@vaadin/button": "^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"
   },
@@ -40,3 +40,3 @@ "devDependencies": {
     "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-tabs": "^22.0.0-alpha4",
+    "@vaadin/vaadin-tabs": "^22.0.0-alpha5",
     "sinon": "^9.2.1"
@@ -47,3 +47,3 @@ },
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
 }

src/vaadin-drawer-toggle.js

@@ -83,18 +83,5 @@ /**
     this.addEventListener('click', () => {
-      if (!this.disabled) {
-        this.__fireClick();
-      }
+      this.dispatchEvent(new CustomEvent('drawer-toggle-click', { bubbles: true, composed: true }));
     });
-
-    this.addEventListener('keyup', (event) => {
-      if (/^( |SpaceBar|Enter)$/.test(event.key) && !this.disabled) {
-        this.__fireClick();
-      }
-    });
   }
-
-  /** @private */
-  __fireClick() {
-    this.dispatchEvent(new CustomEvent('drawer-toggle-click', { bubbles: true, composed: true }));
-  }
 }
@@ -101,0 +88,0 @@

theme/lumo/vaadin-drawer-toggle-styles.js

 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 
-registerStyles(
-  'vaadin-drawer-toggle',
-  css`
-    :host {
-      width: var(--lumo-size-l);
-      height: var(--lumo-size-l);
-      min-width: auto;
-      margin: 0 var(--lumo-space-s);
-      padding: 0;
-      background: transparent;
-    }
+const drawerToggle = css`
+  :host {
+    width: var(--lumo-size-l);
+    height: var(--lumo-size-l);
+    min-width: auto;
+    margin: 0 var(--lumo-space-s);
+    padding: 0;
+    background: transparent;
+  }
 
-    [part='icon'],
-    [part='icon']::after,
-    [part='icon']::before {
-      position: inherit;
-      height: auto;
-      width: auto;
-      background: transparent;
-      top: auto;
-    }
+  [part='icon'],
+  [part='icon']::after,
+  [part='icon']::before {
+    position: inherit;
+    height: auto;
+    width: auto;
+    background: transparent;
+    top: auto;
+  }
 
-    [part='icon']::before {
-      font-family: lumo-icons;
-      font-size: var(--lumo-icon-size-m);
-      content: var(--lumo-icons-menu);
-    }
-  `,
-  { include: ['lumo-button'], moduleId: 'lumo-drawer-toggle' }
-);
+  [part='icon']::before {
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-m);
+    content: var(--lumo-icons-menu);
+  }
+`;
+
+registerStyles('vaadin-drawer-toggle', [button, drawerToggle], { moduleId: 'lumo-drawer-toggle' });

theme/material/vaadin-drawer-toggle-styles.js

 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/button/theme/material/vaadin-button-styles.js';
+import { button } from '@vaadin/button/theme/material/vaadin-button-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 
-registerStyles(
-  'vaadin-drawer-toggle',
-  css`
-    :host {
-      min-width: 0 !important;
-      width: 48px;
-      height: 48px;
-      padding: 0;
-      border-radius: 50%;
-    }
+const drawerToggle = css`
+  :host {
+    min-width: 0 !important;
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border-radius: 50%;
+  }
 
-    :host(:not([dir='rtl'])) {
-      margin-right: 1em;
-    }
+  :host(:not([dir='rtl'])) {
+    margin-right: 1em;
+  }
 
-    :host([dir='rtl']) {
-      margin-left: 1em;
-    }
+  :host([dir='rtl']) {
+    margin-left: 1em;
+  }
 
-    [part='icon'],
-    [part='icon']::after,
-    [part='icon']::before {
-      background-color: currentColor;
-    }
+  [part='icon'],
+  [part='icon']::after,
+  [part='icon']::before {
+    background-color: currentColor;
+  }
 
-    [part='icon'] {
-      top: 18px;
-      left: 15px;
-    }
+  [part='icon'] {
+    top: 18px;
+    left: 15px;
+  }
 
-    [part='icon'],
-    [part='icon']::after,
-    [part='icon']::before {
-      height: 2px;
-      width: 18px;
-    }
+  [part='icon'],
+  [part='icon']::after,
+  [part='icon']::before {
+    height: 2px;
+    width: 18px;
+  }
 
-    [part='icon']::after {
-      top: 5px;
-    }
+  [part='icon']::after {
+    top: 5px;
+  }
 
-    [part='icon']::before {
-      top: 10px;
-    }
-  `,
-  { include: ['material-button'], moduleId: 'material-drawer-toggle' }
-);
+  [part='icon']::before {
+    top: 10px;
+  }
+`;
+
+registerStyles('vaadin-drawer-toggle', [button, drawerToggle], {
+  moduleId: 'material-drawer-toggle'
+});

No alert changes

Worsened metrics

Total package byte prevSize

52324

decreased by-0.62%

Lines of code

1030

decreased by-1.44%

Dependency changes

• Updated@vaadin/button@^22.0.0-alpha5

• Updated@vaadin/vaadin-element-mixin@^22.0.0-alpha5

• Updated@vaadin/vaadin-lumo-styles@^22.0.0-alpha5

• Updated@vaadin/vaadin-material-styles@^22.0.0-alpha5

• Updated@vaadin/vaadin-themable-mixin@^22.0.0-alpha5