Move button style to local css

react-toolbox · Jul 29, 2015 · 606a836 · 606a836
1 parent fe073ee
commit 606a836
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 74 deletions.
diff --git a/components/button/index.cjsx b/components/button/index.cjsx
@@ -1,6 +1,6 @@
-require './style'
-FontIcon = require "../font_icon"
-Ripple   = require "../ripple"
+localCSS = require './style'
+FontIcon = require '../font_icon'
+Ripple   = require '../ripple'
 
 module.exports = React.createClass
 
@@ -14,11 +14,12 @@ module.exports = React.createClass
     type        : React.PropTypes.string
 
   getDefaultProps: ->
-    className   : ""
-    type        : "square"
+    className   : ''
+    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:
-                left  : event.pageX - client?.left
-                top   : event.pageY - client?.top
-                width : (client?.width * 2.5)
+    @setState
+      focused: true
+      ripple:
+        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} />

diff --git a/components/button/style.styl b/components/button/style.styl
@@ -1,6 +1,6 @@
 @import "../constants.styl"
 
-[data-component-button]
+:local(.root)
   z-index                       : 1
   display                       : inline-block
   position                      : relative
@@ -10,77 +10,72 @@
   text-decoration               : none
   white-space                   : nowrap
   border                        : none
-  transition-property             background-color, box-shadow
-  transition-duration             ANIMATION_DURATION
-  transition-timing-function      ANIMATION_EASE
+  transition-property           : background-color, box-shadow
+  transition-duration           : ANIMATION_DURATION
+  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
-        box-shadow                ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
+      &.focused
+        box-shadow              : ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
       &.primary, &.accent
         color                   : WHITE
       &.primary
         background-color        : PRIMARY
       &.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
-
-[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
+    pointer-events: none
diff --git a/spec/components/button.cjsx b/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="circle" icon="explore" className="primary" />
-      <Button type="circle" icon="zoom_in" className="accent" />
-      <Button type="circle" icon="input" disabled />
-      <Button type="circle" icon="zoom_in" loading />
-
+      <Button type="floating" icon="access_alarm" />
+      <Button type="floating" icon="explore" className="primary" />
+      <Button type="floating" icon="zoom_in" className="accent" />
+      <Button type="floating" icon="input" disabled />
+      <Button type="floating" icon="zoom_in" loading />
     </section>