vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Better variables and props for button

old
Javi Velasco 2015-10-21 00:48:24 +02:00
parent 4511d8a4fd
commit 614b1b14ba
8 changed files with 68 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/button/_config.scss
View File

@ -1,15 +1,20 @@
$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
$button-accent-color: unquote("rgb(#{$color-accent})") !default;
$button-border-radius: 0.2 * $unit;
$button-default-text-color: unquote("rgb(#{$color-black})") !default; $button-default-text-color: unquote("rgb(#{$color-black})") !default;
$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
$button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default; $button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default; $button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default; $button-floating-font-size: $unit * 2.4;
$button-primary-color: unquote("rgb(#{$color-primary})") !default; $button-floating-height-mini: $unit * 4;
$button-floating-mini-font-size: $button-floating-height-mini / 2.25;
$button-floating-height: $unit * 5.6;
$button-height: $unit * 3.6;
$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default; $button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default; $button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
$button-accent-color: unquote("rgb(#{$color-accent})") !default; $button-primary-color: unquote("rgb(#{$color-primary})") !default;
$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default; $button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
$button-accent-color-active: unquote("rgba(#{$color-accent}, 0.40)") !default; $button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default; $button-squared-icon-margin: $unit * .6;
$button-height: $unit * 3.6; $button-squared-min-width: 9 * $unit;
$button-floating-height: $unit * 5.6; $button-squared-padding: 0 $unit * 1.2;
$button-floating-height-mini: $unit * 4;

40
components/button/index.jsx
View File

@ -5,63 +5,63 @@ import Ripple from '../ripple';
import style from './style.scss'; import style from './style.scss';
import events from '../utils/events'; import events from '../utils/events';
export default React.createClass({ const Button = React.createClass({
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
displayName: 'Button',
propTypes: { propTypes: {
accent: React.PropTypes.bool,
className: React.PropTypes.string, className: React.PropTypes.string,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
icon: React.PropTypes.string, icon: React.PropTypes.string,
primary: React.PropTypes.bool, kind: React.PropTypes.string,
accent: React.PropTypes.bool,
label: React.PropTypes.string, label: React.PropTypes.string,
loading: React.PropTypes.bool, loading: React.PropTypes.bool,
mini: React.PropTypes.bool,
primary: React.PropTypes.bool,
ripple: React.PropTypes.bool, ripple: React.PropTypes.bool,
type: React.PropTypes.string type: React.PropTypes.string
}, },
getDefaultProps () { getDefaultProps () {
return { return {
accent: false,
className: '', className: '',
ripple: true, kind: 'flat',
type: 'flat' loading: false,
mini: false,
primary: false,
ripple: true
}; };
}, },
getInitialState () {
return { loading: this.props.loading };
},
handleMouseDown (event) { handleMouseDown (event) {
events.pauseEvent(event); events.pauseEvent(event);
this.refs.ripple.start(event); this.refs.ripple.start(event);
}, },
render () { render () {
let className = style[this.props.type]; let className = style[this.props.kind];
if (!this.props.primary && !this.props.accent) className += ` ${style.primary}`;
if (this.props.className) className += ` ${this.props.className}`; if (this.props.className) className += ` ${this.props.className}`;
if (this.props.primary) className += ` ${style.primary}`;
if (this.props.accent) className += ` ${style.accent}`;
if (this.props.mini) className += ` ${style.mini}`;
return ( return (
<button <button
data-react-toolbox='button'
{...this.props} {...this.props}
type=''
label='' label=''
data-toolbox='button'
className={className} className={className}
disabled={this.props.disabled || this.state.loading} data-react-toolbox='button'
onMouseDown={this.handleMouseDown} onMouseDown={this.handleMouseDown}
disabled={this.props.disabled || this.props.loading}
> >
{ this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null } { this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null }
{ this.props.icon ? <FontIcon className={style.icon} value={this.props.icon}/> : null } { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon}/> : null }
{ this.props.label ? <abbr className={style.label}>{this.props.label}</abbr> : null } { this.props.label ? <abbr className={style.label}>{this.props.label}</abbr> : null }
</button> </button>
); );
},
loading (value) {
this.setState({loading: value});
} }
}); });
export default Button;

58
components/button/style.scss
View File

