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. +

+ + + + + @@ -46,6 +47,15 @@ + + + + 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 + + + + + + + + +
+ + Foo + Bar + Baz + +
+ + 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 0000000..a62e5b8 Binary files /dev/null and b/test/visual/screens/vaadin-tabs/anchor-tabs-lumo/anchor-tabs/chrome.png differ 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 0000000..6beb6cf Binary files /dev/null and b/test/visual/screens/vaadin-tabs/anchor-tabs-lumo/anchor-tabs/firefox.png differ 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 0000000..96ba59d Binary files /dev/null and b/test/visual/screens/vaadin-tabs/anchor-tabs-material/anchor-tabs/chrome.png differ 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 0000000..4ed7025 Binary files /dev/null and b/test/visual/screens/vaadin-tabs/anchor-tabs-material/anchor-tabs/firefox.png differ 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 {