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

Change button properties and support toggle icon buttons

old
Javi Velasco 2015-11-17 21:49:27 +01:00
parent 28e97c15ad
commit 26cecdc23f
25 changed files with 156 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -27,7 +27,7 @@ import React from 'react';
import Button from 'react-toolbox/lib/button';
const CustomButton = () => (
<Button label="Hello world" kind="raised" accent />
<Button label="Hello world" raised accent />
);
export default CustomButton;

13
components/button/__test__/index.spec.jsx
View File

@ -7,12 +7,11 @@ describe('Button', function () {
let button;
describe('#render', function () {
it('uses flat and primary styles by default', function () {
it('uses flat and neutral styles by default', function () {
button = utils.shallowRenderComponent(Button);
expect(button.props.className).toContain(style.flat);
expect(button.props.className).toContain(style.primary);
expect(button.props.className).toContain(style.neutral);
});
it('renders accent button with accent style', function () {
@ -22,11 +21,11 @@ describe('Button', function () {
expect(button.props.className).toContain(style.accent);
});
it('1 renders mini button with mini style', function () {
button = utils.shallowRenderComponent(Button, { mini: true });
it('renders mini button with mini style', function () {
button = utils.shallowRenderComponent(Button, { floating: true, mini: true });
expect(button.props.className).toContain(style.flat);
expect(button.props.className).toContain(style.primary);
expect(button.props.className).toContain(style.floating);
expect(button.props.className).toContain(style.neutral);
expect(button.props.className).toContain(style.mini);
});

11
components/button/_config.scss
View File

@ -1,18 +1,21 @@
$button-neutral-color: unquote("rgb(#{$color-white})") !default;
$button-neutral-color-contrast: unquote("rgb(#{$palette-grey-900})") !default;
$button-neutral-color-hover: unquote("rgba(#{$palette-grey-900}, 0.20)") !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: unquote("rgb(#{$color-primary})") !default;
$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-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
$button-border-radius: 0.2 * $unit;
$button-floating-font-size: $unit * 2.4;
$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-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
$button-primary-color: unquote("rgb(#{$color-primary})") !default;
$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
$button-squared-icon-margin: $unit * .6;

24
components/button/index.jsx
View File

@ -10,13 +10,16 @@ class Button extends React.Component {
accent: React.PropTypes.bool,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
flat: React.PropTypes.bool,
floating: React.PropTypes.bool,
icon: React.PropTypes.string,
kind: React.PropTypes.string,
label: React.PropTypes.string,
loading: React.PropTypes.bool,
mini: React.PropTypes.bool,
primary: React.PropTypes.bool,
raised: React.PropTypes.bool,
ripple: React.PropTypes.bool,
toggle: React.PropTypes.bool,
tooltip: React.PropTypes.string,
type: React.PropTypes.string
};
@ -24,11 +27,14 @@ class Button extends React.Component {
static defaultProps = {
accent: false,
className: '',
kind: 'flat',
flat: false,
floating: false,
loading: false,
mini: false,
primary: false,
ripple: true
raised: false,
ripple: true,
toggle: false
};
handleMouseDown = (event) => {
@ -38,14 +44,14 @@ class Button extends React.Component {
};
render () {
let className = style[this.props.kind];
const {label, icon, loading, ripple, primary, accent, mini, kind, tooltip, href, ...others} = this.props;
const {accent, flat, floating, href, icon, label, loading, mini,
primary, raised, ripple, toggle, tooltip, ...others} = this.props;
const element = href ? 'a' : 'button';
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
let className = `${style[shape]} ${style[level]}`;
if (this.props.className) className += ` ${this.props.className}`;
if (!primary && !accent) className += ` ${style.primary}`;
if (primary) className += ` ${style.primary}`;
if (accent) className += ` ${style.accent}`;
if (mini) className += ` ${style.mini}`;
const props = {
@ -58,7 +64,7 @@ class Button extends React.Component {
return React.createElement(element, props,
ripple ? <Ripple ref='ripple' loading={loading}/> : null,
tooltip ? <Tooltip label={tooltip}/> : null,
tooltip ? <Tooltip className={style.tooltip} label={tooltip}/> : null,
icon ? <FontIcon className={style.icon} value={icon}/> : null,
label ? label : this.props.children
);

32
components/button/readme.md
View File

@ -14,14 +14,20 @@ const GithubIcon = () => (
const TestButtons = () => (
<div>
<Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
<GithubIcon /> Github Profile
<Button href='http://github.com/javivelasco' target='_blank' raised>
<GithubIcon /> Github
</Button>
<Button label="Flat button" />
<Button kind="raised" label="Raised" />
<Button kind="raised" label="Raised accent" accent icon="favorite" />
<Button className="primary" kind="floating" icon="add" />
<Button mini kind="floating" icon="add" accent />
<Button icon='bookmark' label='Bookmark' accent />
<Button icon='bookmark' label='Bookmark' raised primary />
<Button icon='inbox' label='Inbox' flat />
<Button icon='add' floating />
<Button icon='add' floating accent mini />
<Button icon='mood' toggle />
<Button toggle primary>
<GithubIcon />
</Button>
<Button icon='add' label='Add this' flat primary />
<Button icon='add' label='Add this' flat disabled />
</div>
);
```
@ -30,16 +36,22 @@ const TestButtons = () => (
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `accent` | `Bool` | `false` | Indicates if the button should have accent color.|
| `accent` | `Boolean` | `false` | Indicates if the button should have accent color.|
| `className` | `String` | `''` | Set a class to style the Component.|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
| `flat` | `Boolean` | `false` | If true, the button will have a flat look. |
| `floating` | `Boolean` | `false` | If true, the button will have a floating look. |
| `icon` | `String` | | Value of the icon (See icon component). |
| `kind` | `String` | `flat` | Type of the component, overwrite this property if you need set a different stylesheet.|
| `label` | `String` | | The text string to use for the name of the button.|
| `loading` | `Boolean` | `false` | If true, component will be disabled and show a loading animation.|
| `mini` | `Boolean` | `false` | To be used with floating button. If true the button will be smaller.|
| `onClick` | `Function` | | Callback called when the button is clicked.|
| `primary` | `false` | | If true, component will have the 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. |
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
| `toggle` | `Boolean` | `false` | If true, the button will have a toggle icon look. |
| `tooptip` | `String` | | The value will be shown as a tooltip when the button is hovered. |
By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.

53
components/button/style.scss
View File

@ -23,7 +23,7 @@
&::-moz-focus-inner {
border: 0;
}
> span {
> span:not(.tooltip) {
@include typo-button();
display: inline-block;
line-height: $button-height;
@ -33,7 +33,6 @@
display: inline-block;
width: 1em;
height: 1em;
margin-right: .5 * $unit;
font-size: 120%;
vertical-align: middle;
fill: currentColor;
@ -55,6 +54,9 @@
font-size: 120%;
vertical-align: middle;
}
> svg {
margin-right: .5 * $unit;
}
}
%disabled {
@ -78,6 +80,33 @@
}
}
.toggle {
@extend %button;
@extend %toggle;
width: $button-height;
background: transparent;
border-radius: 50%;
&:hover {
background: $button-flat-color-hover;
}
&:focus:not(:active) {
background: $button-flat-color-hover;
}
&[disabled] {
@extend %disabled;
}
.icon {
font-size: 120%;
vertical-align: middle;
}
.icon {
line-height: $button-height;
}
[data-react-toolbox="ripple"] {
border-radius: 50%;
}
}
.raised {
@extend %button;
@extend %squared;
@ -129,7 +158,7 @@
color: $button-primary-color-contrast;
background: $button-primary-color;
}
&.flat {
&.flat, &.toggle {
color: $button-primary-color;
&:hover {
background: $button-primary-color-hover;
@ -145,7 +174,7 @@
color: $button-accent-color-contrast;
background-color: $button-accent-color;
}
&.flat {
&.flat, &.toggle {
color: $button-accent-color;
&:hover {
background: $button-accent-color-hover;
@ -156,6 +185,22 @@
}
}
.neutral:not([disabled]) {
&.raised, &.floating {
color: $button-neutral-color-contrast;
background-color: $button-neutral-color;
}
&.flat, &.toggle {
color: $button-neutral-color-contrast;
&:hover {
background: $button-neutral-color-hover;
}
&:focus:not(:active) {
background: $button-neutral-color-hover;
}
}
}
.mini.floating {
width: $button-floating-height-mini;
height: $button-floating-height-mini;

2
components/drawer/readme.md
View File

@ -18,7 +18,7 @@ class DrawerTest extends React.Component {
render () {
return (
<div>
<Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
<Button label='Show Drawer' raised accent onClick={this.handleToggle} />
<Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
<h5>This is your Drawer.</h5>
<p>You can embed any content you want, for example a Menu.</p>

4
components/navigation/readme.md
View File

@ -12,8 +12,8 @@ const links = [
];
const actions = [
{ label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
{ label: 'Location', kind: 'raised', accent: true, icon: 'room'}
{ label: 'Alarm', raised: true, icon: 'access-alarm'},
{ label: 'Location', raised: true, accent: true, icon: 'room'}
];
const NavigationTest = () => (

1
components/snackbar/index.jsx
View File

@ -30,7 +30,6 @@ class Snackbar extends React.Component {
return (
<Button
className={style.button}
kind='flat'
label={this.props.action}
onClick={this.props.onClick}
/>

2
components/snackbar/readme.md
View File

@ -18,7 +18,7 @@ class SnackbarTest extends React.Component {
render () {
return (
<section>
<Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
<Button label='Show Snackbar' raised onClick={this.handleClick} />
<Snackbar
action='Nice'
icon='question-answer'

2
components/tooltip/readme.md
View File

@ -10,7 +10,7 @@ import Tooltip from 'react-toolbox/lib/tooltip';
const TooltipTest = () => (
<div>
<p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
<Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
<Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
</div>
);
```

2
docs/app/components/layout/home/index.jsx
View File

@ -50,7 +50,7 @@ const Home = () => (
</p>
<Link to='/components'>
<Button label='Try it now!' kind='raised' accent />
<Button label='Try it now!' raised accent />
</Link>
</section>

2
docs/app/components/layout/install/install.md
View File

@ -21,7 +21,7 @@ import React from 'react';
import Button from 'react-toolbox/lib/button';
const CustomButton = () => (
<Button label="Hello world" kind="raised" accent />
<Button label="Hello world" raised accent />
);
export default CustomButton;

4
docs/app/components/layout/main/index.jsx
View File

@ -12,8 +12,8 @@ import style from './style';
const LoadExampleButton = (props) => {
return (
<Button
raised
accent
kind='raised'
icon='code'
label='Load in playground'
onClick={props.onClick}
@ -76,9 +76,9 @@ class Main extends React.Component {
<Appbar className={style.appbar}/>
<Button
accent
floating
className={style['playground-button']}
icon={this.state.playground ? 'close' : 'code'}
kind='floating'
onClick={this.handlePlayGroundClick}
/>
<MainNavigation className={style.navigation} />

23
docs/app/components/layout/main/modules/examples/button_example_1.txt
View File

@ -6,14 +6,23 @@ const GithubIcon = () => (
const ButtonsTest = () => (
<div>
<Button href='http://github.com/javivelasco' target='_blank' kind='raised'>
<GithubIcon /> Github Profile
<Button href='http://github.com/javivelasco' target='_blank' raised>
<GithubIcon /> Github
</Button>
<Button label="Flat button" />
<Button kind="raised" label="Raised" />
<Button kind="raised" label="Raised accent" accent icon="favorite" />
<Button className="primary" kind="floating" icon="add" />
<Button mini kind="floating" icon="add" accent />
<Button icon='bookmark' label='Bookmark' accent />
<Button icon='bookmark' label='Bookmark' raised primary />
<Button icon='inbox' label='Inbox' flat />
<Button icon='add' floating />
<Button icon='add' floating primary />
<Button icon='add' floating primary disabled />
<Button icon='add' floating accent mini />
<Button icon='mood' toggle />
<Button toggle primary>
<GithubIcon />
</Button>
<Button icon='add' label='Add this' flat primary />
<Button icon='add' label='Add this' flat disabled />
<Button icon='bookmark' label='Bookmark' raised primary loading />
</div>
);

2
docs/app/components/layout/main/modules/examples/drawer_example_1.txt
View File

@ -10,7 +10,7 @@ class DrawerTest extends React.Component {
render () {
return (
<div>
<Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
<Button raised accent label='Show Drawer' onClick={this.handleToggle} />
<Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
<h5>This is your Drawer.</h5>
<p>You can embed any content you want, for example a Menu.</p>

4
docs/app/components/layout/main/modules/examples/navigation_example_1.txt
View File

@ -4,8 +4,8 @@ const links = [
];
const actions = [
{ label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
{ label: 'Location', kind: 'raised', accent: true, icon: 'room'}
{ label: 'Alarm', raised: true, icon: 'access-alarm'},
{ label: 'Location', raised: true, accent: true, icon: 'room'}
];
const NavigationTest = () => (

2
docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
View File

@ -20,7 +20,7 @@ class SnackbarTest extends React.Component {
render () {
return (
<section>
<Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
<Button label='Show snackbar' raised primary onClick={this.handleClick} />
<Snackbar
action='Dismiss'
active={this.state.active}

2
docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
View File

@ -1,7 +1,7 @@
const TooltipTest = () => (
<div>
<p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
<Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
<Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
</div>
);

25
spec/components/button.jsx
View File

@ -11,17 +11,22 @@ const ButtonTest = () => (
<section>
<h5>Buttons</h5>
<p>lorem ipsum...</p>
<Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
<GithubIcon /> Github Profile
<Button href='http://github.com/javivelasco' target='_blank' raised>
<GithubIcon /> Github
</Button>
<Button kind='raised' primary label='Bookmark' icon='bookmark' />
<Button kind='flat' accent label='Inbox' icon='inbox' />
<Button kind='floating' primary icon='add' />
<Button kind='floating' primary disabled icon='add' />
<Button kind='floating' accent mini icon='add' />
<Button kind='flat' primary icon='add' label='Add this' />
<Button kind='raised' primary label='Bookmark' icon='bookmark' loading />
<Button kind='flat' disabled icon='add' label='Add this' />
<Button icon='bookmark' label='Bookmark' accent />
<Button icon='bookmark' label='Bookmark' raised primary />
<Button icon='inbox' label='Inbox' flat />
<Button icon='add' floating />
<Button icon='add' floating primary />
<Button icon='add' floating primary disabled />
<Button icon='add' floating accent mini />
<Button icon='mood' toggle />
<Button toggle primary><GithubIcon /></Button>
<Button icon='add' label='Add this' flat primary />
<Button icon='add' label='Add this' flat disabled />
<Button icon='bookmark' label='Bookmark' raised primary loading />
</section>
);

6
spec/components/dialog.jsx
View File

@ -15,8 +15,8 @@ class DialogTest extends React.Component {
}
actions = [
{ label: 'Disagree', type: 'flat', className: 'primary', onClick: this.handleToggle },
{ label: 'Agree', type: 'flat', className: 'primary', onClick: this.handleToggle }
{ label: 'Disagree', primary: true, onClick: this.handleToggle },
{ label: 'Agree', primary: true, onClick: this.handleToggle }
];
render () {
@ -24,7 +24,7 @@ class DialogTest extends React.Component {
<section>
<h5>Dialog</h5>
<p>lorem ipsum...</p>
<Button kind='raised' label='Show Dialog' onClick={this.handleToggle} />
<Button label='Show Dialog' raised primary onClick={this.handleToggle} />
<Dialog
actions={this.actions}
active={this.state.active}

6
spec/components/drawer.jsx
View File

@ -29,12 +29,12 @@ class DrawerTest extends React.Component {
</Drawer>
<Drawer active={this.state.rightActive} type='right'>
<Button label='Close' onClick={this.handleToggleRight} />
<Button primary label='Close' onClick={this.handleToggleRight} />
</Drawer>
<nav>
<Button accent label='Drawer left' kind='raised' onClick={this.handleToggleLeft} />
<Button primary label='Drawer right' kind='raised' onClick={this.handleToggleRight} />
<Button label='Drawer left' raised primary onClick={this.handleToggleLeft} />
<Button label='Drawer right' raised accent onClick={this.handleToggleRight} />
</nav>
</section>
);

2
spec/components/snackbar.jsx
View File

@ -27,7 +27,7 @@ class SnackbarTest extends React.Component {
<section>
<h5>Snackbars & Toasts</h5>
<p>lorem ipsum...</p>
<Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
<Button label='Show snackbar' primary raised onClick={this.handleClick} />
<Snackbar
action='Dismiss'
active={this.state.active}

6
spec/components/tooltip.jsx
View File

@ -7,9 +7,9 @@ const TooltipTest = () => (
<section>
<h5>Tooltip</h5>
<p>Give information on :hover</p>
<Button kind='raised' primary label='Bookmark' icon='bookmark' tooltip='Bookmark Tooltip' />
<Button kind='floating' primary accent icon='add' tooltip='Floating Tooltip' />
<Button kind='floating' primary disabled icon='add' tooltip='Floating can not show' />
<Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' />
<Button icon='add' floating accent tooltip='Floating Tooltip' />
<Button icon='add' floating disabled tooltip='Floating can not be shown' />
<Input tooltip='lorem ipsum...'/>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.

2
spec/root.jsx
View File

@ -37,7 +37,7 @@ const Root = () => (
accent
className={style.github}
icon='web'
kind='floating'
floating
onClick={_hrefProject}
/>
</AppBarToolbox>