Blueprint: Allow tabs to behave as links

[adidahiya]

It's nice to use <a> tags inside tabs to get cmd-click behavior to open in a new tab.

This _sort of_ already works -- you can put <a> elements inside <Tab> and the link works properly. The layout is a little off because we apply padding to the <li> and your link click area is limited to the text itself, not the whole tab. Users have to override the padding to get a larger click area.

Drawing from some previous approaches, the style changes in core would look something like:

     .pt-tab {
+      a {
+        color: $dark-gray5;
+        padding: 15px 0 15px 0;
+
+        &:hover {
+          color: $pt-link-color;
+          text-decoration: none;
+        }
+      }
+
+      &[aria-selected=true] a {
+        color: $pt-link-color;
+      }
     }

[giladgray]

proposal for new Tabs API:

<Tabs>
    <Tab title="Tab One">
        <tab panel contents ... />
    </Tab>
    <Tab title={<span>JSX Tab Title</span>}>
        <tab panel contents ... />
    </Tab>
    <a href="">Tab title with no associated panel</a>
</Tabs>

i started implementing this already and it's dead simple and incredibly effective. trivially supports complex tab titles _and_ arbitrary content in tab title "row" (including elements that have no associated tab panel, like a search box).

thoughts?

[giladgray]

@adidahiya what work is necessary here? pretty sure you can put <a> tags inside the "new" Tab.

[adidahiya]

The layout is a little off because we apply padding to the <li> and your link click area is limited to the text itself, not the whole tab. Users have to override the padding to get a larger click area.

does the clickable area look good?