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

Comparing version 1.0.0-alpha1 to 1.0.0-alpha2

demo/element-basic-demos.js

@@ -15,5 +15,10 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
       <template preserve-content="">
+        <!-- Apply typography and color theme modules globally from \`vaadin-lumo-styles\` -->
+        <custom-style>
+          <style include="lumo-typography lumo-color">
+          </style>
+        </custom-style>
         <style>
           .content {
-            padding: 5px;
+            padding: 16px;
           }
@@ -26,12 +31,21 @@
         <vaadin-app-layout>
-          <img slot="branding" referrerpolicy="no-referrer" src="https://i.imgur.com/GPpnszs.png" alt="Vaadin Logo">
+          <img slot="branding" referrerpolicy="no-referrer" src="https://i.imgur.com/GPpnszs.png" alt="Vaadin Logo" width="100" height="31">
 
-          <vaadin-tabs slot="menu" theme="minimal">
-            <vaadin-tab>
+          <vaadin-tabs slot="menu">
+            <vaadin-tab theme="icon-on-top">
               <iron-icon icon="vaadin:home"></iron-icon>
               Page 1
             </vaadin-tab>
-            <vaadin-tab>Page 2</vaadin-tab>
-            <vaadin-tab>Page 3</vaadin-tab>
-            <vaadin-tab>Page 4</vaadin-tab>
+            <vaadin-tab theme="icon-on-top">
+              <iron-icon icon="vaadin:list"></iron-icon>
+              Page 2
+            </vaadin-tab>
+            <vaadin-tab theme="icon-on-top">
+              <iron-icon icon="vaadin:options"></iron-icon>
+              Page 3
+            </vaadin-tab>
+            <vaadin-tab theme="icon-on-top">
+              <iron-icon icon="vaadin:question"></iron-icon>
+              Page 4
+            </vaadin-tab>
           </vaadin-tabs>
@@ -50,5 +64,10 @@
       <template preserve-content="">
+        <!-- Apply typography and color theme modules globally from \`vaadin-lumo-styles\` -->
+        <custom-style>
+          <style include="lumo-typography lumo-color">
+          </style>
+        </custom-style>
         <style>
           .content {
-            padding: 5px;
+            padding: 16px;
           }
@@ -61,5 +80,5 @@
         <vaadin-app-layout>
-          <h3 slot="branding">Company Name</h3>
+          <h3 slot="branding" style="margin: 0;">Company</h3>
 
-          <vaadin-tabs slot="menu" theme="minimal">
+          <vaadin-tabs slot="menu">
               <vaadin-tab>Page 1</vaadin-tab>
@@ -86,5 +105,7 @@ <vaadin-tab>Page 2</vaadin-tab>
       <template preserve-content="">
+        <!-- Apply typography and color theme modules globally from \`vaadin-lumo-styles\` -->
+        <custom-style><style include="lumo-typography lumo-color"></style></custom-style>
         <style>
           .content {
-            padding: 5px;
+            padding: 16px;
           }
@@ -97,3 +118,3 @@
         <vaadin-app-layout id="app">
-          <vaadin-tabs slot="menu" theme="minimal">
+          <vaadin-tabs slot="menu">
             <vaadin-tab>Page 1</vaadin-tab>
@@ -118,5 +139,7 @@ <vaadin-tab>Page 2</vaadin-tab>
       <template preserve-content="">
+        <!-- Apply typography theme module globally from \`vaadin-material-styles\` -->
+        <custom-style><style include="material-typography"></style></custom-style>
         <style>
           .content {
-            padding: 5px;
+            padding: 16px;
           }
@@ -123,0 +146,0 @@

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-app-layout",
-  "version": "1.0.0-alpha1",
+  "version": "1.0.0-alpha2",
   "main": "vaadin-app-layout.js",
@@ -40,3 +40,3 @@ "author": "Vaadin Ltd",
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^2.0.1",
+    "@vaadin/vaadin-demo-helpers": "^2.0.4",
     "@vaadin/vaadin-tabs": "^2.1.0",
@@ -43,0 +43,0 @@ "@vaadin/vaadin-icons": "^4.2.0"

src/vaadin-app-layout.js

@@ -25,6 +25,12 @@ /**
  *  </vaadin-tabs>
- *  <div>Page content</div>
+ *  <!-- Everything else will be the page content -->
+ *  <div>
+ *    <h3>Page title</h3>
+ *    <p>Page content</p>
+ *  </div>
  * </vaadin-app-layout>
  * ```
  *
+ * For best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`)
+ *
  * ### Styling
@@ -38,3 +44,2 @@ *
  * `branding`    | Placeholder for the logo or for the app name. By default is invisible on small screens
- * `menu`        | Container for an app menu. Placed in the middle of navigation bar.
  * `content`     | Container for page content.
@@ -47,3 +52,4 @@ *
  * `--vaadin-app-layout-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset
- * `--vaadin-app-layout-navbar-height` | Height of the navigation bar and branding inside | `50px`
+ * `--vaadin-app-layout-navbar-height` | Height of the navigation bar and branding inside | `auto`, depends on the navbar content
+ * `--vaadin-app-layout-navbar-background` | Background of the navigation bar | slightly gray, depends on the theme
  *
@@ -76,11 +82,9 @@ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
         flex-direction: column-reverse;
-        height: 100%;
-        width: 100%;
+        position: fixed;
         top: 0;
         left: 0;
