Modify ripple theme interface to avoid collisions

components/button/theme.scss

@@ -36,7 +36,7 @@
   > * {
     pointer-events: none;
   }
-  [data-react-toolbox="ripple"] {
+  > .rippleWrapper {
     overflow: hidden;
   }
   &[disabled] {
@@ -97,7 +97,7 @@
   .icon {
     line-height: $button-floating-height;
   }
-  [data-react-toolbox="ripple"] {
+  > .rippleWrapper {
     border-radius: 50%;
   }
   &.mini {
@@ -120,7 +120,7 @@
     line-height: $button-height;
     vertical-align: middle;
   }
-  [data-react-toolbox="ripple"] {
+  > .rippleWrapper {
     border-radius: 50%;
   }
 }

components/ripple/Ripple.js

@@ -30,10 +30,10 @@ const Ripple = (options = {}) => {
         rippleClassName: React.PropTypes.string,
         rippleSpread: React.PropTypes.number,
         theme: React.PropTypes.shape({
-          active: React.PropTypes.string.isRequired,
           ripple: React.PropTypes.string.isRequired,
-          restarting: React.PropTypes.string.isRequired,
-          wrapper: React.PropTypes.string.isRequired
+          rippleActive: React.PropTypes.string.isRequired,
+          rippleRestarting: React.PropTypes.string.isRequired,
+          rippleWrapper: React.PropTypes.string.isRequired
         })
       };
 
@@ -117,8 +117,8 @@ const Ripple = (options = {}) => {
           } = this.props;
 
           const rippleClassName = classnames(this.props.theme.ripple, {
-            [this.props.theme.active]: this.state.active,
-            [this.props.theme.restarting]: this.state.restarting
+            [this.props.theme.rippleActive]: this.state.active,
+            [this.props.theme.rippleRestarting]: this.state.restarting
           }, className);
 
           const { left, top, width } = this.state;
@@ -130,7 +130,7 @@ const Ripple = (options = {}) => {
           return (
             <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
               {children ? children : null}
-              <span data-react-toolbox='ripple' className={this.props.theme.wrapper} {...props}>
+              <span data-react-toolbox='ripple' className={this.props.theme.rippleWrapper} {...props}>
                 <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
               </span>
             </ComposedComponent>

components/ripple/readme.md

@@ -33,9 +33,9 @@ In any component you decorate with the Ripple you'd get some additional props:
 
 You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxRipple`, it should implement the following interface:
 
-| Name         | Description|
-|:-------------|:-----------|
-| `active`     | Applied when the ripple is active.|
-| `ripple`     | Root classname for the ripple.|
-| `restarting` | Applied when the ripple is restarting.|
-| `wrapper`    | Wrapper class to fit to the parent element.|
+| Name               | Description|
+|:-------------------|:-----------|
+| `ripple`           | Root classname for the ripple.|
+| `rippleActive`     | Applied when the ripple is active.|
+| `rippleRestarting` | Applied when the ripple is restarting.|
+| `rippleWrapper`    | Wrapper class to fit to the parent element.|

components/ripple/theme.scss

@@ -12,7 +12,7 @@
   transform-origin: 50% 50%;
 }
 
-.wrapper {
+.rippleWrapper {
   position: absolute;
   top: 0;
   right: 0;
@@ -25,15 +25,15 @@
 .ripple {
   @extend %ripple;
   transition-duration: $ripple-duration;
-  &.restarting {
+  &.rippleRestarting {
     opacity: $ripple-final-opacity;
     transition-property: none;
   }
-  &.active {
+  &.rippleActive {
     opacity: $ripple-final-opacity;
     transition-property: transform;
   }
-  &:not(.active):not(.restarting) {
+  &:not(.rippleActive):not(.rippleRestarting) {
     opacity: 0;
     transition-property: opacity, transform;
   }