From 160017613e0eebf39b9b21d799bc8df9bca3577a Mon Sep 17 00:00:00 2001
From: web-padawan <serguey.kulikov@gmail.com>
Date: Thu, 21 Feb 2019 15:51:19 +0200
Subject: [PATCH] feat: add slotted anchor support and styles

---
 demo/tabs-basic-demos.html                    |  18 ++++++++++
 src/vaadin-tab.html                           |  13 ++++++++
 test/nav.html                                 |  31 ++++++++++++++++++
 test/visual/anchor-tabs.html                  |  31 ++++++++++++++++++
 .../anchor-tabs-lumo/anchor-tabs/chrome.png   | Bin 0 -> 1807 bytes
 .../anchor-tabs-lumo/anchor-tabs/firefox.png  | Bin 0 -> 1183 bytes
 .../anchor-tabs/chrome.png                    | Bin 0 -> 2008 bytes
 .../anchor-tabs/firefox.png                   | Bin 0 -> 1215 bytes
 test/visual/test.js                           |   7 ++++
 theme/lumo/vaadin-tab-styles.html             |  20 +++++++++++
 theme/material/vaadin-tab-styles.html         |  13 ++++++++
 11 files changed, 133 insertions(+)
 create mode 100644 test/visual/anchor-tabs.html
 create mode 100644 test/visual/screens/vaadin-tabs/anchor-tabs-lumo/anchor-tabs/chrome.png
 create mode 100644 test/visual/screens/vaadin-tabs/anchor-tabs-lumo/anchor-tabs/firefox.png
 create mode 100644 test/visual/screens/vaadin-tabs/anchor-tabs-material/anchor-tabs/chrome.png
 create mode 100644 test/visual/screens/vaadin-tabs/anchor-tabs-material/anchor-tabs/firefox.png

diff --git a/demo/tabs-basic-demos.html b/demo/tabs-basic-demos.html
index 2f03748..a42ce97 100644
--- 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="#tabs-integration-demos">Integration</a>
+          </vaadin-tab>
+          <vaadin-tab>
+            <a href="#tabs-lumo-theme-demos">Theme Variants</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
index ae7f9e9..7c7d717 100644
--- 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
index f9de6b8..3eddb2b 100644
--- 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,26 @@
       });
     });
 
+    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;
+      });
+    });
   </script>
 </body>
diff --git a/test/visual/anchor-tabs.html b/test/visual/anchor-tabs.html
new file mode 100644
index 0000000..367c47d
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000000000000000000000000000000..a62e5b8c628e8dc57d159671b0143d73ec1bee35
GIT binary patch
literal 1807
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
E2RuVy5dZ)H

literal 0
HcmV?d00001

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
new file mode 100644
index 0000000000000000000000000000000000000000..6beb6cfe37a5033d4b41818412b2dfd6d0a229c0
GIT binary patch
literal 1183
zcmeAS@N?(olHy`uVBq!ia0y~yU{(OKbvW37<lLw`eGCjNX`U{QAr*7p-u2J8o+`us
zVf*QNQP<qAiV1=uQYIa)JDe{a5POr9IlX6Bk88Vtp~@2PicZm_juMX4>1|~%_}^`E
zXlj&Io5aF(POPJn<A09lq?DI+vT1pKhwopp-R~Q}{`U8ub~g9VzyG%9XWhK_`F=}-
zR<bZKENIvjB@T4O9eWl5AWwo3D5l}Yz{tSRCFsDw(2ztG;b+q-PISuaEnE8i6z}8w
zQkzM++Fl_A<#VKO%wD(e{yORGocAZ%rX9};3H+K?{1)gM>n@fFDxQy<c=lM^`-@aR
zFp0c2OLy+s$SEqy?VF3;%gfTH<vd9TD;3_7aJTc<vn{sM=h%F%UaLKG*UcDf28PXH
zJIxig7dX$pc8b0D*VdiE^MbGaoMSuL#P0Kt9~VwMd~@gG{K?nZW?kC3Rri1Cthpek
zEIz&Y>CuNJUuAYatg{SWQ=3t5_FZOYqG)am1B1`e9u9^3^|gxmGIOTe&bOIz)pOFt
zH^1JT*ZEmxlMrIOe8)oPo8_xC=gxgB{h`>N|M|_{_o>c*Z+uO7|Lx7YTBF<7d@}5;
zug+hWoV__WJNjXh`i!i%{##?i-`6{4?ft;Wa6n|r?Va=YOqupw-&bM=&<dS1uO9CI
z{PN(FwSBGO&90NKJbimzJmvoJ`t<PEclONHdS)W>OLqCM%U=`!Z#{kNTi@$@aXML<
zr&n=a*PfT>RaJNL!7O#PGud9xXGzUz+o`=(UD9&S-rAGe((C7`Gcq)2UHvEU>*ht7
zQ+sk|-D$oOFkN)#q{r!#mvmV!Wjb-B`Htm$=H0tD|9o*|<LuhPRhgHhc(>l%aliLg
zu^s!qm;Se`H?7*|a26O<!D%ks*WP@M2wR(d*5A7C`3;Zau&eV=gv-~>ZcJT!b5rTx
z8_ViIA$eujx!F7S-eRxby;*<l%|&0i7#eN|{9d1+yYBSopX#;ElaIB#8_!_hR8u&$
zIIU@6ywQYZC4M!F4QkdcQw?1^>sI@>^zZ%NpHEq>4F_5~?-u)nwx2h*82w!IdworP
zZh^_}eS4-jYd`Ow`*uZ|pKs4r<+(B2Z2YgQXJ&XL_dR)W;p%N*+9|&@|NmK;;I)5U
z_Pw&4bnIIh*syJq7n`>J+Ujn!;Ym`|z5NBbZ+@EcKmWpA8aylb$dcwem3eP}h_8D!
zd-J}(6}zgor7K8U7k^9(-j(LXeNFa?-HqRGZ&bvWn|*)!ESrJhfbN-<AzD+T#DSUU
zj(pbrCRQMAPGLTpX&uY`-oDII{>|<w@$PQRUkhH(T(kbP`+B_--rCFF0wa{6JmXw`
zx|`PJjUP_Wx1Vsi{>;q2rT?#Aa-aPE-p-gWGZ`2hzW!sK(baRdfALjsV3ud_boFyt
I=akR{0EbB;KL7v#

literal 0
HcmV?d00001

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
new file mode 100644
index 0000000000000000000000000000000000000000..96ba59de034b363036d131b772e95b721bf4bcaf
GIT binary patch
literal 2008
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
F{~Peeu}}a2

literal 0
HcmV?d00001

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
new file mode 100644
index 0000000000000000000000000000000000000000..4ed7025bdd6c10d2587e44e68063414d9657dc52
GIT binary patch
literal 1215
zcmeAS@N?(olHy`uVBq!ia0y~yU{(OK4LI0<<V!!fJO&1qHcuDFkcv5P@7ia~NtI#$
zkiTl{4GWEpTzcjyo}4p2%J_AN$ZQr_vSX(2mIn%j<=%w?S%td;y98QpGq>I=N^Vi!
zp0dOB&*4t*4AWUwDjPpmb^7|u|8TF??)Kf^d-TtL+5P<YzVq+*u57=(yPxTUh+gbG
ztM{4=45H-^_oxG1;lszs!oZ;6#=ywH&?V@=z|fGyBEZ0~K!SS0&whTM$8i3V-@cjm
z&ixg1zxVIm(>?#+1wM{Das2jl<NqPoZSr&ic=xVZYjRog->z*_&f8_Bq&?Bhj?65Z
z^s6W@cD}Tgg~#u6Sy6w5WB6AzY+ftc{B7<UyFiV3k7k9;V=&^Jw*2$gx7~~TbN|lM
zzgIJ1t#k4&^ZL`_mv>jb|2_TFxi^}}nXZ0bFaKw6>#<jJdtz9=?E39J!Owi}>te}1
z1@*mh0gCA%+G$eqPs5Tk{@n7KHFrs!?_7!WZ3(_R-c9G<G*$f5$At|>_0?AS&(GKV
zetK@@ai-96)%DjWeW^dC?=SOu>21%fuT@zum)x$N_4;gT;mT=W%r{wDyxz(5{5emy
zYrgJTKcGkERctsFA?ToX%g=0<=QMr3+=aVlv_4fiJGaE&RBXkbgK1{JJYRkGx4A2^
z<@#k$UGDDg$Q7z{zm}zN%?L;j(`L(DUq0!|rY#z^J=W11)EtYg<<0nO>s}wN*;l6-
zzOC%D^Q4<QpZ8f5n%n2Ae%|cqXC$^_S)KN3?X}0}_rG|5<IW59txIF(&h!+^%G_$U
z$ueU};hVb7xOZFm&Q-G&v!AMD+nRJ?-|W3Yg^%sCI3GJO%w#$KwShrKV&nSir^gq%
zUHH3u?$@V(->=hKaxE)0xp=~{533R@CN5eja_n&A^)5&2^6&WpcP7}WH8B{SOw)hT
ztMa|NKJ`o99`4HAZz9Q!h8wPLz9_jX+49C64|~u3J3qZQf0&b#c0qzm{J&06UqvyW
z0o%X)wGvBew@<Chirn>(?dTE#U}(ktKlb;T->&Wa-^+SleYZFnkzn&Sf3eiPyo=GN
zy*5v+-g`{2cQHHnl*h*y9zSN;x~Tm8wbh(UIBO4`t^bsi_St>kuAe`2!|u+$y>tHa
z&-c{D{cXio>}sCZ+j`tqdT*W;Fvy)blk)7os?1G}D>S~mW1G3#VXK~*|AV!wB5zl}
z4PECcFML#Zf~R@4=KQ?)6XuuOrLXq?C_Xs3hjrES8}oXb&97WB-m}c(nNhsI)!eUJ
z#Gm)==>GXb^TexLtCgj~8c$g)jw&oIuC1>QQ$IWPq3^7(I`?<k{jzUcu?L(d&s7UK
zn8xg~DZLlWz@T+bOozIe4>@BmvpccAA8enA{N5sneZrv3K4U*)$;O8-q!R1mfkgs?
Mr>mdKI;Vst0KKUf=>Px#

literal 0
HcmV?d00001

diff --git a/test/visual/test.js b/test/visual/test.js
index 4f506ad..74284ac 100644
--- 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
index a9a38b5..6bd6606 100644
--- 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
index bf04e45..4d6823a 100644
--- 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 {