Adjust internal tab spacing (#115)

* Adjust internal tab spacing

Make the spacing between the edge of the tab scroll area and the first tab the same as the space between individual tabs.

Adjust the spacing for the `icon-on-top` theme variant, so that it’s visually more balanced (equal space between the text and icon as well as text and the selection indicator).

* Restore the vertical orientation padding inside the tabs

* Update visual tests for Lumo tabs

* Fix equal-width-tabs test regression caused by theme change

* Add istanbul-ignore comments for old workaround

src/vaadin-tabs.html

@@ -213,6 +213,7 @@
         _repaintShadowNodesHack() {
           // Safari 10 has an issue with repainting shadow root element styles when a host attribute changes.
           // Need this workaround (toggle any inline css property on and off) until the issue gets fixed.
+          /* istanbul ignore if */
           if (safari10 && this.root) {
             const WEBKIT_PROPERTY = '-webkit-backface-visibility';
             this.root.querySelectorAll('*').forEach(el => {

test/nav.html

@@ -192,7 +192,7 @@
       });
 
       it('should not cut content', () => {
-        expect(tabs[1].offsetWidth).to.be.above(130);
+        expect(tabs[1].offsetWidth).to.be.above(124);
         expect(nav.offsetWidth).to.be.eql(400);
       });
     });

test/visual/test.js

@@ -1,7 +1,10 @@
 gemini.suite('vaadin-tabs', function(rootSuite) {
 
   function wait(actions, find) {
-    actions.wait(5000);
+    return actions
+      .waitForJSCondition(function(window) {
+        return !!(window.WebComponents && window.WebComponents.ready);
+      }, 15000);
   }
 
   function goToAboutBlank(actions, find) {

theme/lumo/vaadin-tab-styles.html

@@ -8,10 +8,10 @@
     <style>
       :host {
         box-sizing: border-box;
-        padding: .25em 1em;
+        padding: 0.5rem 0.75rem;
         font-family: var(--lumo-font-family);
         font-size: var(--lumo-font-size-m);
-        line-height: var(--lumo-line-height-m);
+        line-height: var(--lumo-line-height-xs);
         font-weight: 500;
         text-align: center;
         opacity: 1;
@@ -32,6 +32,7 @@
 
       :host([orientation="vertical"]) {
         transform-origin: 0% 50%;
+        padding: 0.25rem 1rem;
         min-height: var(--lumo-size-m);
         min-width: 0;
       }
@@ -113,7 +114,7 @@
 
       /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
       :host ::slotted(iron-icon[icon^="vaadin:"]) {
-        padding: 0.25em;
+        padding: 0.25rem;
         box-sizing: border-box !important;
       }
 
@@ -129,7 +130,10 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        justify-content: space-around;
         text-align: center;
+        padding-bottom: 0.5rem;
+        padding-top: 0.25rem;
       }
 
       :host([theme~="icon-on-top"]) ::slotted(iron-icon) {

theme/lumo/vaadin-tabs-styles.html

@@ -18,7 +18,7 @@
         min-height: var(--lumo-size-l);
       }
 
-      :host([orientation="horizontal"]) [part="tabs"] ::slotted(vaadin-tab) {
+      :host([orientation="horizontal"]) [part="tabs"] ::slotted(vaadin-tab:not([theme~="icon-on-top"])) {
         justify-content: center;
       }
 
@@ -27,8 +27,13 @@
         display: inline-flex;
       }
 
+      :host([orientation="horizontal"]) [part="tabs"] {
+        margin: 0 0.75rem;
+      }
+
       :host([orientation="vertical"]) [part="tabs"] {
         width: 100%;
+        margin: 0.5rem 0;
       }
 
       [part="forward-button"],