feat(Button): add focus method (#1764)

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

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

@@ -1,10 +1,12 @@
 import React from 'react'
-import Types from './Types'
-import Groups from './Groups'
+
 import Content from './Content'
+import Groups from './Groups'
+import GroupVariations from './GroupVariations'
 import States from './States'
+import Types from './Types'
 import Variations from './Variations'
-import GroupVariations from './GroupVariations'
+import Usage from './Usage'
 
 const ButtonExamples = () => (
   <div>
@@ -14,6 +16,7 @@ const ButtonExamples = () => (
     <States />
     <Variations />
     <GroupVariations />
+    <Usage />
   </div>
 )
 

src/elements/Button/Button.js

@@ -175,6 +175,8 @@ class Button extends Component {
     if (ElementType === 'div') return 0
   }
 
+  focus = () => _.invoke(this.ref, 'focus')
+
   handleClick = (e) => {
     const { disabled, onClick } = this.props
 
@@ -186,6 +188,8 @@ class Button extends Component {
     if (onClick) onClick(e, this.props)
   }
 
+  handleRef = c => (this.ref = c)
+
   hasIconClass = () => {
     const { labelPosition, children, content, icon } = this.props
 
@@ -257,7 +261,7 @@ class Button extends Component {
       debug('render children:', { classes })
 
       return (
-        <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
+        <ElementType {...rest} className={classes} onClick={this.handleClick} ref={this.handleRef} tabIndex={tabIndex}>
           {children}
         </ElementType>
       )
@@ -277,7 +281,7 @@ class Button extends Component {
       return (
         <ElementType {...rest} className={containerClasses} onClick={this.handleClick}>
           {labelPosition === 'left' && labelElement}
-          <button className={classes} tabIndex={tabIndex}>
+          <button className={classes} ref={this.handleRef} tabIndex={tabIndex}>
             {Icon.create(icon)} {content}
           </button>
           {(labelPosition === 'right' || !labelPosition) && labelElement}
@@ -290,7 +294,7 @@ class Button extends Component {
       debug('render icon && !label:', { classes })
 
       return (
-        <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
+        <ElementType {...rest} className={classes} onClick={this.handleClick} ref={this.handleRef} tabIndex={tabIndex}>
           {Icon.create(icon)} {content}
         </ElementType>
       )
@@ -300,7 +304,7 @@ class Button extends Component {
     debug('render default:', { classes })
 
     return (
-      <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
+      <ElementType {...rest} className={classes} onClick={this.handleClick} ref={this.handleRef} tabIndex={tabIndex}>
         {content}
       </ElementType>
     )

test/specs/elements/Button/Button-test.js

@@ -71,6 +71,22 @@ describe('Button', () => {
     })
   })
 
+  describe('focus', () => {
+    it('can be set via a ref', () => {
+      const mountNode = document.createElement('div')
+      document.body.appendChild(mountNode)
+
+      const wrapper = mount(<Button />, { attachTo: mountNode })
+      wrapper.instance().focus()
+
+      const button = document.querySelector('button')
+      document.activeElement.should.equal(button)
+
+      wrapper.detach()
+      document.body.removeChild(mountNode)
+    })
+  })
+
   describe('icon', () => {
     it('adds className icon', () => {
       shallow(<Button icon='user' />)