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,
|
inverse: React.PropTypes.bool,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
mini: React.PropTypes.bool,
|
mini: React.PropTypes.bool,
|
||||||
|
neutral: React.PropTypes.bool,
|
||||||
onMouseLeave: React.PropTypes.func,
|
onMouseLeave: React.PropTypes.func,
|
||||||
onMouseUp: React.PropTypes.func,
|
onMouseUp: React.PropTypes.func,
|
||||||
primary: React.PropTypes.bool,
|
primary: React.PropTypes.bool,
|
||||||
|
@ -30,6 +31,7 @@ class Button extends React.Component {
|
||||||
flat: false,
|
flat: false,
|
||||||
floating: false,
|
floating: false,
|
||||||
mini: false,
|
mini: false,
|
||||||
|
neutral: true,
|
||||||
primary: false,
|
primary: false,
|
||||||
raised: false
|
raised: false
|
||||||
};
|
};
|
||||||
|
@ -46,13 +48,13 @@ class Button extends React.Component {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { accent, children, className, flat, floating, href, icon,
|
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 element = href ? 'a' : 'button';
|
||||||
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||||
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
|
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
|
||||||
|
|
||||||
const classes = ClassNames([style[shape]], {
|
const classes = ClassNames([style[shape]], {
|
||||||
[style[level]]: className === '',
|
[style[level]]: neutral,
|
||||||
[style.mini]: mini,
|
[style.mini]: mini,
|
||||||
[style.inverse]: inverse
|
[style.inverse]: inverse
|
||||||
}, className);
|
}, className);
|
||||||
|
|
|
@ -13,6 +13,7 @@ class IconButton extends React.Component {
|
||||||
href: React.PropTypes.string,
|
href: React.PropTypes.string,
|
||||||
icon: React.PropTypes.string,
|
icon: React.PropTypes.string,
|
||||||
inverse: React.PropTypes.bool,
|
inverse: React.PropTypes.bool,
|
||||||
|
neutral: React.PropTypes.bool,
|
||||||
primary: React.PropTypes.bool,
|
primary: React.PropTypes.bool,
|
||||||
type: React.PropTypes.string
|
type: React.PropTypes.string
|
||||||
};
|
};
|
||||||
|
@ -20,6 +21,7 @@ class IconButton extends React.Component {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
accent: false,
|
accent: false,
|
||||||
className: '',
|
className: '',
|
||||||
|
neutral: true,
|
||||||
primary: false
|
primary: false
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -28,11 +30,11 @@ class IconButton extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
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 element = href ? 'a' : 'button';
|
||||||
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||||
const classes = ClassNames([style.toggle], {
|
const classes = ClassNames([style.toggle], {
|
||||||
[style[level]]: className === '',
|
[style[level]]: neutral,
|
||||||
[style.inverse]: inverse
|
[style.inverse]: inverse
|
||||||
}, className);
|
}, 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. |
|
| `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.|
|
| `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.|
|
| `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.|
|
| `primary` | `false` | `false` | Indicates if the button should have primary color.|
|
||||||
| `raised` | `Boolean` | `false` | If true, the button will have a raised look. |
|
| `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.|
|
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
|
||||||
|
|
Loading…
Reference in New Issue