Finish IconButton
Javi Velasco
parent
6495af36bd
commit
69521f878f
|
|
@ -225,7 +225,7 @@
|
|||
"react/no-danger": 0,
|
||||
"react/no-did-mount-set-state": 0,
|
||||
"react/no-did-update-set-state": 1,
|
||||
"react/no-multi-comp": 1,
|
||||
"react/no-multi-comp": 0,
|
||||
"react/no-unknown-property": 1,
|
||||
"react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
|
||||
"react/react-in-jsx-scope": 1,
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ class Button extends React.Component {
|
|||
primary: React.PropTypes.bool,
|
||||
raised: React.PropTypes.bool,
|
||||
ripple: React.PropTypes.bool,
|
||||
toggle: React.PropTypes.bool,
|
||||
tooltip: React.PropTypes.string,
|
||||
tooltipDelay: React.PropTypes.number,
|
||||
type: React.PropTypes.string
|
||||
|
|
@ -38,8 +37,7 @@ class Button extends React.Component {
|
|||
mini: false,
|
||||
primary: false,
|
||||
raised: false,
|
||||
ripple: true,
|
||||
toggle: false
|
||||
ripple: true
|
||||
};
|
||||
|
||||
handleMouseDown = (event) => {
|
||||
|
|
@ -48,19 +46,13 @@ class Button extends React.Component {
|
|||
if (this.props.onMouseDown) this.props.onMouseDown(event);
|
||||
};
|
||||
|
||||
handleTouchStart = (event) => {
|
||||
events.pauseEvent(event);
|
||||
if (this.refs.ripple) this.refs.ripple.start(event.touches[0], true);
|
||||
if (this.props.onTouchStart) this.props.onTouchStart(event);
|
||||
};
|
||||
|
||||
render () {
|
||||
const {accent, className, flat, floating, href, icon, inverse, label,
|
||||
loading, mini, primary, raised, ripple, toggle,
|
||||
loading, mini, primary, raised, ripple,
|
||||
tooltip, tooltipDelay, ...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';
|
||||
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
|
||||
|
||||
const classes = ClassNames([ style[shape], style[level] ], {
|
||||
[style.mini]: mini,
|
||||
|
|
@ -72,8 +64,7 @@ class Button extends React.Component {
|
|||
href,
|
||||
className: classes,
|
||||
disabled: this.props.disabled || this.props.loading,
|
||||
onMouseDown: this.handleMouseDown,
|
||||
onTouchStart: this.handleTouchStart
|
||||
onMouseDown: this.handleMouseDown
|
||||
};
|
||||
|
||||
return React.createElement(element, props,
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ class Button extends React.Component {
|
|||
accent: false,
|
||||
className: '',
|
||||
primary: false,
|
||||
raised: false,
|
||||
ripple: true
|
||||
};
|
||||
|
||||
|
|
@ -41,10 +40,7 @@ class Button extends React.Component {
|
|||
primary, ripple, tooltip, tooltipDelay, ...others} = this.props;
|
||||
const element = href ? 'a' : 'button';
|
||||
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||
|
||||
const classes = ClassNames([ style.toggle, style[level] ], {
|
||||
[style.inverse]: inverse
|
||||
}, className);
|
||||
const classes = ClassNames([style.toggle, style[level]], {[style.inverse]: inverse}, className);
|
||||
|
||||
const props = {
|
||||
...others,
|
||||
|
|
|
|||
|
|
@ -7,17 +7,14 @@ $button-primary-color: $color-primary !default;
|
|||
$button-accent-color-contrast: $color-primary-contrast !default;
|
||||
$button-accent-color-hover: rgba($color-accent, 0.20) !default;
|
||||
$button-accent-color: $color-accent !default;
|
||||
$button-default-text-color: $color-black !default;
|
||||
$button-disabled-text-color: rgba($color-black, 0.26) !default;
|
||||
$button-flat-color-hover: rgba($color-black, 0.26) !default;
|
||||
$button-disabled-background-color: rgba($color-black, 0.12) !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-floating-mini-height: $unit * 4;
|
||||
$button-floating-mini-font-size: $button-floating-mini-height / 2.25;
|
||||
$button-height: $unit * 3.6;
|
||||
$button-solid-background-color: rgba($palette-grey-500, 0.20) !default;
|
||||
$button-solid-disabled-background-color: rgba($color-black, 0.12) !default;
|
||||
$button-squared-icon-margin: $unit * .6;
|
||||
$button-squared-min-width: 9 * $unit;
|
||||
$button-squared-padding: 0 $unit * 1.2;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c
|
|||
|
||||
<!-- example -->
|
||||
```jsx
|
||||
import Button from 'react-toolbox/lib/button';
|
||||
import {Button, IconButton} from 'react-toolbox/lib/button';
|
||||
|
||||
const GithubIcon = () => (
|
||||
<svg viewBox="0 0 284 277">
|
||||
|
|
@ -22,10 +22,8 @@ const TestButtons = () => (
|
|||
<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>
|
||||
<IconButton icon='favorite' accent />
|
||||
<IconButton primary><GithubIcon /></IconButton>
|
||||
<Button icon='add' label='Add this' flat primary />
|
||||
<Button icon='add' label='Add this' flat disabled />
|
||||
</div>
|
||||
|
|
@ -42,17 +40,22 @@ const TestButtons = () => (
|
|||
| `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). |
|
||||
| `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.|
|
||||
| `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` | `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. |
|
||||
| `tooltipDelay` | `Number` | | Amount of time in milliseconds before the tooltip is visible.|
|
||||
|
||||
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.
|
||||
|
||||
## Icon Button
|
||||
|
||||
Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles.
|
||||
|
||||
We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding aspect properties.
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $button-default-text-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
|
@ -33,6 +32,7 @@
|
|||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
|
@ -42,6 +42,11 @@
|
|||
[data-react-toolbox="ripple"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
&[disabled] {
|
||||
color: $button-disabled-text-color;
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
%squared {
|
||||
|
|
@ -58,71 +63,55 @@
|
|||
}
|
||||
}
|
||||
|
||||
%disabled {
|
||||
color: $button-disabled-text-color;
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.flat {
|
||||
@extend %button;
|
||||
@extend %squared;
|
||||
background: transparent;
|
||||
&:hover {
|
||||
background: $button-flat-color-hover;
|
||||
%solid {
|
||||
&[disabled] {
|
||||
@include shadow-2dp();
|
||||
background-color: $button-disabled-background-color;
|
||||
}
|
||||
&:active {
|
||||
@include shadow-4dp();
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background: $button-flat-color-hover;
|
||||
}
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
@include focus-shadow();
|
||||
}
|
||||
}
|
||||
|
||||
.raised {
|
||||
@extend %button;
|
||||
@extend %squared;
|
||||
@extend %solid;
|
||||
@include shadow-2dp();
|
||||
background: $button-solid-background-color;
|
||||
&:active {
|
||||
@include shadow-4dp();
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
}
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
@include shadow-2dp();
|
||||
background-color: $button-solid-disabled-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.flat {
|
||||
@extend %button;
|
||||
@extend %squared;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.floating {
|
||||
@extend %button;
|
||||
@extend %solid;
|
||||
width: $button-floating-height;
|
||||
height: $button-floating-height;
|
||||
font-size: $button-floating-font-size;
|
||||
background: $button-solid-background-color;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
|
||||
0 1px 1px 0 rgba(0, 0, 0, .24);
|
||||
&:active {
|
||||
@include shadow-4dp();
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
}
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
@include shadow-2dp();
|
||||
background-color: $button-solid-disabled-background-color;
|
||||
}
|
||||
.icon {
|
||||
line-height: $button-floating-height;
|
||||
}
|
||||
[data-react-toolbox="ripple"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.mini {
|
||||
width: $button-floating-mini-height;
|
||||
height: $button-floating-mini-height;
|
||||
font-size: $button-floating-mini-font-size;
|
||||
.icon {
|
||||
line-height: $button-floating-mini-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
|
|
@ -130,10 +119,7 @@
|
|||
width: $button-height;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
}
|
||||
> .icon {
|
||||
> .icon, svg {
|
||||
font-size: $button-toggle-font-size;
|
||||
line-height: $button-height;
|
||||
vertical-align: middle;
|
||||
|
|
@ -143,38 +129,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $button-primary-color-contrast;
|
||||
background: $button-primary-color;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $button-primary-color;
|
||||
&:focus:not(:active) {
|
||||
background: $button-primary-color-hover;
|
||||
}
|
||||
}
|
||||
&.flat:hover {
|
||||
background: $button-primary-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.accent:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $button-accent-color-contrast;
|
||||
background-color: $button-accent-color;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $button-accent-color;
|
||||
&:focus:not(:active) {
|
||||
background: $button-accent-color-hover;
|
||||
}
|
||||
}
|
||||
&.flat:hover {
|
||||
background: $button-accent-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.neutral:not([disabled]) {
|
||||
&:not(.inverse) {
|
||||
&.raised, &.floating {
|
||||
|
|
@ -209,11 +163,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mini.floating {
|
||||
width: $button-floating-height-mini;
|
||||
height: $button-floating-height-mini;
|
||||
font-size: $button-floating-mini-font-size;
|
||||
.icon {
|
||||
line-height: $button-floating-height-mini;
|
||||
@mixin btn-colors($name, $color, $background, $hover) {
|
||||
.#{$name}:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $color;
|
||||
background: $background;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $background;
|
||||
&:focus:not(:active) {
|
||||
background: $hover;
|
||||
}
|
||||
}
|
||||
&.flat:hover {
|
||||
background: $hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include btn-colors('primary', $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
|
||||
@include btn-colors('accent', $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ import './utils/polyfills'; // Import polyfills for IE11
|
|||
export App from './app';
|
||||
export AppBar from './app_bar';
|
||||
export Autocomplete from './autocomplete';
|
||||
export Button from './button';
|
||||
export Button from './button/Button';
|
||||
export IconButton from './button/IconButton';
|
||||
export * from './card';
|
||||
export Checkbox from './checkbox';
|
||||
export DatePicker from './date_picker';
|
||||
|
|
|
|||
|
|
@ -13,16 +13,11 @@ const ButtonsTest = () => (
|
|||
<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>
|
||||
<IconButton icon='favorite' accent />
|
||||
<IconButton primary><GithubIcon /></IconButton>
|
||||
<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>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,12 @@ const ButtonTest = () => (
|
|||
<Button icon='add' floating primary disabled />
|
||||
<Button icon='add' floating accent mini />
|
||||
<IconButton icon='favorite' accent />
|
||||
<IconButton primary><GithubIcon/></IconButton>
|
||||
<IconButton icon='favorite' inverse />
|
||||
<IconButton icon='favorite' />
|
||||
<IconButton icon='favorite' disabled />
|
||||
<IconButton primary tooltip='Bookmark Tooltip' tooltipDelay={1000}>
|
||||
<GithubIcon/>
|
||||
</IconButton>
|
||||
<Button icon='add' label='Add this' flat primary />
|
||||
<Button icon='add' label='Add this' flat disabled />
|
||||
<Button icon='bookmark' label='Bookmark' raised primary loading />
|
||||
|
|
|
|||
Loading…
Reference in New Issue