✨ tabs components

[bpetetot]

The <Tabs> component will be used in the workbench screen (for props, state...) and the documentation screen (to switch from edit to preview mode)

It's a basic implementation of tabs, that can be used like that :

<Tabs className="myClass">
    <Tab title="props"><Props /></Tab>
    <Tab title="state">Not implemented yet.</Tab>
</Tabs>

The following features are available on the <Tabs> component

• Tabs#defaultKey prop to select a default tab
• Tabs#actions prop to add an action bar on the right of the tabs
• Tab#title prop is a PropTypes.node

And the Tabs, Tab, TabsHeader and TabsActions styles can be overridden.

[fabienjuif]

em

[bpetetot]

ah... I'm not agree with this one.
I don't want to have a border of '1.333px' if I pass my font from '10px' to '13px'.
I want to have a constant size of '1px' here on the border.

[fabienjuif]

this not only about user font size.
this is also about making the component reusable.

if you want your tabs to be big, you just have to use them and change font-size with the em hack :
<Tabs style={{ fontSize: '2em' }} />

==> I have tabs that are 2 times bigger, border included (em) or not (px).

[bpetetot]

ok I understand, but how do you compute the value in em of your border size in your component ? you put 0.1em because it seems low ?

[fabienjuif]

Some times I have 0.02em

[fabienjuif]

Why do we change all those defaultProps ?

[bpetetot]

because in glamor#merge, falsy values are : false, null, undefined and {}.
'' is not considered as falsy.

[fabienjuif]

I really don't like that pattern.

• we handle state in graphical components
• parent give callback, + key to child that call the callback with key as parameter
• we have a key, this is title we don't need to use index IMO.

at least, can't we create a curry version of handleSelectedTab ?

handleSelectedTab = (key) => () => {
  //...
}

// ...

titles={titles.map(title => <li {/* ... */} onClick={handleSelectedTab(title)}>{...}</li>)}

[bpetetot]

I know that you don't like inner state 😇

Otherwise, I give the index in that case, because title is a PropTypes.node (for example if I want to have an icon + label in my tab header). So titlecan't be a key, maybe I should add a Tab#tabKey prop.

[fabienjuif]

#99