feat(pfTabs): enhance pf-tabs api - #67

rebased w/ latest and ensured semantic-release commit...

@cdcabrera +1 to annotation fixes and good catch on those. I've attempted to make them more relevant...

Regarding the content panels, I thought that making a wrapping element and just using it to enhance accessibility attributes would be an OK pattern. However, we could easily adopt something else. Main thing this approach attempts to support though is having the ability to activate multiple content panels on selecting a tab, and enabling flexibility of where that content is located. If you have another proposal or you'd like to suggest something, maybe a PR in the future? I'm always up for supporting more use cases...

Re: accessibility. I believe Andres suggested some other attributes as well (although I'm not sure which). Happy to revisit this, but attempted to follow the guidelines used on the VMWare Clarity tabs here...
https://vmware.github.io/clarity/documentation/tabs

@jgiardino has proposed an additional feature for allowing right-aligned content (alongside the left-aligned tabs). we will need to review this rendered HTML with the CSS group and determine if this is an accepted pattern for PF.

less:

.pf-tabrow {
  display: flex;
  flex-wrap: wrap-reverse;
  & > li {
    float: none;
  }
  & > .pf-tabrow-contents {
    margin-left: auto;
  }
}

html

<ul class="nav nav-tabs pf-tabrow">

            <li class="active"><a href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fpatternfly-webcomponents%2Fpatternfly-webcomponents%2Fpull%2F67%23">Tab One</a></li>
            <li><a href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fpatternfly-webcomponents%2Fpatternfly-webcomponents%2Fpull%2F67%23">Tab Two</a></li>
            <li><a href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fpatternfly-webcomponents%2Fpatternfly-webcomponents%2Fpull%2F67%23">Tab Three</a></li>
            <li><a href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fpatternfly-webcomponents%2Fpatternfly-webcomponents%2Fpull%2F67%23">Tab Four</a></li>
            <li><a href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fpatternfly-webcomponents%2Fpatternfly-webcomponents%2Fpull%2F67%23">Tab Five</a></li>
            <li class="pf-tabrow-contents">
              <button class="btn btn-default" type="button">Secondary</button>
              <button class="btn btn-primary" type="button">Primary</button>
              <button class="btn btn-danger" type="button">Destructive</button>
            </li>
          </ul>

I tend to think providing a pf-tab-row-contents CE would be a good addition for allowing this. thoughts?

i guess too, that we prefer to keep tabs left aligned, so allowing buttons or other content on the right hand side doesn't seem so bad i.m.h.o.

cc: @cdcabrera @srambach @andresgalante

also @jgiardino - can you speak to the responsiveness of this approach?

fair enough @jgiardino...i think we're OK to add this, knowing that it will just aid in flexibility for certain product use cases (and that it will likely be customized).

Sooo.. i'll add a pf-tabrow-contents CE which renders an li and has an overridable class. It sounds like this will meet your product need for now. I'm open to extending this in the future...

I should have this ready some time tomorrow.

@jgiardino @cdcabrera i've added support for pf-tab-row-contents. Please see updated code and links below for how one can use these components alongside a framework, such as React.

https://stackblitz.com/edit/using-pf-tabs-in-reactjs?file=index.js
https://using-pf-tabs-in-reactjs.stackblitz.io/

https://rawgit.com/priley86/patternfly-webcomponents/pf-tabs-updates-dist/app/app.html?dir=pf-tabs&file=index.html

Due to the nature of this approach with transcluded content and framework interop/Mutation Observers, I will be following up shortly in an email with some of my research alongside this PR.