From 69521f878f2b9483fed9f787ab58ef358b09093f Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 24 Nov 2015 22:18:00 +0100 Subject: [PATCH] Finish IconButton --- .eslintrc | 2 +- components/button/Button.jsx | 17 +-- components/button/IconButton.jsx | 6 +- components/button/_config.scss | 9 +- components/button/readme.md | 17 ++- components/button/style.scss | 132 +++++++----------- components/index.js | 3 +- .../modules/examples/button_example_1.txt | 9 +- spec/components/button.jsx | 7 +- 9 files changed, 78 insertions(+), 124 deletions(-) diff --git a/.eslintrc b/.eslintrc index 62ff84a8..6f9f9cd8 100644 --- a/.eslintrc +++ b/.eslintrc @@ -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, diff --git a/components/button/Button.jsx b/components/button/Button.jsx index 9cbe40c6..bd4aa90f 100644 --- a/components/button/Button.jsx +++ b/components/button/Button.jsx @@ -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, diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx index 5b62ff14..41447077 100644 --- a/components/button/IconButton.jsx +++ b/components/button/IconButton.jsx @@ -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, diff --git a/components/button/_config.scss b/components/button/_config.scss index 9243c9d7..45ec2f95 100644 --- a/components/button/_config.scss +++ b/components/button/_config.scss @@ -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; diff --git a/components/button/readme.md b/components/button/readme.md index 9e77ee29..82dc9a87 100644 --- a/components/button/readme.md +++ b/components/button/readme.md @@ -4,7 +4,7 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c ```jsx -import Button from 'react-toolbox/lib/button'; +import {Button, IconButton} from 'react-toolbox/lib/button'; const GithubIcon = () => ( @@ -22,10 +22,8 @@ const TestButtons = () => ( - - + + @@ -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. diff --git a/components/button/style.scss b/components/button/style.scss index 4caa1692..d92050f5 100644 --- a/components/button/style.scss +++ b/components/button/style.scss @@ -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); diff --git a/components/index.js b/components/index.js index 0ef64c85..04708dd9 100644 --- a/components/index.js +++ b/components/index.js @@ -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'; diff --git a/docs/app/components/layout/main/modules/examples/button_example_1.txt b/docs/app/components/layout/main/modules/examples/button_example_1.txt index d929b590..75d2a168 100644 --- a/docs/app/components/layout/main/modules/examples/button_example_1.txt +++ b/docs/app/components/layout/main/modules/examples/button_example_1.txt @@ -13,16 +13,11 @@ const ButtonsTest = () => ( - - - - + + - ); diff --git a/spec/components/button.jsx b/spec/components/button.jsx index ee218acc..806ca247 100644 --- a/spec/components/button.jsx +++ b/spec/components/button.jsx @@ -23,7 +23,12 @@ const ButtonTest = () => ( - + + + + + +