Add slotted anchor styling for the tab

[web-padawan]

The problem

As a user I want to place the anchor inside of the tab and make it to occupy the full height and width. This is now impossible because of the padding

Solution

Add theme="link" similar to what paper-tab does with the attribute.

[web-padawan]

BTW, another possible feature here would be also to also forward click events which paper-tab does here, so the links would be accessible from the keyboard.

[abdonrd]

I think the best option is to wrap the tab with the anchor. Like #71.

More references:

• Fix consistency about anchors PolymerElements/paper-tabs#155
• Polymer elements should compose organically and ergonomically with anchors PolymerElements/iron-elements#37

[web-padawan]

@abdonrd I remember that use case as well, IMO it would make sense to maintain both.

[heruan]

I agree with @abdonrd, what is the advantage of having to explicitly place the anchor inside the tab? What if I place two anchors inside a tab then, one to activate the tab and one for another action?

Plus, what does happen when I click the tab and/or the anchor inside it? Is the tab select event triggered or the browser navigation? What if I control-click the link to open on a new (browser) tab/window (in which case tab should not be selected on the current window, but on the new one)?

Another solution could be using a new vaadin-link-tab element, which would wrap an anchor in its shadow root so that all the tab content would already be inside it and the new element can delegate click events to the anchor itself and avoid mixing tab/anchor behaviors.

Tested the PR, the only confirmed glitch from my considerations above is the selection of the tab on control/meta-click of the link, which should not happen (added a comment in the PR too).

[heruan]

I'm not a Polymer expert, but could this possibly work: <a href="tab1" is="vaadin-tab">?

Update Okay, I've just read about Polymer 2.0 not supporting the is attribute. Pity!

[heruan]

I'm currently using anchors in tabs without issues with this custom theme:

<dom-module id="vaadin-tab-link-theme" theme-for="vaadin-tab">
  <template>
    <style>
      :host ::slotted(a) {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        margin: -.25em -1em;
        padding: .25em 1em;
        color: inherit !important;
      }

      :host ::slotted(a:hover) {
        text-decoration: none !important;
      }

      :host ::slotted(a) > iron-icon {
        margin: 0 4px;
      }

      :host ::slotted(a) > iron-icon:first-child {
        margin-left: 0;
      }

      :host ::slotted(a) > iron-icon:last-child {
        margin-right: 0;
      }

      :host([theme~="icon-on-top"]) ::slotted(a) {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      :host([theme~="icon-on-top"]) ::slotted(a) > iron-icon {
        margin: 0;
      }
    </style>
  </template>
</dom-module>

I can submit a PR with this added to the core tab theme, but IIRC @jouni had raised a warning about the ::slotted(a) > iron-icon selector.

[pleku]

This is also something that Flow users need when they are using vaadin-tabs as a navigation menu, as there should be anchors inside the tabs that trigger the navigation.

[heruan]

I've just updated my previous comment using Flexbox to fit the anchor into the tab.