From 614b1b14bafad985fa7c9ceef90b2dcf295d4e8d Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 21 Oct 2015 00:48:24 +0200 Subject: [PATCH] Better variables and props for button --- components/button/_config.scss | 27 ++++++---- components/button/index.jsx | 40 +++++++------- components/button/style.scss | 58 +++++++-------------- components/snackbar/{index.js => index.jsx} | 6 +-- spec/components/button.jsx | 16 +++--- spec/components/dialog.jsx | 2 +- spec/components/drawer.jsx | 4 +- spec/components/snackbar.jsx | 2 +- 8 files changed, 68 insertions(+), 87 deletions(-) rename components/snackbar/{index.js => index.jsx} (98%) diff --git a/components/button/_config.scss b/components/button/_config.scss index dbdf6056..15e0ef0b 100644 --- a/components/button/_config.scss +++ b/components/button/_config.scss @@ -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-flat-color-hover: 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-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default; -$button-primary-color: unquote("rgb(#{$color-primary})") !default; +$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default; +$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-accent-color: unquote("rgb(#{$color-accent})") !default; -$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default; -$button-accent-color-active: unquote("rgba(#{$color-accent}, 0.40)") !default; -$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default; -$button-height: $unit * 3.6; -$button-floating-height: $unit * 5.6; -$button-floating-height-mini: $unit * 4; +$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; +$button-squared-min-width: 9 * $unit; +$button-squared-padding: 0 $unit * 1.2; diff --git a/components/button/index.jsx b/components/button/index.jsx index 77a54f62..5afbf27a 100644 --- a/components/button/index.jsx +++ b/components/button/index.jsx @@ -5,63 +5,63 @@ import Ripple from '../ripple'; import style from './style.scss'; import events from '../utils/events'; -export default React.createClass({ +const Button = React.createClass({ mixins: [PureRenderMixin], - displayName: 'Button', - propTypes: { + accent: React.PropTypes.bool, className: React.PropTypes.string, disabled: React.PropTypes.bool, icon: React.PropTypes.string, - primary: React.PropTypes.bool, - accent: React.PropTypes.bool, + kind: React.PropTypes.string, label: React.PropTypes.string, loading: React.PropTypes.bool, + mini: React.PropTypes.bool, + primary: React.PropTypes.bool, ripple: React.PropTypes.bool, type: React.PropTypes.string }, getDefaultProps () { return { + accent: false, className: '', - ripple: true, - type: 'flat' + kind: 'flat', + loading: false, + mini: false, + primary: false, + ripple: true }; }, - getInitialState () { - return { loading: this.props.loading }; - }, - handleMouseDown (event) { events.pauseEvent(event); this.refs.ripple.start(event); }, 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.primary) className += ` ${style.primary}`; + if (this.props.accent) className += ` ${style.accent}`; + if (this.props.mini) className += ` ${style.mini}`; return ( ); - }, - - loading (value) { - this.setState({loading: value}); } }); + +export default Button; diff --git a/components/button/style.scss b/components/button/style.scss index e13a3026..43c3d627 100644 --- a/components/button/style.scss +++ b/components/button/style.scss @@ -3,10 +3,10 @@ %button { position: relative; - z-index: 1; display: inline-block; height: $button-height; flex-direction: row; + align-items: center; overflow: hidden; color: $button-default-text-color; text-align: center; @@ -16,24 +16,21 @@ border: 0; outline: none; transition: box-shadow .2s $animation-curve-fast-out-linear-in, - background-color .2s $animation-curve-default, - color .2s $animation-curve-default; + background-color .2s $animation-curve-default, + color .2s $animation-curve-default; align-content: center; - align-items: center; justify-content: center; - &::-moz-focus-inner { border: 0; } } %squared { - min-width: 9 * $unit; - padding: 0 $unit * 1.2; - border-radius: $border-radius; - + min-width: $button-squared-min-width; + padding: $button-squared-padding; + border-radius: $button-border-radius; .icon { - margin-right: $unit * .6; + margin-right: $button-squared-icon-margin; font-size: 120%; vertical-align: middle; } @@ -45,7 +42,6 @@ cursor: auto; } -//-- Local styles .label { @include typo-button(); line-height: $button-height; @@ -55,15 +51,12 @@ @extend %button; @extend %squared; background: transparent; - &:hover { background: $button-flat-color-hover; } - &:focus:not(:active) { background: $button-flat-color-hover; } - &[disabled] { @extend %disabled; } @@ -74,15 +67,12 @@ @extend %squared; @include shadow-2dp(); background: $button-solid-background-color; - &:active { @include shadow-4dp(); } - &:focus:not(:active) { @include focus-shadow(); } - &[disabled] { @extend %disabled; @include shadow-2dp(); @@ -94,76 +84,64 @@ @extend %button; width: $button-floating-height; height: $button-floating-height; - font-size: $unit * 2.4; + 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); - + 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; } } -:global(.primary):not([disabled]) { +.primary:not([disabled]) { &.raised, &.floating { color: $button-primary-color-contrast; background: $button-primary-color; } - &.flat { color: $button-primary-color; - &:hover { background: $button-primary-color-hover; } - &:focus:not(:active) { background: $button-primary-color-hover; } } } -:global(.accent):not([disabled]) { +.accent:not([disabled]) { &.raised, &.floating { color: $button-accent-color-contrast; background-color: $button-accent-color; } - &.flat { color: $button-accent-color; - &:hover { background: $button-accent-color-hover; } - &:focus:not(:active) { background: $button-accent-color-hover; } } } -:global(.mini) { - &.floating { - width: $button-floating-height-mini; - height: $button-floating-height-mini; - font-size: ($button-floating-height-mini / 2.25); - - .icon { - line-height: $button-floating-height-mini; - } +.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; } } diff --git a/components/snackbar/index.js b/components/snackbar/index.jsx similarity index 98% rename from components/snackbar/index.js rename to components/snackbar/index.jsx index 9ca8a221..a8b037ef 100644 --- a/components/snackbar/index.js +++ b/components/snackbar/index.jsx @@ -1,6 +1,5 @@ import React from 'react'; import style from './style'; - import Button from '../button'; import FontIcon from '../font_icon'; @@ -33,9 +32,9 @@ export default React.createClass({ if (this.props.action) { return (