Add neutral prop to avoid to inherit neutral styles

react-toolbox · Dec 19, 2015 · 4403003 · 4403003
1 parent 2349d69
commit 4403003
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/components/button/Button.jsx b/components/button/Button.jsx
@@ -17,6 +17,7 @@ class Button extends React.Component {
     inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
     mini: React.PropTypes.bool,
+    neutral: React.PropTypes.bool,
     onMouseLeave: React.PropTypes.func,
     onMouseUp: React.PropTypes.func,
     primary: React.PropTypes.bool,
@@ -30,6 +31,7 @@ class Button extends React.Component {
     flat: false,
     floating: false,
     mini: false,
+    neutral: true,
     primary: false,
     raised: false
   };
@@ -46,13 +48,13 @@ class Button extends React.Component {
 
   render () {
     const { accent, children, className, flat, floating, href, icon,
-            inverse, label, mini, primary, raised, ...others} = this.props;
+            inverse, label, mini, neutral, primary, raised, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
 
     const classes = ClassNames([style[shape]], {
-      [style[level]]: className === '',
+      [style[level]]: neutral,
       [style.mini]: mini,
       [style.inverse]: inverse
     }, className);

diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
@@ -13,13 +13,15 @@ class IconButton extends React.Component {
     href: React.PropTypes.string,
     icon: React.PropTypes.string,
     inverse: React.PropTypes.bool,
+    neutral: React.PropTypes.bool,
     primary: React.PropTypes.bool,
     type: React.PropTypes.string
   };
 
   static defaultProps = {
     accent: false,
     className: '',
+    neutral: true,
     primary: false
   };
 
@@ -28,11 +30,11 @@ class IconButton extends React.Component {
   };
 
   render () {
-    const {accent, children, className, href, icon, inverse, primary, ...others} = this.props;
+    const {accent, children, className, href, icon, inverse, neutral, primary, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const classes = ClassNames([style.toggle], {
-      [style[level]]: className === '',
+      [style[level]]: neutral,
       [style.inverse]: inverse
     }, className);
 

diff --git a/components/button/readme.md b/components/button/readme.md
@@ -43,6 +43,7 @@ const TestButtons = () => (
 | `inverse`    | `Boolean`  |  | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
 | `label`     | `String`  |  | The text string to use for the name of the button.|
 | `mini`  | `Boolean` | `false`  | To be used with floating button. If true the button will be smaller.|
+| `neutral`  | `Boolean` | `true`  | Set it to `false` if you don't want the neutral styles to be included.|
 | `primary`  | `false` | `false` | Indicates if the button should have primary color.|
 | `raised`   | `Boolean`  | `false` | If true, the button will have a raised look. |
 | `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|