fix(Button): Disabled Button with Label gets duplicate opacity (Seman…

…tic-Org#1026)
luski · Dec 16, 2016 · 5d2e5c4 · 5d2e5c4
1 parent 6b59245
commit 5d2e5c4
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import cxd from 'classnames/dedupe'
 import React, { Component, PropTypes } from 'react'
 
 import {
@@ -221,7 +222,6 @@ class Button extends Component {
       useKeyOnly(basic, 'basic'),
       useKeyOnly(circular, 'circular'),
       useKeyOnly(compact, 'compact'),
-      useKeyOnly(disabled, 'disabled'),
       useValueAndKey(floated, 'floated'),
       useKeyOnly(fluid, 'fluid'),
       useKeyOnly(icon === true || icon && (labelPosition || !children && !content), 'icon'),
@@ -233,14 +233,15 @@ class Button extends Component {
       useKeyOnly(secondary, 'secondary'),
       useKeyOnly(toggle, 'toggle'),
     )
+    const wrapperClasses = cx(useKeyOnly(disabled, 'disabled'))
     const rest = getUnhandledProps(Button, this.props)
     const ElementType = getElementType(Button, this.props, () => {
       if (label || attached) return 'div'
     })
     const tabIndex = ElementType === 'div' ? 0 : undefined
 
     if (children) {
-      const classes = cx('ui', baseClasses, labeledClasses, 'button', className)
+      const classes = cx('ui', baseClasses, wrapperClasses, labeledClasses, 'button', className)
       debug('render children:', { classes })
       return (
         <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
@@ -250,8 +251,11 @@ class Button extends Component {
     }
 
     if (label) {
-      const classes = cx('ui', baseClasses, 'button', className)
-      const containerClasses = cx('ui', labeledClasses, 'button', className, useKeyOnly(disabled, 'disabled'))
+      let classes = cx('ui', baseClasses, 'button', className)
+      if (className && className.indexOf('disabled') !== -1) {
+        classes = cxd(classes, {disabled: false})
+      }
+      const containerClasses = cx('ui', labeledClasses, 'button', className, wrapperClasses)
       debug('render label:', { classes, containerClasses }, this.props)
       const labelElement = Label.create(label, {
         basic: true,
@@ -269,7 +273,7 @@ class Button extends Component {
     }
 
     if (icon && !label) {
-      const classes = cx('ui', labeledClasses, baseClasses, 'button', className)
+      const classes = cx('ui', labeledClasses, baseClasses, 'button', className, wrapperClasses)
       debug('render icon && !label:', { classes })
       return (
         <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
@@ -278,7 +282,7 @@ class Button extends Component {
       )
     }
 
-    const classes = cx('ui', labeledClasses, baseClasses, 'button', className)
+    const classes = cx('ui', labeledClasses, baseClasses, 'button', className, wrapperClasses)
     debug('render default:', { classes })
 
     return (