breaking: add slotted anchor styles (#121)

vaadin · Mar 6, 2019 · b657fa2 · b657fa2
1 parent 0dd49b2
commit b657fa2
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 0 deletions.
diff --git a/demo/tabs-basic-demos.html b/demo/tabs-basic-demos.html
@@ -98,6 +98,24 @@ <h3>Pre-selected tab</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Anchors</h3>
+    <p>
+      <b>Note:</b> wrapping tab content into <code>&lt;a&gt;</code> introduces a limitation of styling slotted
+      elements, like icons, by the <code>&lt;vaadin-tabs&gt;</code> theme.
+    </p>
+    <vaadin-demo-snippet id='tabs-basic-demos-anchors'>
+      <template preserve-content>
+        <vaadin-tabs>
+          <vaadin-tab>
+            <a href="https://vaadin.com/components/vaadin-tabs/install" tabindex="-1">Installation</a>
+          </vaadin-tab>
+          <vaadin-tab>
+            <a href="https://vaadin.com/components/vaadin-tabs/html-api" tabindex="-1">API docs</a>
+          </vaadin-tab>
+        </vaadin-tabs>
+      </template>
+    </vaadin-demo-snippet>
+
   </template>
   <script>
     class TabsBasicDemos extends DemoReadyEventEmitter(TabsDemo(Polymer.Element)) {

diff --git a/src/vaadin-tab.html b/src/vaadin-tab.html
@@ -55,6 +55,19 @@
           super.ready();
           this.setAttribute('role', 'tab');
         }
+
+        _onKeyup(event) {
+          const willClick = this.hasAttribute('active');
+
+          super._onKeyup(event);
+
+          if (willClick) {
+            const anchor = this.querySelector('a');
+            if (anchor) {
+              anchor.click();
+            }
+          }
+        }
       }
 
       customElements.define(TabElement.is, TabElement);

diff --git a/test/nav.html b/test/nav.html
@@ -5,6 +5,7 @@
   <title>vaadin-tabs tests</title>
   <script src="../../web-component-tester/browser.js"></script>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="../vaadin-tab.html">
   <link rel="import" href="../vaadin-tabs.html">
@@ -46,6 +47,15 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="anchors">
+    <template>
+      <vaadin-tabs>
+        <vaadin-tab><a href="#">Tab one</a></vaadin-tab>
+        <vaadin-tab><a href="#">Tab two</a></vaadin-tab>
+      </vaadin-tabs>
+    </template>
+  </test-fixture>
+
   <script>
     const safari10 = /Apple.* Version\/(9|10)/.test(navigator.userAgent);
 
@@ -197,5 +207,35 @@
       });
     });
 
+    describe('tabs with slotted anchors', () => {
+      let nav, tabs;
+
+      beforeEach(done => {
+        nav = fixture('anchors');
+        tabs = nav.querySelectorAll('vaadin-tab');
+        Polymer.RenderStatus.afterNextRender(nav, () => {
+          nav._observer.flush();
+          done();
+        });
+      });
+
+      it('should propagate the click to the anchor element when Enter pressed', () => {
+        const anchor = tabs[0].querySelector('a');
+        const spy = sinon.spy();
+        anchor.addEventListener('click', spy);
+        MockInteractions.keyDownOn(tabs[0], 13, [], 'Enter');
+        MockInteractions.keyUpOn(tabs[0], 13, [], 'Enter');
+        expect(spy).to.be.calledOnce;
+      });
+
+      it('should not propagate the click to the anchor when other key pressed', () => {
+        const anchor = tabs[0].querySelector('a');
+        const spy = sinon.spy();
+        anchor.addEventListener('click', spy);
+        MockInteractions.keyDownOn(tabs[0], 39, [], 'ArrowRight');
+        MockInteractions.keyUpOn(tabs[0], 39, [], 'ArrowRight');
+        expect(spy).to.not.be.called;
+      });
+    });
   </script>
 </body>
diff --git a/test/visual/anchor-tabs.html b/test/visual/anchor-tabs.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Anchor tabs visual tests</title>
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-tab.html">`);
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-tabs.html">`);
+  </script>
+</head>
+
+<body>
+  <style media="screen">
+    .capture-block {
+      display: inline-block;
+      width: 800px;
+    }
+  </style>
+
+  <div class="capture-block" id="anchor-tabs">
+    <vaadin-tabs>
+      <vaadin-tab><a href="#">Foo</a></vaadin-tab>
+      <vaadin-tab><a href="#">Bar</a></vaadin-tab>
+      <vaadin-tab><a href="#">Baz</a></vaadin-tab>
+    </vaadin-tabs>
+  </div>
+
+</body>
diff --git a/test/visual/screens/vaadin-tabs/anchor-tabs-lumo/anchor-tabs/chrome.png b/test/visual/screens/vaadin-tabs/anchor-tabs-lumo/anchor-tabs/chrome.png
diff --git a/test/visual/screens/vaadin-tabs/anchor-tabs-lumo/anchor-tabs/firefox.png b/test/visual/screens/vaadin-tabs/anchor-tabs-lumo/anchor-tabs/firefox.png
diff --git a/test/visual/screens/vaadin-tabs/anchor-tabs-material/anchor-tabs/chrome.png b/test/visual/screens/vaadin-tabs/anchor-tabs-material/anchor-tabs/chrome.png
diff --git a/test/visual/screens/vaadin-tabs/anchor-tabs-material/anchor-tabs/firefox.png b/test/visual/screens/vaadin-tabs/anchor-tabs-material/anchor-tabs/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -38,6 +38,13 @@ gemini.suite('vaadin-tabs', function(rootSuite) {
         .setCaptureElements('#scrollable-tabs')
         .capture('scrollable-tabs');
     });
+
+    gemini.suite(`anchor-tabs-${theme}`, (suite) => {
+      suite
+        .setUrl(`anchor-tabs.html?theme=${theme}`)
+        .setCaptureElements('#anchor-tabs')
+        .capture('anchor-tabs');
+    });
   });
 
 });
diff --git a/theme/lumo/vaadin-tab-styles.html b/theme/lumo/vaadin-tab-styles.html
@@ -110,6 +110,19 @@
         opacity: 0;
       }
 
+      :host ::slotted(a) {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        margin: -0.5rem -0.75rem;
+        padding: 0.5rem 0.75rem;
+        text-decoration: none;
+        color: inherit;
+        outline: none;
+      }
+
       :host ::slotted(iron-icon) {
         margin: 0 4px;
         width: var(--lumo-icon-size-m);
@@ -140,6 +153,13 @@
         padding-top: 0.25rem;
       }
 
+      :host([theme~="icon-on-top"]) ::slotted(a) {
+        flex-direction: column;
+        align-items: center;
+        margin-top: -0.25rem;
+        padding-top: 0.25rem;
+      }
+
       :host([theme~="icon-on-top"]) ::slotted(iron-icon) {
         margin: 0;
       }

diff --git a/theme/material/vaadin-tab-styles.html b/theme/material/vaadin-tab-styles.html
@@ -96,6 +96,19 @@
         color: var(--material-disabled-text-color);
       }
 
+      :host ::slotted(a) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        margin: -12px -16px;
+        padding: 12px 16px;
+        text-decoration: none;
+        color: inherit;
+        outline: none;
+      }
+
       /* Touch device adjustments */
       @media (pointer: coarse) {
         :host(:hover)::before {