Commit 9629820f authored by Eric Eastwood's avatar Eric Eastwood Committed by Andrew Newdigate

Merge pull request #2420 from troupe/feature/fix-tooltip-react-warning-unknown-props-v2

Fix unknown props React warning with <Tooltip />
parents b108a548 85ede011
......@@ -9,10 +9,11 @@
position: absolute;
top: 0;
left: 50%;
transform: @delete-tooltip-transform-positioning;
transform: @delete-tooltip-transform-positioning scale(.7);
padding: .4em 1em;
opacity: 0;
background-color: fade(@dark, 60%);
border-radius: .3em;
......@@ -27,7 +28,7 @@
opacity .2s ease;
&.active {
transform: @delete-tooltip-transform-positioning scale(.7);
opacity: 0;
transform: @delete-tooltip-transform-positioning;
opacity: 1;
}
}
import React, { PropTypes } from 'react';
import _ from 'lodash';
import classNames from 'classnames';
export default React.createClass({
const Tooltip = React.createClass({
displayName: 'Tooltip',
propTypes: {
......@@ -17,7 +18,6 @@ export default React.createClass({
getDefaultProps() {
return {
elementType: 'div',
wrapperClassName: 'tooltip__wrapper',
tooltipClassName: 'tooltip__overlay'
};
},
......@@ -39,6 +39,7 @@ export default React.createClass({
render() {
const { tooltip, elementType, tooltipClassName, children } = this.props;
const restOfProps = _.omit(this.props, Object.keys(Tooltip.propTypes));
const { prevTooltip } = this.state;
const ElementType = elementType;
......@@ -46,11 +47,11 @@ export default React.createClass({
[tooltipClassName]: true,
//This active element actually HIDES the element
//so the naming here is wrong
active: !tooltip || (tooltip && tooltip.length === 0)
active: tooltip && tooltip.length > 0
});
return (
<ElementType {...this.props}>
<ElementType {...restOfProps}>
{children}
<div className={compiledTooltipClassName}>
{tooltip || prevTooltip}
......@@ -60,3 +61,6 @@ export default React.createClass({
},
});
export default Tooltip;
......@@ -14,16 +14,16 @@ describe('<Tooltip/>', () => {
);
});
it('should have hidden class when tooltip not provided', () => {
it('should not have active class when tooltip is not provided', () => {
const wrapper = shallow(<Tooltip />);
const overlayEl = wrapper.find('.tooltip__overlay');
equal(overlayEl.hasClass('active'), true);
equal(overlayEl.hasClass('active'), false);
});
it('should not have hidden class when tooltip provided', () => {
it('should have active class when tooltip is provided', () => {
const wrapper = shallow(<Tooltip tooltip="test" />);
const overlayEl = wrapper.find('.tooltip__overlay');
equal(overlayEl.hasClass('active'), false);
equal(overlayEl.hasClass('active'), true);
});
it('should render the children', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment