From 160017613e0eebf39b9b21d799bc8df9bca3577a Mon Sep 17 00:00:00 2001
From: web-padawan
Date: Thu, 21 Feb 2019 15:51:19 +0200
Subject: [PATCH 1/3] 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 @@ Pre-selected tab
+ Anchors
+
+ Note: wrapping tab content into <a>
introduces a limitation of styling slotted
+ elements, like icons, by the <vaadin-tabs>
theme.
+
+
+
+
+
+ Integration
+
+
+ Theme Variants
+
+
+
+
+
+
@@ -46,6 +47,15 @@
+
+
+
+ Tab one
+ Tab two
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
Anchor tabs visual tests
+
+
+
+
+
+
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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
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
zcmbuA_d6Sk8pjhOHdSf|3D>Anv{da8BdA-d)ZR*M+B8N<5j4b1Yb4}c6m@FURW*SC{?3)BTXE$rnA6dCT9n?akZz`(hKbtI_4(5|(^Y}CD2xUz=I|FEHZNaMgv88P%oK(F>AXu2;
zWoANzI^4n&w^JAQb4?}%nyn$@S44?(=A6|UOldk=ZxH1m3y=$MF9}3bnzs9yeE|-@
z#j`_DjZ8oU@hxp6A<6UfUvXwTp>579C%4p7@O+aCI>Be(EOd|Ev0qA9K6#F`QKW)9
zxyDap6NpVqC1)-R=N}>Gu>n1>7F1^!7wBmOu+TXU#ZF
ztW*108T3DUXc2;iGgLtd;>L}m!I!m%Bp@4Esq2BsQzx<7P*KkHms|)$F}lg!GXEjK
zI}$#r3zicx7&$^b{`uL*JVXP^>6DbgF$Sn(s7B|`rHyyJ)Z1QMI!fN_*$$yOBH2)*
zV~`NoKzrBIzVhB-ZH}0i;t~5n$eoUWQ<+wV?$nPe+ayTb-0d~H@(*QI=!U)mCIfxt
zwv2?al*f8Lwom+sQI&EZ>oEv^gI8I(DpX&Lul}VGZcc{x_pPog%H^Q;5xEW5%7Xe2
zcDVfz=06g$ABlxk_BLD{{2^ogxol7sQ+h{Z(PGk%mua7>D15|Gup|IKA?)zG$jzYM
zHmFGOpd{R&Md*w-0e$3dx7~eO;OUI%+%xw=jZW3(#Vf8`)xA`D>!DglMfR&td8*g{
z5H1w9Q&EbTyb3kHTwDtswID5iOT&^5+86yE!Yzu6MlB7
zUNQ-npeqk4EXC4Rmg`x(nbTZ#mK*Ie#AEl!vPdsF{F^wjow2>0)QI+~R+~Yw5pntf
zBYyL#L(^!`+K;W>@gWr$;$d0@Xd_?2e&+dm-T<#d0*s7Usl+1ts!|t>WOJzIik9
z_YDew9{7E8b7{pK$VuBiS`tE`^e@><4F$p!*!@1mxAZG3bRh=UTEr&DCBOdVP91op
zjCzZ@p(d$#zMU={3He>2oP$oD|Li;nk^wmVuSD)i~+-
zaVGvC6*4&0{PlOi`VPVIY1F|6{hlM4)*EWQR$7AcR*$W}0&4)tM+z5$>uxIvSxyb)
z8$NMy)_qZps;L3C!Zv;WCS$P&
zz|9gR%JD+FwN*%_O`4(A=wP%>qIhQC?T)3)V#=>Yqef{(BFhsOo}KM5gCe_z9L43<
zX6_ZwL4$&OBp%te3JfGcYKp9AEN_OC8S_e7F;SVuUdmhIo;&V2gXgM&l7)|+41BH5O?J)*iLv4kXh$Ec|$Pflg=taACAB{}ohFo#Uu
z2`+NE>^nabCVyhPCF?v_1$$Bgp|WtItn?bSs|2p#H!l_bTv*@EWd-gkQGG`c`t=w?
zu1B-F9aHaDH&b&314BEyNcTSRhAgxU6MZ>&JNKG53=^|oxxk|)@LW{|O0d~ExK)(e
zkhTxZQucv%wXs(G%~AQ1)l+$dXwb4%_nEtyKyZZbwjta?+G_$oYH5@sX+HZGsa`w{
z109xJFLKGNor4B`kW@$^L$KCXuE6O`*LVK~vuWL0-v1&riLO=8x0J~^f&R8k73d4_
zpBm(!$fwbbM*O(a$qGL|U&xE0hPlN{!`}n8{`V99oPnEc@*o{4MYu3F0B&prt2T6x
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<I=N^Vi!
zp0dOB&*4t*4AWUwDjPpmb^7|u|8TF??)Kf^d-TtL+5P?#+1wM{Das2jlz*_&f8_Bq&?Bhj?65Z
z^s6W@cD}Tgg~#u6Sy6w5WB6AzY+ftc{B7jb|2_TFxi^}}nXZ0bFaKw6>#te}1
z1@*mh0gCA%+G$eqPs5Tk{@n7KHFrs!?_7!WZ3(_R-c9G_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=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@(?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`?@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 {
From 84cc827662c33feca8ddf354c6f12a8032c47d46 Mon Sep 17 00:00:00 2001
From: web-padawan
Date: Tue, 5 Mar 2019 14:46:29 +0200
Subject: [PATCH 2/3] docs: update slotted anchor demo [skip ci]
---
demo/tabs-basic-demos.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/demo/tabs-basic-demos.html b/demo/tabs-basic-demos.html
index a42ce97..15522fe 100644
--- a/demo/tabs-basic-demos.html
+++ b/demo/tabs-basic-demos.html
@@ -107,10 +107,10 @@ Anchors
- Integration
+ Installation
- Theme Variants
+ API docs
From b16f6a22ed8e580da6d9827b694b00b25eade68b Mon Sep 17 00:00:00 2001
From: web-padawan
Date: Tue, 5 Mar 2019 15:21:04 +0200
Subject: [PATCH 3/3] test: increase keyup click listener coverage
---
test/nav.html | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/test/nav.html b/test/nav.html
index 3eddb2b..1552f47 100644
--- a/test/nav.html
+++ b/test/nav.html
@@ -227,6 +227,15 @@
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;
+ });
});