@ -3,10 +3,10 @@
%button { %button {
position: relative; position: relative;
z-index: 1;
display: inline-block; display: inline-block;
height: $button-height; height: $button-height;
flex-direction: row; flex-direction: row;
align-items: center;
overflow: hidden; overflow: hidden;
color: $button-default-text-color; color: $button-default-text-color;
text-align: center; text-align: center;
@ -16,24 +16,21 @@
border: 0; border: 0;
outline: none; outline: none;
transition: box-shadow .2s $animation-curve-fast-out-linear-in, transition: box-shadow .2s $animation-curve-fast-out-linear-in,
background-color .2s $animation-curve-default, background-color .2s $animation-curve-default,
color .2s $animation-curve-default; color .2s $animation-curve-default;
align-content: center; align-content: center;
align-items: center;
justify-content: center; justify-content: center;
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;
} }
} }
%squared { %squared {
min-width: 9 * $unit; min-width: $button-squared-min-width;
padding: 0 $unit * 1.2; padding: $button-squared-padding;
border-radius: $border-radius; border-radius: $button-border-radius;
.icon { .icon {
margin-right: $unit * .6; margin-right: $button-squared-icon-margin;
font-size: 120%; font-size: 120%;
vertical-align: middle; vertical-align: middle;
} }
@ -45,7 +42,6 @@
cursor: auto; cursor: auto;
} }
//-- Local styles
.label { .label {
@include typo-button(); @include typo-button();
line-height: $button-height; line-height: $button-height;
@ -55,15 +51,12 @@
@extend %button; @extend %button;
@extend %squared; @extend %squared;
background: transparent; background: transparent;
&:hover { &:hover {
background: $button-flat-color-hover; background: $button-flat-color-hover;
} }
&:focus:not(:active) { &:focus:not(:active) {
background: $button-flat-color-hover; background: $button-flat-color-hover;
} }
&[disabled] { &[disabled] {
@extend %disabled; @extend %disabled;
} }
@ -74,15 +67,12 @@
@extend %squared; @extend %squared;
@include shadow-2dp(); @include shadow-2dp();
background: $button-solid-background-color; background: $button-solid-background-color;
&:active { &:active {
@include shadow-4dp(); @include shadow-4dp();
} }
&:focus:not(:active) { &:focus:not(:active) {
@include focus-shadow(); @include focus-shadow();
} }
&[disabled] { &[disabled] {
@extend %disabled; @extend %disabled;
@include shadow-2dp(); @include shadow-2dp();
@ -94,76 +84,64 @@
@extend %button; @extend %button;
width: $button-floating-height; width: $button-floating-height;
height: $button-floating-height; height: $button-floating-height;
font-size: $unit * 2.4; font-size: $button-floating-font-size;
background: $button-solid-background-color; background: $button-solid-background-color;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24); box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
0 1px 1px 0 rgba(0, 0, 0, .24);
&:active { &:active {
@include shadow-4dp(); @include shadow-4dp();
} }
&:focus:not(:active) { &:focus:not(:active) {
@include focus-shadow(); @include focus-shadow();
} }
&[disabled] { &[disabled] {
@extend %disabled; @extend %disabled;
@include shadow-2dp(); @include shadow-2dp();
background-color: $button-solid-disabled-background-color; background-color: $button-solid-disabled-background-color;
} }
.icon { .icon {
line-height: $button-floating-height; line-height: $button-floating-height;
} }
} }
:global(.primary):not([disabled]) { .primary:not([disabled]) {
&.raised, &.floating { &.raised, &.floating {
color: $button-primary-color-contrast; color: $button-primary-color-contrast;
background: $button-primary-color; background: $button-primary-color;
} }
&.flat { &.flat {
color: $button-primary-color; color: $button-primary-color;
&:hover { &:hover {
background: $button-primary-color-hover; background: $button-primary-color-hover;
} }
&:focus:not(:active) { &:focus:not(:active) {
background: $button-primary-color-hover; background: $button-primary-color-hover;
} }
} }
} }
:global(.accent):not([disabled]) { .accent:not([disabled]) {
&.raised, &.floating { &.raised, &.floating {
color: $button-accent-color-contrast; color: $button-accent-color-contrast;
background-color: $button-accent-color; background-color: $button-accent-color;
} }
&.flat { &.flat {
color: $button-accent-color; color: $button-accent-color;
&:hover { &:hover {
background: $button-accent-color-hover; background: $button-accent-color-hover;
} }
&:focus:not(:active) { &:focus:not(:active) {
background: $button-accent-color-hover; background: $button-accent-color-hover;
} }
} }
} }
:global(.mini) { .mini.floating {
&.floating { width: $button-floating-height-mini;
width: $button-floating-height-mini; height: $button-floating-height-mini;
height: $button-floating-height-mini; font-size: $button-floating-mini-font-size;
font-size: ($button-floating-height-mini / 2.25); .icon {
line-height: $button-floating-height-mini;
.icon {
line-height: $button-floating-height-mini;
}
} }
} }

6
components/snackbar/index.js → components/snackbar/index.jsx
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import style from './style'; import style from './style';
import Button from '../button'; import Button from '../button';
import FontIcon from '../font_icon'; import FontIcon from '../font_icon';
@ -33,9 +32,9 @@ export default React.createClass({
if (this.props.action) { if (this.props.action) {
return ( return (
<Button <Button
label={this.props.action} kind='flat'
type='flat'
className={style.button} className={style.button}
label={this.props.action}
onClick={this.handleClick} onClick={this.handleClick}
/> />
); );
@ -69,5 +68,4 @@ export default React.createClass({
}, this.props.timeout * 1000); }, this.props.timeout * 1000);
} }
} }
}); });

16
spec/components/button.jsx
View File

@ -9,14 +9,14 @@ export default React.createClass({
<section> <section>
<h5>Buttons</h5> <h5>Buttons</h5>
<p>lorem ipsum...</p> <p>lorem ipsum...</p>
<Button type="raised" className="primary" label="Bookmark" icon="bookmark" /> <Button kind="raised" primary label="Bookmark" icon="bookmark" />
<Button type="flat" className="accent" label="Inbox" icon="inbox" /> <Button kind="flat" accent label="Inbox" icon="inbox" />
<Button type="floating" className="primary" icon="add" /> <Button kind="floating" primary icon="add" />
<Button type="floating" className="primary" disabled icon="add" /> <Button kind="floating" primary disabled icon="add" />
<Button type="floating" className="accent mini" icon="add" /> <Button kind="floating" accent mini icon="add" />
<Button type="flat" className="primary" icon="add" label="Add this" /> <Button kind="flat" primary icon="add" label="Add this" />
<Button type="raised" className="primary" label="Bookmark" icon="bookmark" loading /> <Button kind="raised" primary label="Bookmark" icon="bookmark" loading />
<Button type="flat" disabled className="" icon="add" label="Add this" /> <Button kind="flat" disabled icon="add" label="Add this" />
</section> </section>
); );
} }

2
spec/components/dialog.jsx
View File

@ -27,7 +27,7 @@ export default React.createClass({
<section> <section>
<h5>Dialog</h5> <h5>Dialog</h5>
<p>lorem ipsum...</p> <p>lorem ipsum...</p>
<Button type='raised' label='Show Dialog' onClick={this.onShow} /> <Button kind='raised' label='Show Dialog' onClick={this.onShow} />
<Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}> <Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
<p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p> <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
</Dialog> </Dialog>

4
spec/components/drawer.jsx
View File

@ -26,8 +26,8 @@ export default React.createClass({
</Drawer> </Drawer>
<nav> <nav>
<Button className='accent' label='Drawer left hideable' type='raised' onClick={this.onClick.bind(null, 'left', 'show')} /> <Button accent label='Drawer left hideable' kind='raised' onClick={this.onClick.bind(null, 'left', 'show')} />
<Button className='primary' label='Drawer right' type='raised' onClick={this.onClick.bind(null, 'right', 'show')} /> <Button primary label='Drawer right' kind='raised' onClick={this.onClick.bind(null, 'right', 'show')} />
</nav> </nav>
</section> </section>
); );

2
spec/components/snackbar.jsx
View File

@ -19,7 +19,7 @@ export default React.createClass({
<section> <section>
<h5>Snackbars & Toasts</h5> <h5>Snackbars & Toasts</h5>
<p>lorem ipsum...</p> <p>lorem ipsum...</p>
<Button label='Show snackbar' onClick={this.handleSnackbar} type='raised' /> <Button label='Show snackbar' kind='raised' onClick={this.handleSnackbar} />
<Snackbar <Snackbar
ref='snackbar' ref='snackbar'
action='Dismiss' action='Dismiss'