Add neutral prop to avoid to inherit neutral styles
parent
2349d692ae
commit
4403003895
|
@ -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);
|
||||
|
|
|
@ -13,6 +13,7 @@ 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
|
||||
};
|
||||
|
@ -20,6 +21,7 @@ class IconButton extends React.Component {
|
|||
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);
|
||||
|
||||
|
|
|
@ -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.|
|
||||
|
|
Loading…
Reference in New Issue