Merge branch 'master' of https://github.com/soyjavi/react-toolbox

* 'master' of https://github.com/soyjavi/react-toolbox:
  Add slider documentation
  Move button style to local css

components/button/index.cjsx

@@ -1,6 +1,6 @@
-require './style'
+localCSS = require './style'
-FontIcon = require "../font_icon"
+FontIcon = require '../font_icon'
-Ripple   = require "../ripple"
+Ripple   = require '../ripple'
 
 module.exports = React.createClass
 
@@ -14,11 +14,12 @@ module.exports = React.createClass
     type        : React.PropTypes.string
 
   getDefaultProps: ->
-    className   : ""
+    className   : ''
-    type        : "square"
+    type        : 'raised'
 
   getInitialState: ->
     loading     : @props.loading
+    focused     : false
     ripple      : undefined
 
   # -- Lifecycle
@@ -29,19 +30,26 @@ module.exports = React.createClass
   onClick: (event) ->
     event.preventDefault()
     client = event.target.getBoundingClientRect?()
-    @setState ripple:
+    @setState
-                left  : event.pageX - client?.left
+      focused: true
-                top   : event.pageY - client?.top
+      ripple:
-                width : (client?.width * 2.5)
+        left  : event.pageX - client?.left
+        top   : event.pageY - client?.top
+        width : (client?.width * 2.5)
     @props.onClick? event, @
+    setTimeout (=> @setState focused: false), 450
 
   # -- Render
   render: ->
-    <button data-component-button={@props.type}
+    className  = @props.className
+    className += " #{@props.type}" if @props.type
+    className += ' focused'        if @state.focused
+
+    <button data-react-toolbox='button'
             onClick={@onClick}
-            className={@props.className}
+            className={localCSS.root + ' ' + className}
             disabled={@props.disabled or @state.loading}
-            data-flex="horizontal center">
+            data-flex='horizontal center'>
       { <FontIcon value={@props.icon} /> if @props.icon }
       { <abbr>{@props.caption}</abbr> if @props.caption }
       <Ripple origin={@state.ripple} loading={@state.loading} />

components/button/style.styl

@@ -1,6 +1,6 @@
 @import '../constants'
 
-[data-component-button]
+:local(.root)
   z-index                       : 1
   display                       : inline-block
   position                      : relative
@@ -10,22 +10,63 @@
   text-decoration               : none
   white-space                   : nowrap
   border                        : none
-  transition-property             background-color, box-shadow
+  transition-property           : background-color, box-shadow
-  transition-duration             ANIMATION_DURATION
+  transition-duration           : ANIMATION_DURATION
-  transition-timing-function      ANIMATION_EASE
+  transition-timing-function    : ANIMATION_EASE
+
+  &.raised, &.flat
+    padding                       : (SPACE / 2) (SPACE / 1.25)
+    font-size                     : FONT_SIZE_SMALL
+    text-transform                : uppercase
+    border-radius                 : (SPACE / 8)
+    > *
+      vertical-align              : bottom
+    > .icon
+      font-size                   : FONT_SIZE_BIG
+      margin-right                : (SPACE / 2)
+    > abbr
+      font-weight                 : FONT_WEIGHT_BOLD
+    &.anchor
+      width                       : 100%
+
+  &.flat
+    background-color          : transparent
+    &:not(.primary):not(.accent)
+      > [data-component-ripple]
+        background-color      : alpha(TEXT, 12.5%)
+    &.primary
+      color                   : PRIMARY
+      > [data-component-ripple]
+        background-color      : alpha(PRIMARY, 12.5%)
+    &.accent
+      color                   : ACCENT
+      > [data-component-ripple]
+        background-color      : alpha(ACCENT, 12.5%)
+
+  &.floating
+    width                         : BUTTON_CIRCLE_HEIGHT
+    height                        : BUTTON_CIRCLE_HEIGHT
+    font-size                     : (BUTTON_CIRCLE_HEIGHT / 2.25)
+    border-radius                 : 50%
+    > .icon
+      line-height                 : BUTTON_CIRCLE_HEIGHT
+
+  // Overrides
+  &[disabled]
+    color                     : darken(DIVIDER, 25%)
+    background-color          : DIVIDER
 
-  // -- Style
   &:not([disabled])
     cursor                      : pointer
     &:hover, &:active, &:focus
       outline                   : 0
-    &:not(.transparent)
+    &:not(.flat)
       box-shadow                  ZDEPTH_SHADOW_1
       &:not(.primary):not(.accent)
         color                   : TEXT
         background-color        : WHITE
