tabs component

[gau94rav]

What's new A new tab component for pages.

Why use this instead of Snyk's We need a tab component that can support visualizations inside it's tab buttons along with label, snyk does not support that.

Snytax

<t-tabs
    t-layer="tab_layer"
    t-filter:tab="my_tab_url_parameter"
    :tabs="[
        { label: "Tab one", slot: "section_1" }, 
        { label: "Tab two", slot: "section_2" }, 
    ]">

        // By default tab buttons populate themselves, but to make any changes,
        // their slot name can be used which prefixed with `tab_` so section_1 becomes `tab_section_one` 
        // Tabs
       <div slot="tab_section_one" slot-scope="{tab}">
           {{ tab.label }}
       </div>

        // Sections
        <div slot="section_1">
            Tab one section 
        </div>

        <div slot="section_2">
            Tab two section 
        </div>

</t-tabs>

Note: t-layer file can just be a blank SQL file, we just need it to bind URL param using t-filter:tab attribute.

Figma

By default this component does not have much of a design, but is entirely customizable using slots, figma is just used as a sample for functionality.

[gau94rav]

Hi @sareg0 , thanks for checking this out, for demo you can actually switch to feat/enterprise_reporting branch inside Analytics page file (etc_analytics.html)

Also adding a screenshot.

[gau94rav]

The tab component is made without much design (just the basics) to make sure it stays customizable using slots.

Default look

With customization from slots

[gau94rav]

@sareg0 Thanks for feedback Sara

1. I like the idea of keyboard navigation, maybe in next version.
2. This works when you use it as a visualization with t-layer (to bind url param), but it should still default to first item, I can add it quickly.
3. This is something that wasn't required, it switches the look of tabs and sections to be side by side instead of top and bottom, we probably don't need it though or it needs a better name.
4. Yes it works as a visualization, we need to specify any empty layer file for it, sadly this is the only way for now, as binding URL params in regular way might interfere with filters system.

[gau94rav]

@sareg0 Can you please approve one more time, I have done following changes.

1. Remove is-vertical for now as it is not required and makes no sense, maybe we can plan it better in future.
2. Allow first tab to be selected if not used with a layer file.