feat(Tab): Add component

README.md

@@ -129,7 +129,7 @@ Once you change the flag, you need to refresh your browser to see the changes in
 | ✓ Loader        |                 |                 |   Shape         |                    |
 | ✓ Rail          |                 |                 | ✓ Sidebar       |                    |
 | ✓ Reveal        |                 |                 |   Sticky        |                    |
-| ✓ Segment       |                 |                 |   Tab           |                    |
+| ✓ Segment       |                 |                 | ✓ Tab           |                    |
 | ✓ Step          |                 |                 |   Transition    |                    |
 
 ## Our Principles

docs/app/Examples/modules/Tab/MenuVariations/TabExampleAttachedBottom.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached='top'>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached='top'>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached='top'>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleAttachedBottom = () => (
+  <Tab menu={{ attached: 'bottom' }} panes={panes} />
+)
+
+export default TabExampleAttachedBottom

docs/app/Examples/modules/Tab/MenuVariations/TabExampleAttachedFalse.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleAttachedFalse = () => (
+  <Tab menu={{ attached: false }} panes={panes} />
+)
+
+export default TabExampleAttachedFalse

docs/app/Examples/modules/Tab/MenuVariations/TabExampleBorderless.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleBorderless = () => (
+  <Tab menu={{ borderless: true, attached: false, tabular: false }}panes={panes} />
+)
+
+export default TabExampleBorderless

docs/app/Examples/modules/Tab/MenuVariations/TabExampleColored.js

@@ -0,0 +1,41 @@
+import _ from 'lodash'
+import React, { Component } from 'react'
+import { Divider, Tab } from 'semantic-ui-react'
+
+const colors = [
+  'red', 'orange', 'yellow', 'olive', 'green', 'teal',
+  'blue', 'violet', 'purple', 'pink', 'brown', 'grey',
+]
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
+]
+
+class TabExampleColored extends Component {
+  state = { color: colors[0] }
+
+  handleColorChange = e => this.setState({ color: e.target.value })
+
+  render() {
+    const { color } = this.state
+
+    return (
+      <div>
+        <select onChange={this.handleColorChange}>
+          {_.map(colors, c => <option key={c} value={c}>{_.startCase(c)}</option>)}
+        </select>
+
+        <Divider hidden />
+
+        <Tab
+          menu={{ color, attached: false, tabular: false }}
+          panes={panes}
+        />
+      </div>
+    )
+  }
+}
+
+export default TabExampleColored

docs/app/Examples/modules/Tab/MenuVariations/TabExampleColoredInverted.js

@@ -0,0 +1,41 @@
+import _ from 'lodash'
+import React, { Component } from 'react'
+import { Divider, Tab } from 'semantic-ui-react'
+
+const colors = [
+  'red', 'orange', 'yellow', 'olive', 'green', 'teal',
+  'blue', 'violet', 'purple', 'pink', 'brown', 'grey',
+]
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
+]
+
+class TabExampleColoredInverted extends Component {
+  state = { color: colors[0] }
+
+  handleColorChange = e => this.setState({ color: e.target.value })
+
+  render() {
+    const { color } = this.state
+
+    return (
+      <div>
+        <select onChange={this.handleColorChange}>
+          {_.map(colors, c => <option key={c} value={c}>{_.startCase(c)}</option>)}
+        </select>
+
+        <Divider hidden />
+
+        <Tab
+          menu={{ color, inverted: true, attached: false, tabular: false }}
+          panes={panes}
+        />
+      </div>
+    )
+  }
+}
+
+export default TabExampleColoredInverted

docs/app/Examples/modules/Tab/MenuVariations/TabExampleTabularFalse.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleTabularFalse = () => (
+  <Tab menu={{ attached: false, tabular: false }} panes={panes} />
+)
+
+export default TabExampleTabularFalse

