Merge

components/button/style.scss

@@ -11,7 +11,6 @@
   color: $button-default-text-color;
   text-align: center;
   text-decoration: none;
-  overflow: hidden;
   white-space: nowrap;
   cursor: pointer;
   border: 0;

components/snackbar/index.jsx

@@ -13,7 +13,6 @@ class Snackbar extends React.Component {
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     onTimeout: React.PropTypes.func,
-    onOverlayClick: React.PropTypes.func,
     timeout: React.PropTypes.number,
     type: React.PropTypes.string
   };
@@ -45,7 +44,7 @@ class Snackbar extends React.Component {
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <Overlay active={this.props.active} onClick={this.props.onOverlayClick} opacity={0}>
+      <Overlay active={this.props.active} opacity={0}>
         <div data-react-toolbox='snackbar' className={className}>
           { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
           <span className={style.label}>{this.props.label}</span>

components/snackbar/readme.md

@@ -43,7 +43,6 @@ class SnackbarTest extends React.Component {
 | `icon` | `String`  |       | String key for an icon displayed in left side of the snackbar.|
 | `label` | `String`  |       | Text to display in the content.|
 | `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
-| `onOverlayClick`   | `Function`   |             | Callback to be invoked when the dialog overlay is clicked.|
 | `onTimeout` | `Function`  |       | Callback function when finish the set timeout.|
 | `timeout` | `Number`  |       | Amount of time after the Snackbar will be automatically hidden.|
 | `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|

components/tooltip/index.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Overlay from '../overlay';
 import style from './style';
 
-const HIDE_TIMEOUT = 300;
+const HIDE_TIMEOUT = 100;
 
 class Tooltip extends React.Component {
   static propTypes = {
@@ -19,32 +18,35 @@ class Tooltip extends React.Component {
     active: false
   };
 
-  componentDidMount () {
-    this.parent = ReactDOM.findDOMNode(this).parentNode;
-    if (this.parent) {
-      this.parent.onmouseover = this.handleParentMouseOver;
-      this.parent.onmouseout = this.handleParentMouseOut;
+  componentDidMount = () => {
+    const parent = ReactDOM.findDOMNode(this).parentNode;
+
+    if (parent.style.position !== 'relative' && parent.style.position !== 'absolute'){
+      parent.style.position = 'relative';
     }
-  }
+
+    parent.onmouseover = this.handleParentMouseOver;
+    parent.onmouseout = this.handleParentMouseOut;
+  };
 
   handleParentMouseOver = () => {
-    if (this.deferred) clearTimeout(this.deferred);
+    if (this.deferredHide) clearTimeout(this.deferredHide);
 
-    const node = ReactDOM.findDOMNode(this.refs.tooltip);
-    const parentStyle = this.parent.currentStyle || window.getComputedStyle(this.parent);
+    const node = ReactDOM.findDOMNode(this);
+    const parent = node.parentNode;
+    const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
     const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
-    const position = this.parent.getBoundingClientRect();
+    const position = parent.getBoundingClientRect();
 
-    node.style.top = `${position.top + position.height - offset}px`;
-    node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
+    node.style.top = `${position.height - offset}px`;
+    node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
     if (!this.state.active) this.setState({ active: true});
   };
 
   handleParentMouseOut = () => {
     if (this.state.active) {
-      this.deferred = setTimeout(() => {
-        this.setState({ active: false});
-      }, HIDE_TIMEOUT);
+      this.deferredHide = setTimeout(() => { this.setState({active: false}); }, HIDE_TIMEOUT);
+      console.log(this.deferredHide);
     }
   };
 
@@ -54,11 +56,9 @@ class Tooltip extends React.Component {
     if (this.state.active) className += ` ${style.active}`;
 
     return (
-      <Overlay active={this.state.active} opacity={0}>
-        <span ref='tooltip' data-react-toolbox='tooltip' className={className}>
-          {this.props.label}
-        </span>
-      </Overlay>
+      <span data-react-toolbox='tooltip' className={className}>
+        {this.props.label}
+      </span>
     );
   }
 }

components/tooltip/style.scss

@@ -3,13 +3,12 @@
 @import "./config";
 
 .root {
-  position: fixed;
+  position: absolute;
   z-index: $z-index-higher;
-  display: inline-block;
+  display: block;
   max-width: $tooltip-max-width;
   padding: $tooltip-padding;
   margin: $tooltip-margin 0;
-  font-size: $font-size-tiny;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
   line-height: $font-size-small;