-        position: fixed;
+        right: 0;
         bottom: var(--vaadin-app-layout-viewport-bottom);
         /* CSS API for host */
         --vaadin-app-layout-viewport-bottom: 0;
-        --vaadin-app-layout-navbar-height: 50px;
       }
@@ -92,3 +96,4 @@
 
-      [part="branding"] {
+      [part="branding"],
+      [part="navbar"]::after {
         display: none;
@@ -101,14 +106,30 @@ }
         align-items: center;
-        justify-content: center;
+        height: var(--vaadin-app-layout-navbar-height, auto);
+        background: var(--vaadin-app-layout-navbar-background, #eee);
       }
 
+      [part="navbar"]::after {
+        content: '';
+      }
+
       [part="branding"],
-      [part="navbar"] {
-        height: var(--vaadin-app-layout-navbar-height);
+      [part="navbar"]::after {
+        /*
+          Makes the menu part horizontally centered on wide viewports,
+          regardless of the size of contents inside the branding
+          and the secondary parts. Prevents unnecessary menu shrinking.
+
+          NOTE: IE requires a unit for the flex-basis value.
+
+          NOTE: \`0px\` might confuse linters and minifiers.
+        */
+        flex: 1 0 0;
       }
 
-      [part="menu"] {
-        width: auto;
+      [part=navbar] > ::slotted([slot="menu"]) {
+        display: flex;
+        align-items: center;
         overflow: hidden;
         max-width: 100%;
+        margin: auto;
       }
@@ -127,35 +148,20 @@
 
-        [part="menu"] {
-          max-width: 60%;
+        [part=navbar] > ::slotted([slot="menu"]) {
+          flex: initial;
         }
 
-        [part="branding"] {
+        [part="branding"],
+        [part="navbar"]::after {
           display: flex;
-          position: absolute;
-          top: 0;
-          left: 0;
-          max-width: 20%;
-          max-height: 100%;
-          align-items: center;
         }
-
-        [part="branding"] ::slotted(*) {
-          max-width: 100%;
-          max-height: 100%;
-        }
       }
     </style>
 
-    <div part="navbar" role="navigation">
+    <nav part="navbar">
       <div part="branding" role="banner">
         <slot name="branding"></slot>
       </div>
-      <div part="menu" role="menu">
-        <slot name="menu"></slot>
-      </div>
-      <div part="secondary">
-        <slot name="secondary"></slot>
-      </div>
-    </div>
-    <div part="content" role="main">
+      <slot name="menu"></slot>
+      </nav>
+    <div part="content" role="main" aria-live="polite">
       <slot></slot>
@@ -170,3 +176,3 @@ </div>
   static get version() {
-    return '1.0.0-alpha1';
+    return '1.0.0-alpha2';
   }
@@ -182,2 +188,3 @@
 
+  /** @private */
   connectedCallback() {
@@ -184,0 +191,0 @@ super.connectedCallback();

theme/lumo/vaadin-app-layout-styles.js

@@ -11,20 +11,23 @@ import '@vaadin/vaadin-lumo-styles/color.js';
         background-color: var(--lumo-base-color);
-        font-family: var(--lumo-font-family);
-        color: var(--lumo-secondary-text-color);
       }
 
       [part="navbar"] {
-        background-color: var(--lumo-base-color);
-        box-shadow: 0 0 0 1px var(--lumo-contrast-20pct);
-        padding: 0 var(--lumo-space-xs);
+        background: var(--vaadin-app-layout-navbar-background, linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct)) var(--lumo-base-color));
       }
 
+      [part="navbar"] > ::slotted(vaadin-tabs[slot="menu"]) {
+        box-shadow: none;
+        --lumo-font-size-m: var(--lumo-font-size-s);
+        --lumo-icon-size-m: 1.5rem;
+      }
+
       @media (min-width: 700px) {
-        [part="branding"] {
-          padding-left: var(--lumo-space-m);
-        }
-
         [part="navbar"] {
           padding: 0 var(--lumo-space-m);
         }
+
+        [part="navbar"] > ::slotted(vaadin-tabs[slot="menu"]) {
+          --lumo-font-size-m: unset;
+          --lumo-icon-size-m: unset;
+        }
       }
@@ -31,0 +34,0 @@ </style>

theme/material/vaadin-app-layout-styles.js

 import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/shadow.js';
 import '@vaadin/vaadin-material-styles/typography.js';
@@ -9,16 +10,14 @@ const $_documentContainer = document.createElement('template');
       :host {
-        background-color: var(--material-base-color);
-        font-family: var(--material-font-family);
-        font-size: var(--material-button-font-size);
-        color: var(--material-secondary-text-color);
+        background-color: var(--material-background-color);
       }
 
       [part="navbar"] {
-        background-color: var(--material-base-color);
-        padding: 0 1em;
+        background: var(--vaadin-app-layout-navbar-background, var(--material-secondary-background-color));
+        box-shadow: var(--material-shadow-elevation-8dp);
       }
 
       @media (min-width: 700px) {
-        [part="branding"] {
-          padding-left: 1em;
+        [part="navbar"] {
+          padding: 0 1em;
+          box-shadow: var(--material-shadow-elevation-4dp);
         }
@@ -25,0 +24,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

451

increased by6.87%

Worsened metrics

Total package byte prevSize

62664

decreased by-29.18%

Number of package files

25

decreased by-3.85%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes