diff --git a/README.md b/README.md index 43a14e04..6a9bf531 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ import React from 'react'; import Button from 'react-toolbox/lib/button'; const CustomButton = () => ( - + const props = { + ...others, + href, + className, + disabled: this.props.disabled || this.props.loading, + onMouseDown: this.handleMouseDown + }; + + return React.createElement(element, props, + ripple ? : null, + tooltip ? : null, + icon ? : null, + label ? label : this.props.children ); } } diff --git a/components/button/readme.md b/components/button/readme.md index a094928a..0d73910d 100644 --- a/components/button/readme.md +++ b/components/button/readme.md @@ -6,13 +6,28 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c ```jsx import Button from 'react-toolbox/lib/button'; +const GithubIcon = () => ( + + + +); + const TestButtons = () => (
- + +
); ``` @@ -21,14 +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. diff --git a/components/button/style.scss b/components/button/style.scss index 4cb89d86..a8cb4334 100644 --- a/components/button/style.scss +++ b/components/button/style.scss @@ -7,7 +7,9 @@ display: inline-block; height: $button-height; flex-direction: row; + align-content: center; align-items: center; + justify-content: center; color: $button-default-text-color; text-align: center; text-decoration: none; @@ -16,18 +18,28 @@ 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; - align-content: center; - justify-content: center; - + background-color .2s $animation-curve-default, + color .2s $animation-curve-default; &::-moz-focus-inner { border: 0; } + > span:not(.tooltip) { + @include typo-button(); + display: inline-block; + line-height: $button-height; + vertical-align: middle; + } + > svg { + display: inline-block; + width: 1em; + height: 1em; + font-size: 120%; + vertical-align: middle; + fill: currentColor; + } > * { pointer-events: none; } - [data-react-toolbox="ripple"] { overflow: hidden; } @@ -42,6 +54,9 @@ font-size: 120%; vertical-align: middle; } + > svg { + margin-right: .5 * $unit; + } } %disabled { @@ -50,11 +65,6 @@ cursor: auto; } -.label { - @include typo-button(); - line-height: $button-height; -} - .flat { @extend %button; @extend %squared; @@ -70,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; @@ -121,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; @@ -137,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; @@ -148,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; diff --git a/components/drawer/readme.md b/components/drawer/readme.md index 51ca8bc9..e1add337 100644 --- a/components/drawer/readme.md +++ b/components/drawer/readme.md @@ -18,7 +18,7 @@ class DrawerTest extends React.Component { render () { return (
-
); ``` diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx index 41a66040..1167bc34 100644 --- a/docs/app/components/layout/home/index.jsx +++ b/docs/app/components/layout/home/index.jsx @@ -6,6 +6,18 @@ import Navigation from '../../navigation'; import style from './style'; import authors from './modules/authors'; +const GithubIcon = () => ( + + + +); + +const TwitterIcon = () => ( + + + +); + const Home = () => (
@@ -38,7 +50,7 @@ const Home = () => (

- + + + +