Tabs

[ahuth]

Not ready for primetime, yet, and this is a straight-up port from Mavenlink of the Tabs component. There are a couple things to resolve with the implementation and philosophically, first.

Implementation:

• No styles are being applied yet.
• Class properties are not being used, hence all of the bind-ing.
• This doesn't handle nested tabs. For example, something like:

  <TabList>
   <Tab>Stuff</Tab> // <- Works
   <div>
      <Tab>Other STuff</Tab> // <- Does not work
   </div>
  </TabList>

  Which can be useful for mixing in other things like buttons and using flex to put tabs on one side, buttons on the other.

• Uses old school refs to manually focus an element. Kind of unfortunate, but per the spec we have to manually manage focus when using the arrow keys to change the tab.
• Does not handle vertical tabs, which require different keys (up and down vs left and right).
• Needs some docs

Philosophical:

• Are we cool with bringing in a 3rd-party dependency? A lot of accessibility things require IDs, and we need a way to generate unique ones. I brought in lodash.uniqueid for that.
• How much styling should we provide here?
• Should we bring in https://babeljs.io/docs/en/babel-plugin-transform-class-properties/ and use class properties? Doesn't matter for now, but the current implementation of tabs would be cleaned up a lot.
• Are we okay with some of these components keeping internal state? I'm not opposed, although the current use case for it in tabs may not be necessary if we can come up with a better way of managing tab focus.

If you're game @juanca , I'd recommend us pairing on next week:

• Going through the tabs spec and verifying that we've covered all the bases
• Seeing if we can come up with alternative ways of managing focus here

As I said, this thing isn't ready for primetime, yet, but I'm pretty happy with the API. Let's work on resolving the above issues sometime.

[juanca]

Are we okay with some of these components keeping internal state? I'm not opposed, although the current use case for it in tabs may not be necessary if we can come up with a better way of managing tab focus.

Yeah, let's take another stab at this. However, if we do need some state, I won't be opposed.

Should we bring in https://babeljs.io/docs/en/babel-plugin-transform-class-properties/ and use class properties? Doesn't matter for now, but the current implementation of tabs would be cleaned up a lot.

I need to do a bit of research into this -- but it might come down to how many ARIA components will require internal state.

[juanca]

On a related note, I do want to improve the general process for documentation and testing coverage -- but that will be followup work.