diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 37a0bed457d66b..9ddcbbe0c523bd 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -6,7 +6,7 @@ ### Link to minimal working code that reproduces the issue diff --git a/docs/src/app/components/AppNavDrawer.js b/docs/src/app/components/AppNavDrawer.js index 0e1835a6fe861a..3f7f73ccdc4796 100644 --- a/docs/src/app/components/AppNavDrawer.js +++ b/docs/src/app/components/AppNavDrawer.js @@ -12,6 +12,10 @@ import {cyan500} from 'material-ui/styles/colors'; const SelectableList = makeSelectable(List); const styles = { + v1: { + height: 40, + backgroundColor: '#2196f3', + }, logo: { cursor: 'pointer', fontSize: 24, @@ -121,6 +125,7 @@ class AppNavDrawer extends Component { onRequestChange={onRequestChangeNavDrawer} containerStyle={{zIndex: zIndex.drawer - 100}} > +
Material-UI
diff --git a/docs/src/app/components/Master.js b/docs/src/app/components/Master.js index a2e37b94a2d3cf..db958cde85149f 100644 --- a/docs/src/app/components/Master.js +++ b/docs/src/app/components/Master.js @@ -50,11 +50,19 @@ class Master extends Component { getStyles() { const styles = { + v1: { + height: 40, + backgroundColor: '#2196f3', + display: 'flex', + color: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, appBar: { position: 'fixed', // Needed to overlap the examples zIndex: this.state.muiTheme.zIndex.appBar + 1, - top: 0, + top: 40, }, root: { paddingTop: spacing.desktopKeylineIncrement, @@ -117,10 +125,12 @@ class Master extends Component { }; handleChangeList = (event, value) => { - this.context.router.push(value); - this.setState({ - navDrawerOpen: false, - }); + if (value) { + this.context.router.push(value); + this.setState({ + navDrawerOpen: false, + }); + } }; handleChangeMuiTheme = (muiTheme) => { @@ -169,6 +179,11 @@ class Master extends Component { return (
+ <a style={prepareStyles(styles.v1)} href="https://material-ui-1dab0.firebaseapp.com/"> + <span> + Aww yeah, Material-UI v1 is coming! + </span> + </a> <AppBar onLeftIconButtonTouchTap={this.handleTouchTapLeftIconButton} title={title} diff --git a/src/RaisedButton/RaisedButton.js b/src/RaisedButton/RaisedButton.js index e4020705ecaa06..942856a39e626c 100644 --- a/src/RaisedButton/RaisedButton.js +++ b/src/RaisedButton/RaisedButton.js @@ -73,7 +73,6 @@ function getStyles(props, context, state) { borderRadius, transition: transitions.easeOut(), backgroundColor: backgroundColor, - overflow: 'hidden', // That's the default value for a button but not a link textAlign: 'center', }, diff --git a/src/Stepper/Step.js b/src/Stepper/Step.js index b4cb840abab1ea..66a7fe61c53afb 100644 --- a/src/Stepper/Step.js +++ b/src/Stepper/Step.js @@ -62,6 +62,10 @@ class Step extends Component { style: PropTypes.object, }; + static defaultProps = { + children: [], + } + static contextTypes = { muiTheme: PropTypes.object.isRequired, stepper: PropTypes.object, @@ -72,7 +76,6 @@ class Step extends Component { this.uniqueId = uniqueId.replace(/[^A-Za-z0-9-]/gi, ''); } - renderChild = (child) => { const { active, diff --git a/src/TextField/EnhancedTextarea.js b/src/TextField/EnhancedTextarea.js index 83651fa8f0fc73..fba08cd087d116 100644 --- a/src/TextField/EnhancedTextarea.js +++ b/src/TextField/EnhancedTextarea.js @@ -76,7 +76,7 @@ class EnhancedTextarea extends Component { } componentDidMount() { - this.syncHeightWithShadow(); + this.syncHeightWithShadow(this.props.value); } componentWillReceiveProps(nextProps) { @@ -87,7 +87,7 @@ class EnhancedTextarea extends Component { } handleResize = (event) => { - this.syncHeightWithShadow(undefined, event); + this.syncHeightWithShadow(this.props.value, event); }; getInputNode() { diff --git a/src/TextField/EnhancedTextarea.spec.js b/src/TextField/EnhancedTextarea.spec.js new file mode 100644 index 00000000000000..1614cc1313538d --- /dev/null +++ b/src/TextField/EnhancedTextarea.spec.js @@ -0,0 +1,43 @@ +/* eslint-env mocha */ +import React from 'react'; +import PropTypes from 'prop-types'; +import {mount} from 'enzyme'; +import {assert} from 'chai'; +import EnhancedTextarea from './EnhancedTextarea'; +import getMuiTheme from '../styles/getMuiTheme'; + +describe('<EnhancedTextArea />', () => { + const muiTheme = getMuiTheme(); + const rowHeight = 24; + const mountWithContext = (node) => mount(node, { + context: {muiTheme}, + childContextTypes: {muiTheme: PropTypes.object}, + }); + + it('renders with no arguments', () => { + const wrapper = mountWithContext( + <EnhancedTextarea /> + ); + assert.isAbove(wrapper.find('div').length, 0); + }); + + it('has one row initial height', () => { + const wrapper = mountWithContext( + <EnhancedTextarea /> + ); + assert.strictEqual(wrapper.state().height, rowHeight); + }); + + // This test will not succeed due to + // jsdom limitations + // https://github.com/tmpvar/jsdom/issues/1013 + /* eslint mocha/no-skipped-tests: 0 */ + it.skip('has zero initial height', () => { + const wrapper = mountWithContext( + <EnhancedTextarea + value="A really long string that should go over multiple lines and should trigger more rows than one" + /> + ); + assert.isAbove(wrapper.state().height, rowHeight); + }); +}); diff --git a/src/internal/EnhancedButton.js b/src/internal/EnhancedButton.js index e643dd956f73ea..199c9e9eda7e00 100644 --- a/src/internal/EnhancedButton.js +++ b/src/internal/EnhancedButton.js @@ -171,6 +171,9 @@ class EnhancedButton extends Component { color={focusRippleColor} opacity={focusRippleOpacity} show={isKeyboardFocused} + style={{ + overflow: 'hidden', + }} key="focusRipple" /> ) : undefined; diff --git a/src/internal/FocusRipple.js b/src/internal/FocusRipple.js index c0f7f3e0e52fad..55e8d6f4b61f0c 100644 --- a/src/internal/FocusRipple.js +++ b/src/internal/FocusRipple.js @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'; import shallowEqual from 'recompose/shallowEqual'; import autoPrefix from '../utils/autoPrefix'; import transitions from '../styles/transitions'; -import ScaleInTransitionGroup from './ScaleIn'; +import ScaleIn from './ScaleIn'; const pulsateDuration = 750; @@ -125,13 +125,13 @@ class FocusRipple extends Component { const ripple = show ? this.getRippleElement(this.props, baseId) : null; return ( - <ScaleInTransitionGroup + <ScaleIn id={baseId} maxScale={0.85} style={mergedRootStyles} > {ripple} - </ScaleInTransitionGroup> + </ScaleIn> ); } }