Merge pull request mui#4035 from nathanmarks/raisedbutton-hover-icon

[RaisedButton] fix hover overlay for icon only buttons, fixes mui#3815

src/RaisedButton/RaisedButton.js

@@ -54,14 +54,17 @@ function getStyles(props, context, state) {
     }
   }
 
+  const buttonHeight = style && style.height || `${button.height}px`;
+
   return {
     root: {
       display: 'inline-block',
       minWidth: fullWidth ? '100%' : button.minWidth,
-      height: button.height,
+      height: buttonHeight,
       transition: transitions.easeOut(),
     },
     container: {
+      lineHeight: buttonHeight,
       position: 'relative',
       height: '100%',
       width: '100%',
@@ -85,16 +88,15 @@ function getStyles(props, context, state) {
       userSelect: 'none',
       paddingLeft: icon && labelPosition !== 'before' ? 8 : baseTheme.spacing.desktopGutterLess,
       paddingRight: icon && labelPosition === 'before' ? 8 : baseTheme.spacing.desktopGutterLess,
-      lineHeight: style && style.height || `${button.height}px`,
       color: labelColor,
     },
     icon: {
-      lineHeight: style && style.height || `${button.height}px`,
       verticalAlign: 'middle',
       marginLeft: label && labelPosition !== 'before' ? 12 : 0,
       marginRight: label && labelPosition === 'before' ? 12 : 0,
     },
     overlay: {
+      height: buttonHeight,
       backgroundColor: (state.keyboardFocused || state.hovered) && !disabled &&
         fade(labelColor, amount),
       transition: transitions.easeOut(),

src/RaisedButton/RaisedButton.spec.js

@@ -0,0 +1,57 @@
+/* eslint-env mocha */
+import React from 'react';
+import {shallow} from 'enzyme';
+import {assert} from 'chai';
+import RaisedButton from './RaisedButton';
+import getMuiTheme from '../styles/getMuiTheme';
+
+describe('<RaisedButton />', () => {
+  const muiTheme = getMuiTheme();
+  const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
+  const testChildren = <span className="unique">Hello World</span>;
+
+  it('renders an enhanced button inside paper', () => {
+    const wrapper = shallowWithContext(
+      <RaisedButton>Button</RaisedButton>
+    );
+    assert.ok(wrapper.is('Paper'));
+    assert.ok(wrapper.childAt(0).is('EnhancedButton'));
+  });
+
+  it('renders children', () => {
+    const wrapper = shallowWithContext(
+      <RaisedButton>{testChildren}</RaisedButton>
+    );
+    assert.ok(wrapper.contains(testChildren), 'should contain the children');
+  });
+
+  it('passes props to the enhanced button', () => {
+    const props = {
+      ariaLabel: 'Say hello world',
+      disabled: true,
+      href: 'http://google.com',
+      linkButton: true,
+      name: 'Hello World',
+    };
+
+    const wrapper = shallowWithContext(
+      <RaisedButton {...props}>Button</RaisedButton>
+    );
+
+    assert.ok(wrapper.childAt(0).is('EnhancedButton'));
+    assert.ok(wrapper.childAt(0).is(props));
+  });
+
+  it('renders a label with an icon before', () => {
+    const wrapper = shallowWithContext(
+      <RaisedButton
+        icon={<span className="test-icon" />}
+        label={<span className="test-label">Hello</span>}
+      />
+    );
+    const icon = wrapper.find('.test-icon');
+    const label = wrapper.find('.test-label');
+    assert.ok(icon.is('span'));
+    assert.strictEqual(label.children().node, 'Hello', 'says hello');
+  });
+});

test/browser/RaisedButton.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+import RaisedButton from 'material-ui/RaisedButton';
+import ActionAndroid from 'material-ui/svg-icons/action/android';
+import {assert} from 'chai';
+import mount from 'enzyme/mount';
+import getMuiTheme from 'styles/getMuiTheme';
+
+describe('<RaisedButton />', () => {
+  const muiTheme = getMuiTheme();
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const mountWithContext = (node) =>
+    mount(node, {
+      attachTo: container,
+      context: {muiTheme},
+    });
+
+  it('renders a hover overlay of equal height to the button', () => {
+    const wrappers = [
+      () => mountWithContext(
+        <RaisedButton>Hello World</RaisedButton>
+      ),
+      () => mountWithContext(
+        <RaisedButton
+          backgroundColor="#a4c639"
+          icon={<ActionAndroid />}
+        />
+      ),
+    ];
+
+    wrappers.forEach((createWrapper) => {
+      const wrapper = createWrapper();
+      wrapper.simulate('mouseEnter');
+
+      const overlay = wrapper.ref('overlay');
+      const button = ReactDOM.findDOMNode(
+        TestUtils.findRenderedDOMComponentWithTag(
+          wrapper.instance(),
+          'button'
+        )
+      );
+
+      assert.strictEqual(
+        overlay.node.clientHeight,
+        button.clientHeight,
+        'overlay height should match the button height'
+      );
+    });
+  });
+});

test/karma.conf.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const argv = process.argv.slice(2);
 const opts = {
   coverage: true,
@@ -83,6 +84,7 @@ module.exports = function(config) {
       },
       resolve: {
         alias: {
+          'material-ui': path.resolve(__dirname, '../src'),
           sinon: 'sinon/pkg/sinon.js',
         },
         extensions: ['', '.js', '.jsx', '.json'],