docs/app/Examples/modules/Tab/MenuVariations/index.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+import { Message } from 'semantic-ui-react'
+
+const TabMenuVariationsExamples = () => (
+  <ExampleSection title='Menu Variations'>
+    <ComponentExample
+      title='Attached'
+      description='A tab menu can be attached on bottom.'
+      examplePath='modules/Tab/MenuVariations/TabExampleAttachedBottom'
+    />
+    <ComponentExample
+      description='A tab menu can remove its attached appearance.'
+      examplePath='modules/Tab/MenuVariations/TabExampleAttachedFalse'
+    />
+    <ComponentExample
+      title='Not Tabular'
+      description='A tab menu can disable its tabular appearance.'
+      examplePath='modules/Tab/MenuVariations/TabExampleTabularFalse'
+    />
+    <ComponentExample
+      title='Borderless'
+      description='A tab menu can remove its borders.'
+      examplePath='modules/Tab/MenuVariations/TabExampleBorderless'
+    />
+    <ComponentExample
+      title='Colored'
+      description='A tab menu can be colored.'
+      examplePath='modules/Tab/MenuVariations/TabExampleColored'
+    >
+      <Message
+        info
+        content='Color only applies to the menu, not the pane, so they look best not attached.'
+      />
+    </ComponentExample>
+    <ComponentExample
+      description='A tab menu can invert its colors.'
+      examplePath='modules/Tab/MenuVariations/TabExampleColoredInverted'
+    />
+  </ExampleSection>
+)
+
+export default TabMenuVariationsExamples

docs/app/Examples/modules/Tab/States/TabExampleLoading.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane loading>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleLoading = () => (
+  <Tab panes={panes} />
+)
+
+export default TabExampleLoading

docs/app/Examples/modules/Tab/States/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const TabStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Loading'
+      description='A tab can display a loading indicator.'
+      examplePath='modules/Tab/States/TabExampleLoading'
+    />
+  </ExampleSection>
+)
+
+export default TabStatesExamples

docs/app/Examples/modules/Tab/Types/TabExampleBasic.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleBasic = () => (
+  <Tab panes={panes} />
+)
+
+export default TabExampleBasic

docs/app/Examples/modules/Tab/Types/TabExamplePointing.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExamplePointing = () => (
+  <Tab menu={{ pointing: true }} panes={panes} />
+)
+
+export default TabExamplePointing

docs/app/Examples/modules/Tab/Types/TabExampleSecondary.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleSecondary = () => (
+  <Tab menu={{ secondary: true }} panes={panes} />
+)
+
+export default TabExampleSecondary

docs/app/Examples/modules/Tab/Types/TabExampleSecondaryPointing.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleSecondaryPointing = () => (
+  <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
+)
+
+export default TabExampleSecondaryPointing

docs/app/Examples/modules/Tab/Types/TabExampleText.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleText = () => (
+  <Tab menu={{ text: true }} panes={panes} />
+)
+
+export default TabExampleText

docs/app/Examples/modules/Tab/Types/index.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const TabTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Basic'
+      description='A basic tab'
+      examplePath='modules/Tab/Types/TabExampleBasic'
+    />
+    <ComponentExample
+      title='Pointing Menu'
+      description='A tab menu can point to its tab panes.'
+      examplePath='modules/Tab/Types/TabExamplePointing'
+    />
+    <ComponentExample
+      examplePath='modules/Tab/Types/TabExampleSecondaryPointing'
+    />
+    <ComponentExample
+      title='Secondary Menu'
+      description='A tab menu can adjust its appearance to de-emphasize its contents.'
+      examplePath='modules/Tab/Types/TabExampleSecondary'
+    />
+    <ComponentExample
+      title='Text Menu'
+      description='A tab menu can be formatted for text content.'
+      examplePath='modules/Tab/Types/TabExampleText'
+    />
+  </ExampleSection>
+)
+
+export default TabTypesExamples

docs/app/Examples/modules/Tab/Usage/TabExampleActiveIndex.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+]
+
+class TabExampleActiveIndex extends Component {
+  state = { activeIndex: 1 }
+
+  handleChange = e => this.setState({ activeIndex: e.target.value })
+
+  render() {
+    const { activeIndex } = this.state
+
+    return (
+      <div>
+        <div>activeIndex: {activeIndex}</div>
+        <input type='range' max='2' value={activeIndex} onChange={this.handleChange} />
+        <Tab panes={panes} activeIndex={activeIndex} />
+      </div>
+    )
+  }
+}
+
+export default TabExampleActiveIndex

docs/app/Examples/modules/Tab/Usage/TabExampleDefaultActiveIndex.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleDefaultActiveIndex = () => (
+  <Tab panes={panes} defaultActiveIndex={2} />
+)
+
+export default TabExampleDefaultActiveIndex