-      &:hover
+      &.focused
-        box-shadow                ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
+        box-shadow              : ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
       &.primary, &.accent
         color                   : WHITE
       &.primary
@@ -33,54 +74,8 @@
       &.accent
         background-color        : ACCENT
 
-    &.transparent
-      background-color          : transparent
-      &:not(.primary):not(.accent)
-        &:hover
-          background-color      : alpha(TEXT, 12.5%)
-      &.primary
-        color                   : PRIMARY
-        &:hover
-          background-color      : alpha(PRIMARY, 12.5%)
-      &.accent
-        color                   : ACCENT
-        &:hover
-          background-color      : alpha(ACCENT, 12.5%)
     &:not(.primary):not(.accent) > [data-component-ripple]
       background-color          : DIVIDER
-  &[disabled]
-    color                       : darken(DIVIDER, 25%)
-    &:not(.transparent)
-      background-color          : DIVIDER
-    &.transparent
-      background-color          : transparent
 
-  // -- Layout
-  &:not(.transparent) ~ &:not(:last-child)
-    margin-left                 : SPACE
   > *
-    pointer-events              : none
+    pointer-events: none
-
-[data-component-button="square"]
-  padding                       : (SPACE / 2) (SPACE / 1.25)
-  font-size                     : FONT_SIZE_SMALL
-  text-transform                : uppercase
-  border-radius                 : (SPACE / 8)
-  > *
-    vertical-align              : bottom
-  > .icon
-    font-size                   : FONT_SIZE_BIG
-    margin-right                : (SPACE / 2)
-  > abbr
-    font-weight                 : FONT_WEIGHT_BOLD
-
-  &.anchor
-    width                       : 100%
-
-[data-component-button="circle"]
-  width                         : BUTTON_CIRCLE_HEIGHT
-  height                        : BUTTON_CIRCLE_HEIGHT
-  font-size                     : (BUTTON_CIRCLE_HEIGHT / 2.25)
-  border-radius                 : 50%
-  > .icon
-    line-height                 : BUTTON_CIRCLE_HEIGHT

components/slider/slider.md

@@ -0,0 +1,42 @@
+# Slider
+
+```javascript
+var Slider = require('react-toolbox/components/slider');
+
+// Normal slider with max, min and initial value
+<Slider min={0} max={255} value={140} />
+
+// Slider with editable field, pinned and with steps
+<Slider editable pinned step={1} min={0} max={10} step={1}/>
+```
+
+## Properties
+
+| Name          | Type    | Default   | Description|
+| ------------- |:-------:|:--------- |:---------- |
+| **editable**  | Boolean | `false`   | If true, an input is shown and user can use it to set the slider value.|
+| **pinned**    | Boolean | `false`   | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
+| **snaps**     | Boolean | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
+| **step**      | Number  | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
+| **min**       | Number  | `0`       | Minimum value permitted.|
+| **max**       | Number  | `100`     | Maximum value permitted.|
+| **value**     | Number  | `0`       | Value of the current value.|
+| **className** | String  | `''`      | Additional class name to provide custom styling.|
+
+## Methods
+
+#### getValue
+Returns the value of the slider.
+
+```
+slider_instance.getValue();
+> 150
+```
+
+#### setValue
+Sets the value of the slider.
+
+```
+var new_value = 340
+slider_instance.setValue(new_value);
+```

spec/components/button.cjsx

@@ -13,19 +13,23 @@ module.exports = React.createClass
   # -- Render
   render: ->
     <section>
-
       <h2>Buttons</h2>
       <p>lorem ipsum...</p>
       <Button caption="Login"/>
+
+      <Button caption="Login" type="flat" />
+      <Button caption="Primary" className="primary" icon="access_alarm" type="flat" />
+      <Button caption="Secondary" className="accent" type="flat" />
+      <Button caption="Disabled" disabled type="flat" />
+
       <Button caption="Primary" className="primary" icon="access_alarm" />
       <Button caption="Secondary" className="accent" />
       <Button caption="Disabled" disabled />
       <Button caption="loading" loading />
 
-      <Button type="circle" icon="access_alarm" />
+      <Button type="floating" icon="access_alarm" />
-      <Button type="circle" icon="explore" className="primary" />
+      <Button type="floating" icon="explore" className="primary" />
-      <Button type="circle" icon="zoom_in" className="accent" />
+      <Button type="floating" icon="zoom_in" className="accent" />
-      <Button type="circle" icon="input" disabled />
+      <Button type="floating" icon="input" disabled />
-      <Button type="circle" icon="zoom_in" loading />
+      <Button type="floating" icon="zoom_in" loading />
-
     </section>