sync merge

CHANGELOG.md

@@ -1,5 +1,83 @@
 # Change Log
 
+## [v0.68.5](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.68.5) (2017-06-01)
+[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.68.4...v0.68.5)
+
+**Implemented enhancements:**
+
+- feat\(typings\): expose FormComponent in typings [\#1680](https://github.com/Semantic-Org/Semantic-UI-React/pull/1680) ([tomitrescak](https://github.com/tomitrescak))
+
+**Fixed bugs:**
+
+- Dropdown: option keys fallback to values incorrectly [\#1720](https://github.com/Semantic-Org/Semantic-UI-React/issues/1720)
+- Browser tab not showing `Icon` when viewing Icon docs [\#1709](https://github.com/Semantic-Org/Semantic-UI-React/issues/1709)
+
+**Closed issues:**
+
+- 'npm install semantic-ui-react' has error [\#1723](https://github.com/Semantic-Org/Semantic-UI-React/issues/1723)
+
+**Merged pull requests:**
+
+- chore\(package\): update chai-enzyme to 0.7.1 [\#1731](https://github.com/Semantic-Org/Semantic-UI-React/pull/1731) ([levithomason](https://github.com/levithomason))
+- fix\(factories\): handle falsy `key` values [\#1729](https://github.com/Semantic-Org/Semantic-UI-React/pull/1729) ([layershifter](https://github.com/layershifter))
+- fix\(Dropdown\): add addition item key [\#1727](https://github.com/Semantic-Org/Semantic-UI-React/pull/1727) ([levithomason](https://github.com/levithomason))
+- chore\(package\): update require-dir@0.3.2 [\#1721](https://github.com/Semantic-Org/Semantic-UI-React/pull/1721) ([greenkeeperio-bot](https://github.com/greenkeeperio-bot))
+- docs\(Item\): cleanup Item's floated example [\#1719](https://github.com/Semantic-Org/Semantic-UI-React/pull/1719) ([qoalu](https://github.com/qoalu))
+- docs\(Icon\): fix selector for input [\#1714](https://github.com/Semantic-Org/Semantic-UI-React/pull/1714) ([layershifter](https://github.com/layershifter))
+- chore\(package\): update react-ace to version 5.0.1 [\#1712](https://github.com/Semantic-Org/Semantic-UI-React/pull/1712) ([greenkeeperio-bot](https://github.com/greenkeeperio-bot))
+
+## [v0.68.4](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.68.4) (2017-05-27)
+[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.68.3...v0.68.4)
+
+**Implemented enhancements:**
+
+- Grid: should have inverted prop [\#1673](https://github.com/Semantic-Org/Semantic-UI-React/issues/1673)
+- Search: invalid PropType noResultMessage [\#1664](https://github.com/Semantic-Org/Semantic-UI-React/issues/1664)
+- minCharacters and saveRemoteData for Dropdown setting missing? [\#1124](https://github.com/Semantic-Org/Semantic-UI-React/issues/1124)
+- feat\(Item\): add unstackable prop to ItemGroup [\#1706](https://github.com/Semantic-Org/Semantic-UI-React/pull/1706) ([layershifter](https://github.com/layershifter))
+- feat\(typings\): export generic types [\#1698](https://github.com/Semantic-Org/Semantic-UI-React/pull/1698) ([fabien0102](https://github.com/fabien0102))
+- feat\(Visibility\): add component [\#1174](https://github.com/Semantic-Org/Semantic-UI-React/pull/1174) ([mariolamacchia](https://github.com/mariolamacchia))
+
+**Fixed bugs:**
+
+- Button: Icon button has different width if content is 0 \(number\) [\#1691](https://github.com/Semantic-Org/Semantic-UI-React/issues/1691)
+- Progress: indicating bar displaying wrong color with decimal value [\#1671](https://github.com/Semantic-Org/Semantic-UI-React/issues/1671)
+- Dropdown won't open in IE if openOnFocus is false [\#1315](https://github.com/Semantic-Org/Semantic-UI-React/issues/1315)
+
+**Closed issues:**
+
+- Failed to Compile error using react-scripts@1.0.2 [\#1700](https://github.com/Semantic-Org/Semantic-UI-React/issues/1700)
+- Button: redundant prop in Vertical Group example [\#1697](https://github.com/Semantic-Org/Semantic-UI-React/issues/1697)
+- fix\(Modal\): your description [\#1696](https://github.com/Semantic-Org/Semantic-UI-React/issues/1696)
+- Render button with content and icon take about 70ms [\#1686](https://github.com/Semantic-Org/Semantic-UI-React/issues/1686)
+- Modal:  Flickering when size is set to Large or small [\#1675](https://github.com/Semantic-Org/Semantic-UI-React/issues/1675)
+- Suggestion: Arbitrary objects passed to Search results? [\#1670](https://github.com/Semantic-Org/Semantic-UI-React/issues/1670)
+- Popup with grid + map doesn't layout properly [\#1660](https://github.com/Semantic-Org/Semantic-UI-React/issues/1660)
+- Search component value [\#1655](https://github.com/Semantic-Org/Semantic-UI-React/issues/1655)
+- Dropdown: Should work with keys instead of values [\#1634](https://github.com/Semantic-Org/Semantic-UI-React/issues/1634)
+- Docs -\> Form -\> Props -\> Size property - Showing lodash 'without' function [\#1563](https://github.com/Semantic-Org/Semantic-UI-React/issues/1563)
+
+**Merged pull requests:**
+
+- docs\(Introduction\): fix declarative example [\#1704](https://github.com/Semantic-Org/Semantic-UI-React/pull/1704) ([aabustamante](https://github.com/aabustamante))
+- docs\(Button\): remove redundant prop in Vertical Group example [\#1699](https://github.com/Semantic-Org/Semantic-UI-React/pull/1699) ([andreipfeiffer](https://github.com/andreipfeiffer))
+- docs\(Dropdown\): fix world icon in search example [\#1695](https://github.com/Semantic-Org/Semantic-UI-React/pull/1695) ([aabustamante](https://github.com/aabustamante))
+- fix\(Checkbox\): fix value prop types [\#1694](https://github.com/Semantic-Org/Semantic-UI-React/pull/1694) ([fabien0102](https://github.com/fabien0102))
+- fix\(Button\): fix handling of icon class [\#1693](https://github.com/Semantic-Org/Semantic-UI-React/pull/1693) ([layershifter](https://github.com/layershifter))
+- chore\(package\): update chai-enzyme to version 0.7.0 [\#1692](https://github.com/Semantic-Org/Semantic-UI-React/pull/1692) ([greenkeeperio-bot](https://github.com/greenkeeperio-bot))
+- feat\(Dropdown\): Add minCharacters prop [\#1690](https://github.com/Semantic-Org/Semantic-UI-React/pull/1690) ([dyesseyumba](https://github.com/dyesseyumba))
+- docs\(Form\): fix typo [\#1685](https://github.com/Semantic-Org/Semantic-UI-React/pull/1685) ([gitname](https://github.com/gitname))
+- docs\(Introduction\): fix typo [\#1684](https://github.com/Semantic-Org/Semantic-UI-React/pull/1684) ([gitname](https://github.com/gitname))
+- feat\(Search\): noResultsMessage prop can be a node [\#1683](https://github.com/Semantic-Org/Semantic-UI-React/pull/1683) ([b0gok](https://github.com/b0gok))
+- docs\(types\): fix type definitions [\#1678](https://github.com/Semantic-Org/Semantic-UI-React/pull/1678) ([layershifter](https://github.com/layershifter))
+- feat\(Grid\): add inverted prop and usage example to docs [\#1677](https://github.com/Semantic-Org/Semantic-UI-React/pull/1677) ([josie11](https://github.com/josie11))
+- fix\(Progress\): use floor for data-percent attribute [\#1672](https://github.com/Semantic-Org/Semantic-UI-React/pull/1672) ([patrickgaskill](https://github.com/patrickgaskill))
+- fix\(Dropdown\): fix compatibility with IE [\#1667](https://github.com/Semantic-Org/Semantic-UI-React/pull/1667) ([layershifter](https://github.com/layershifter))
+- Update gh-pages to version 1.0.0 🚀 [\#1662](https://github.com/Semantic-Org/Semantic-UI-React/pull/1662) ([greenkeeperio-bot](https://github.com/greenkeeperio-bot))
+- fix\(docs\): fix compatibility with IE [\#1659](https://github.com/Semantic-Org/Semantic-UI-React/pull/1659) ([layershifter](https://github.com/layershifter))
+- fix\(Dropdown\): fix key handling for options [\#1639](https://github.com/Semantic-Org/Semantic-UI-React/pull/1639) ([davezuko](https://github.com/davezuko))
+- docs\(bundlers\): add webpack 2 example [\#1497](https://github.com/Semantic-Org/Semantic-UI-React/pull/1497) ([layershifter](https://github.com/layershifter))
+
 ## [v0.68.3](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.68.3) (2017-05-06)
 [Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.68.2...v0.68.3)
 
@@ -45,7 +123,7 @@
 **Merged pull requests:**
 
 - chore\(package\): update mocha@3.3.0 [\#1615](https://github.com/Semantic-Org/Semantic-UI-React/pull/1615) ([greenkeeperio-bot](https://github.com/greenkeeperio-bot))
-- fix\(acc\): fix default prop dev warning [\#1613](https://github.com/Semantic-Org/Semantic-UI-React/pull/1613) ([sirJconny](https://github.com/sirJconny))
+- fix\(acc\): fix default prop dev warning [\#1613](https://github.com/Semantic-Org/Semantic-UI-React/pull/1613) ([jonmajorc](https://github.com/jonmajorc))
 - test\(typings\): initial tests for typings [\#1611](https://github.com/Semantic-Org/Semantic-UI-React/pull/1611) ([layershifter](https://github.com/layershifter))
 - chore\(package\): update copy-to-clipboard@3.0.6 [\#1610](https://github.com/Semantic-Org/Semantic-UI-React/pull/1610) ([greenkeeperio-bot](https://github.com/greenkeeperio-bot))
 
@@ -1609,7 +1687,7 @@
 
 **Merged pull requests:**
 
-- fix\(Button\): render `labeled` as a \<button\> [\#597](https://github.com/Semantic-Org/Semantic-UI-React/pull/597) ([yesmin](https://github.com/yesmin))
+- fix\(Button\): render `labeled` as a \<button\> [\#597](https://github.com/Semantic-Org/Semantic-UI-React/pull/597) ([dmitriyshmatov](https://github.com/dmitriyshmatov))
 
 ## [v0.52.4](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.52.4) (2016-10-03)
 [Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.52.3...v0.52.4)
@@ -1650,7 +1728,7 @@
 **Implemented enhancements:**
 
 - feat\(Table\): add `attached` prop [\#591](https://github.com/Semantic-Org/Semantic-UI-React/issues/591)
-- feat\(Table\): add `attached` prop [\#593](https://github.com/Semantic-Org/Semantic-UI-React/pull/593) ([yesmin](https://github.com/yesmin))
+- feat\(Table\): add `attached` prop [\#593](https://github.com/Semantic-Org/Semantic-UI-React/pull/593) ([dmitriyshmatov](https://github.com/dmitriyshmatov))
 
 ## [v0.52.1](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.52.1) (2016-10-03)
 [Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.52.0...v0.52.1)

docs/app/Components/IconSearch/IconSearch.js

@@ -57,7 +57,7 @@ export default class IconSearch extends Component {
   state = { search: '', includeSimilar: true }
 
   componentDidMount() {
-    const input = document.querySelector('#docs-icon-set-input input')
+    const input = document.querySelector('#docs-icon-set-input')
     input.focus()
   }
 

docs/app/Examples/addons/TextArea/Usage/TextAreaExample.js → docs/app/Examples/addons/TextArea/Types/TextAreaExampleTextArea.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Form, TextArea } from 'semantic-ui-react'
 
-const TextAreaExample = () => (
+const TextAreaExampleTextArea = () => (
   <Form>
     <TextArea placeholder='Tell us more' />
   </Form>
 )
 
-export default TextAreaExample
+export default TextAreaExampleTextArea

docs/app/Examples/addons/TextArea/Types/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const TextAreaTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='TextArea'
+      description='A default TextArea.'
+      examplePath='addons/TextArea/Types/TextAreaExampleTextArea'
+    />
+  </ExampleSection>
+)
+
+export default TextAreaTypesExamples

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleAutoHeight.js

@@ -3,7 +3,7 @@ import { Form, TextArea } from 'semantic-ui-react'
 
 const TextAreaExampleAutoHeight = () => (
   <Form>
-    <TextArea placeholder='Try adding multiple lines' autoHeight />
+    <TextArea autoHeight placeholder='Try adding multiple lines' />
   </Form>
 )
 

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleAutoHeightMinHeight.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form, TextArea } from 'semantic-ui-react'
+
+const TextAreaExampleAutoHeightMinHeight = () => (
+  <Form>
+    <TextArea autoHeight placeholder='Try adding multiple lines' style={{ minHeight: 100 }} />
+  </Form>
+)
+
+export default TextAreaExampleAutoHeightMinHeight

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleAutoHeightRows.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form, TextArea } from 'semantic-ui-react'
+
+const TextAreaExampleAutoHeightRows = () => (
+  <Form>
+    <TextArea autoHeight placeholder='Try adding multiple lines' rows={1} />
+  </Form>
+)
+
+export default TextAreaExampleAutoHeightRows

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleMinHeight.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form, TextArea } from 'semantic-ui-react'
+
+const TextAreaExampleMinHeight = () => (
+  <Form>
+    <TextArea placeholder='Tell us more' style={{ minHeight: 100 }} />
+  </Form>
+)
+
+export default TextAreaExampleMinHeight

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleRows.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form, TextArea } from 'semantic-ui-react'
+
+const TextAreaExampleRows = () => (
+  <Form>
+    <TextArea rows={2} placeholder='Tell us more' />
+  </Form>
+)
+
+export default TextAreaExampleRows

docs/app/Examples/addons/TextArea/Usage/index.js

@@ -1,20 +1,36 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const TextAreaTypesExamples = () => (
+const TextAreaUsageExamples = () => (
   <ExampleSection title='Usage'>
     <ComponentExample
-      title='TextArea'
-      description='A default TextArea.'
-      examplePath='addons/TextArea/Usage/TextAreaExample'
+      title='Min Height'
+      description='A TextArea can have a minimum height.'
+      examplePath='addons/TextArea/Usage/TextAreaExampleMinHeight'
     />
+
+    <ComponentExample
+      title='Rows'
+      description='A TextArea can have a minimum number of rows.'
+      examplePath='addons/TextArea/Usage/TextAreaExampleRows'
+    />
+
     <ComponentExample
       title='Auto Height'
       description='A TextArea can adjust its height to fit its contents.'
       examplePath='addons/TextArea/Usage/TextAreaExampleAutoHeight'
     />
+    <ComponentExample
+      description='A TextArea can adjust its height to fit its contents and depend on minHeight value.'
+      examplePath='addons/TextArea/Usage/TextAreaExampleAutoHeightMinHeight'
+    />
+    <ComponentExample
+      description='A TextArea can adjust its height to fit its contents and depend on rows value.'
+      examplePath='addons/TextArea/Usage/TextAreaExampleAutoHeightRows'
+    />
   </ExampleSection>
 )
 
-export default TextAreaTypesExamples
+export default TextAreaUsageExamples

docs/app/Examples/addons/TextArea/index.js

@@ -1,8 +1,11 @@
 import React from 'react'
+
+import Types from './Types'
 import Usage from './Usage'
 
 const TextAreaExamples = () => (
   <div>
+    <Types />
     <Usage />
   </div>
 )

docs/app/Examples/behaviors/Visibility/Wireframe.js

@@ -1,34 +1,34 @@
 import React from 'react'
 import { Divider, Image, Segment } from 'semantic-ui-react'
 
-export default (props) => (
+export default () => (
   <Segment>
-    <Image src='http://semantic-ui.com/images/wireframe/centered-paragraph.png' />
+    <Image src='/assets/images/wireframe/centered-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    <Image src='/assets/images/wireframe/short-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
+    <Image src='/assets/images/wireframe/media-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+    <Image src='/assets/images/wireframe/paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/centered-paragraph.png' />
+    <Image src='/assets/images/wireframe/centered-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    <Image src='/assets/images/wireframe/short-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
+    <Image src='/assets/images/wireframe/media-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+    <Image src='/assets/images/wireframe/paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    <Image src='/assets/images/wireframe/short-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/centered-paragraph.png' />
+    <Image src='/assets/images/wireframe/centered-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    <Image src='/assets/images/wireframe/short-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
+    <Image src='/assets/images/wireframe/media-paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+    <Image src='/assets/images/wireframe/paragraph.png' />
     <Divider />
-    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    <Image src='/assets/images/wireframe/short-paragraph.png' />
   </Segment>
 )

docs/app/Examples/collections/Table/Variations/TableExampleSortable.js

@@ -42,13 +42,13 @@ export default class TableExampleSortable extends Component {
       <Table sortable celled fixed>
         <Table.Header>
           <Table.Row>
-            <Table.HeaderCell sorted={column === 'name' && direction} onClick={this.handleSort('name')}>
+            <Table.HeaderCell sorted={column === 'name' ? direction : null} onClick={this.handleSort('name')}>
               Name
             </Table.HeaderCell>
-            <Table.HeaderCell sorted={column === 'age' && direction} onClick={this.handleSort('age')}>
+            <Table.HeaderCell sorted={column === 'age' ? direction : null} onClick={this.handleSort('age')}>
               Age
             </Table.HeaderCell>
-            <Table.HeaderCell sorted={column === 'gender' && direction} onClick={this.handleSort('gender')}>
+            <Table.HeaderCell sorted={column === 'gender' ? direction : null} onClick={this.handleSort('gender')}>
               Gender
             </Table.HeaderCell>
           </Table.Row>

docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Button } from 'semantic-ui-react'
 
 const ButtonExampleGroupVertical = () => (
-  <Button.Group attached='top' vertical>
+  <Button.Group vertical>
     <Button>Feed</Button>
     <Button>Messages</Button>
     <Button>Events</Button>

docs/app/Examples/elements/Button/Usage/ButtonExampleFocus.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { Button, Grid } from 'semantic-ui-react'
+
+export default class ButtonExampleFocus extends Component {
+  handleClick = () => this.ref.focus()
+
+  handleRef = c => (this.ref = c)
+
+  render() {
+    return (
+      <Grid>
+        <Grid.Column width={8}>
+          <Button
+            content='A button that can be focused'
+            primary
+            ref={this.handleRef}
+          />
+        </Grid.Column>
+        <Grid.Column width={8}>
+          <Button
+            content='Set focused'
+            onClick={this.handleClick}
+          />
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/elements/Button/Usage/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const ButtonUsageExamples = () => (
+  <ExampleSection title='Usage'>
+    <ComponentExample
+      title='Focus'
+      description='A button can be focused.'
+      examplePath='elements/Button/Usage/ButtonExampleFocus'
+    />
+  </ExampleSection>
+)
+
+export default ButtonUsageExamples