fix(Button): update handling of floated prop (#1489)

* fix(Button): update handling of floated prop * fix(Button): update handling of floated prop
Semantic-Org · Mar 25, 2017 · 9c2a29f · 9c2a29f
1 parent 1493c55
commit 9c2a29f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
@@ -160,15 +160,10 @@ class Button extends Component {
   static Group = ButtonGroup
   static Or = ButtonOr
 
-  handleClick = (e) => {
-    const { disabled, onClick } = this.props
+  computeElementType = () => {
+    const { attached, label } = this.props
 
-    if (disabled) {
-      e.preventDefault()
-      return
-    }
-
-    if (onClick) onClick(e, this.props)
+    if (!_.isNil(attached) || !_.isNil(label)) return 'div'
   }
 
   computeTabIndex = ElementType => {
@@ -179,6 +174,17 @@ class Button extends Component {
     if (ElementType === 'div') return 0
   }
 
+  handleClick = (e) => {
+    const { disabled, onClick } = this.props
+
+    if (disabled) {
+      e.preventDefault()
+      return
+    }
+
+    if (onClick) onClick(e, this.props)
+  }
+
   render() {
     const {
       active,
@@ -207,10 +213,6 @@ class Button extends Component {
       toggle,
     } = this.props
 
-    const labeledClasses = cx(
-      useKeyOrValueAndKey(labelPosition || !!label, 'labeled'),
-    )
-
     const baseClasses = cx(
       color,
       size,
@@ -229,18 +231,23 @@ class Button extends Component {
       useKeyOnly(toggle, 'toggle'),
       useKeyOrValueAndKey(animated, 'animated'),
       useKeyOrValueAndKey(attached, 'attached'),
+    )
+    const labeledClasses = cx(
+      useKeyOrValueAndKey(labelPosition || !!label, 'labeled'),
+    )
+    const wrapperClasses = cx(
+      useKeyOnly(disabled, 'disabled'),
       useValueAndKey(floated, 'floated'),
     )
-    const wrapperClasses = cx(useKeyOnly(disabled, 'disabled'))
+
     const rest = getUnhandledProps(Button, this.props)
-    const ElementType = getElementType(Button, this.props, () => {
-      if (!_.isNil(label) || !_.isNil(attached)) return 'div'
-    })
+    const ElementType = getElementType(Button, this.props, this.computeElementType)
     const tabIndex = this.computeTabIndex(ElementType)
 
     if (!_.isNil(children)) {
       const classes = cx('ui', baseClasses, wrapperClasses, labeledClasses, 'button', className)
       debug('render children:', { classes })
+
       return (
         <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
           {children}
@@ -252,9 +259,11 @@ class Button extends Component {
       basic: true,
       pointing: labelPosition === 'left' ? 'right' : 'left',
     })
+
     if (labelElement) {
       const classes = cx('ui', baseClasses, 'button', className)
       const containerClasses = cx('ui', labeledClasses, 'button', className, wrapperClasses)
+
       debug('render label:', { classes, containerClasses }, this.props)
 
       return (
@@ -271,6 +280,7 @@ class Button extends Component {
     if (!_.isNil(icon) && _.isNil(label)) {
       const classes = cx('ui', labeledClasses, baseClasses, 'button', className, wrapperClasses)
       debug('render icon && !label:', { classes })
+
       return (
         <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
           {Icon.create(icon)} {content}

diff --git a/test/specs/elements/Button/Button-test.js b/test/specs/elements/Button/Button-test.js
@@ -106,9 +106,18 @@ describe('Button', () => {
     })
     it('contains children without disabled class when disabled attribute is set', () => {
       const wrapper = shallow(<Button label='hi' disabled />)
+
+      wrapper.should.have.className('disabled')
       wrapper.find('Label').should.not.have.className('disabled')
       wrapper.find('button').should.not.have.className('disabled')
     })
+    it('contains children without floated class when floated attribute is set', () => {
+      const wrapper = shallow(<Button label='hi' floated='left' />)
+
+      wrapper.should.have.className('floated')
+      wrapper.find('Label').should.not.have.className('floated')
+      wrapper.find('button').should.not.have.className('floated')
+    })
     it('creates a basic pointing label', () => {
       shallow(<Button label='foo' />)
         .should.have.exactly(1).descendants('Label[basic][pointing]')