diff --git a/.eslintrc b/.eslintrc index 427c1b98b9c103..e9bdf1aa4301c2 100644 --- a/.eslintrc +++ b/.eslintrc @@ -66,11 +66,13 @@ rules: # React react/display-name: [2, {acceptTranspilerName: true}] react/jsx-boolean-value: [2, always] + react/jsx-closing-bracket-location: 2 react/jsx-curly-spacing: 2 react/jsx-indent-props: [2, 2] - react/jsx-max-props-per-line: [2, {maximum: 4}] + react/jsx-max-props-per-line: [2, {maximum: 3}] react/jsx-no-duplicate-props: 2 react/jsx-no-undef: 2 + react/jsx-pascal-case: 2 react/jsx-sort-prop-types: 2 react/jsx-uses-react: 2 react/jsx-uses-vars: 2 @@ -91,7 +93,6 @@ rules: # React Disabled react/jsx-no-bind: 0 react/jsx-no-literals: 0 - react/jsx-closing-bracket-location: 0 react/jsx-sort-props: 0 react/no-set-state: 0 diff --git a/docs/src/app/components/component-doc.jsx b/docs/src/app/components/component-doc.jsx index 6ad050d876ff82..39410f8fcf6151 100644 --- a/docs/src/app/components/component-doc.jsx +++ b/docs/src/app/components/component-doc.jsx @@ -100,7 +100,8 @@ const ComponentDoc = React.createClass({ key={i} name={info.name} style={infoStyle} - infoArray={info.infoArray} /> + infoArray={info.infoArray} + /> ); }, this); diff --git a/docs/src/app/components/full-width-section.jsx b/docs/src/app/components/full-width-section.jsx index 79af2d7cc0648f..f58541693e193b 100644 --- a/docs/src/app/components/full-width-section.jsx +++ b/docs/src/app/components/full-width-section.jsx @@ -70,12 +70,14 @@ const FullWidthSection = React.createClass({ } return ( - + this.isDeviceSize(StyleResizable.statics.Sizes.LARGE) && styles.rootWhenLarge)} + > {content} ); diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index 6319c224f10c53..3ba2dce5454c9f 100644 --- a/docs/src/app/components/master.jsx +++ b/docs/src/app/components/master.jsx @@ -207,8 +207,10 @@ const Master = React.createClass({ Call-Em-All {' and our awesome '} - + contributors .

diff --git a/docs/src/app/components/pages/components/Card/ExampleWithAvatar.jsx b/docs/src/app/components/pages/components/Card/ExampleWithAvatar.jsx index 357dd4681b29a6..18169a90539aa3 100644 --- a/docs/src/app/components/pages/components/Card/ExampleWithAvatar.jsx +++ b/docs/src/app/components/pages/components/Card/ExampleWithAvatar.jsx @@ -12,7 +12,8 @@ const CardExampleWithAvatar = () => ( + avatar="http://lorempixel.com/100/100/nature/" + /> } > diff --git a/docs/src/app/components/pages/components/Card/ExampleWithoutAvatar.jsx b/docs/src/app/components/pages/components/Card/ExampleWithoutAvatar.jsx index 6554f70b736f08..14e904465de735 100644 --- a/docs/src/app/components/pages/components/Card/ExampleWithoutAvatar.jsx +++ b/docs/src/app/components/pages/components/Card/ExampleWithoutAvatar.jsx @@ -11,7 +11,8 @@ const CardExampleWithoutAvatar = () => ( title="Without Avatar" subtitle="Subtitle" actAsExpander={true} - showExpandableButton={true} /> + showExpandableButton={true} + /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. diff --git a/docs/src/app/components/pages/components/DatePicker/ExampleInline.jsx b/docs/src/app/components/pages/components/DatePicker/ExampleInline.jsx index 11640fc6dd9c6a..03badbc676be13 100644 --- a/docs/src/app/components/pages/components/DatePicker/ExampleInline.jsx +++ b/docs/src/app/components/pages/components/DatePicker/ExampleInline.jsx @@ -5,11 +5,13 @@ const DatePickerExampleInline = () => (
+ container="inline" + /> + autoOk={true} + />
); diff --git a/docs/src/app/components/pages/components/DatePicker/ExampleInternational.jsx b/docs/src/app/components/pages/components/DatePicker/ExampleInternational.jsx index 99aa7a566abade..65dbaf5bead8a3 100644 --- a/docs/src/app/components/pages/components/DatePicker/ExampleInternational.jsx +++ b/docs/src/app/components/pages/components/DatePicker/ExampleInternational.jsx @@ -8,7 +8,8 @@ const DatePickerExampleInternational = () => ( // Intl is supported by most modern browsers, see http://caniuse.com/#search=intl // for browsers that don't support it use this polyfill https://github.com/andyearnshaw/Intl.js wordings={{ok: 'OK', cancel: 'Annuler'}} - locale="fr" /> + locale="fr" + /> ); export default DatePickerExampleInternational; diff --git a/docs/src/app/components/pages/components/DatePicker/ExampleSimple.jsx b/docs/src/app/components/pages/components/DatePicker/ExampleSimple.jsx index 54796e23748cef..14bff582f0eb10 100644 --- a/docs/src/app/components/pages/components/DatePicker/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/DatePicker/ExampleSimple.jsx @@ -3,11 +3,11 @@ import DatePicker from 'material-ui/lib/date-picker/date-picker'; const DatePickerExampleSimple = () => (
- + + mode="landscape" + />
); diff --git a/docs/src/app/components/pages/components/DatePicker/ExampleToggle.jsx b/docs/src/app/components/pages/components/DatePicker/ExampleToggle.jsx index 170234253c23bf..c011d4cbf88cef 100644 --- a/docs/src/app/components/pages/components/DatePicker/ExampleToggle.jsx +++ b/docs/src/app/components/pages/components/DatePicker/ExampleToggle.jsx @@ -49,39 +49,38 @@ export default class DatePickerExampleToggle extends React.Component { render() { return (
- - - + disableYearSelection={this.state.disableYearSelection} + />
- + onChange={this.handleChangeMinDate} + /> - + onChange={this.handleChangeMaxDate} + /> - + onToggle={this.handleToggle} + /> + onToggle={this.handleToggle} + />
); diff --git a/docs/src/app/components/pages/components/Dialog/ExampleCustomWidth.jsx b/docs/src/app/components/pages/components/Dialog/ExampleCustomWidth.jsx index 3b50a019a94f24..169e4672181df3 100644 --- a/docs/src/app/components/pages/components/Dialog/ExampleCustomWidth.jsx +++ b/docs/src/app/components/pages/components/Dialog/ExampleCustomWidth.jsx @@ -29,11 +29,13 @@ export default class DialogExampleCustomWidth extends React.Component { , + onTouchTap={this.handleClose} + />, , + onTouchTap={this.handleClose} + />, ]; return ( diff --git a/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx b/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx index 10726d4a131374..71b249062b6095 100644 --- a/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx +++ b/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx @@ -24,12 +24,14 @@ export default class DialogExampleModal extends React.Component { , + onTouchTap={this.handleClose} + />, , + onTouchTap={this.handleClose} + />, ]; return ( @@ -39,7 +41,8 @@ export default class DialogExampleModal extends React.Component { title="Dialog With Actions" actions={actions} modal={true} - open={this.state.open}> + open={this.state.open} + > Only actions can close this dialog. diff --git a/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx b/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx index 3a8fae36289e3f..c0b01abda5b7d0 100644 --- a/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx @@ -24,12 +24,14 @@ export default class DialogExampleSimple extends React.Component { , + onTouchTap={this.handleClose} + />, , + onTouchTap={this.handleClose} + />, ]; return ( @@ -40,7 +42,8 @@ export default class DialogExampleSimple extends React.Component { actions={actions} modal={false} open={this.state.open} - onRequestClose={this.handleClose}> + onRequestClose={this.handleClose} + > The actions in this window were passed in as an array of React objects. diff --git a/docs/src/app/components/pages/components/FontIcon/ExampleSimple.jsx b/docs/src/app/components/pages/components/FontIcon/ExampleSimple.jsx index d93afeffc3299c..ae4120fc7d069a 100644 --- a/docs/src/app/components/pages/components/FontIcon/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/FontIcon/ExampleSimple.jsx @@ -10,16 +10,19 @@ const FontIconExampleSimple = () => (
+ style={iconStyles} + /> + color={Colors.blue500} + /> + hoverColor={Colors.greenA200} + />
); diff --git a/docs/src/app/components/pages/components/GridList/ExampleComplex.jsx b/docs/src/app/components/pages/components/GridList/ExampleComplex.jsx index 5070e1b4efa7eb..e774b8e665ede5 100644 --- a/docs/src/app/components/pages/components/GridList/ExampleComplex.jsx +++ b/docs/src/app/components/pages/components/GridList/ExampleComplex.jsx @@ -4,6 +4,20 @@ import GridTile from 'material-ui/lib/grid-list/grid-tile'; import StarBorder from 'material-ui/lib/svg-icons/toggle/star-border'; import IconButton from 'material-ui/lib/icon-button'; +const styles = { + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + }, + gridList: { + width: 500, + height: 400, + overflowY: 'auto', + marginBottom: 24, + }, +}; + const tilesData = [ { img: 'images/grid-list/00-52-29-429_640.jpg', @@ -49,29 +63,28 @@ const tilesData = [ }, ]; -const gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)'; -const tileElements = tilesData.map(tile => } - actionPosition="left" - titlePosition="top" - titleBackground={gradientBg} - cols={tile.featured ? 2 : 1} - rows={tile.featured ? 2 : 1} - >); -const gridListStyle = {width: 500, height: 400, overflowY: 'auto', marginBottom: 24}; - const GridListExampleComplex = () => ( -
- {/*Grid list with all possible overrides*/} +
- {tileElements} + style={styles.gridList} + > + {tilesData.map(tile => ( + } + actionPosition="left" + titlePosition="top" + titleBackground="linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)" + cols={tile.featured ? 2 : 1} + rows={tile.featured ? 2 : 1} + > + + + ))}
); diff --git a/docs/src/app/components/pages/components/GridList/ExampleSimple.jsx b/docs/src/app/components/pages/components/GridList/ExampleSimple.jsx index 7f146211282670..7ceab90e2a7f66 100644 --- a/docs/src/app/components/pages/components/GridList/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/GridList/ExampleSimple.jsx @@ -4,6 +4,20 @@ import GridTile from 'material-ui/lib/grid-list/grid-tile'; import StarBorder from 'material-ui/svg-icons/toggle/star-border'; import IconButton from 'material-ui/lib/icon-button'; +const styles = { + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + }, + gridList: { + width: 500, + height: 400, + overflowY: 'auto', + marginBottom: 24, + }, +}; + const tilesData = [ { img: 'images/grid-list/00-52-29-429_640.jpg', @@ -47,22 +61,23 @@ const tilesData = [ }, ]; -const tileElements = tilesData.map(tile => by {tile.author}} - actionIcon={} - >); -const gridListStyle = {width: 500, height: 400, overflowY: 'auto', marginBottom: 24}; const GridListExampleSimple = () => ( -
- {/* Basic grid list with mostly default options */} +
- {tileElements} + style={styles.gridList} + > + {tilesData.map(tile => ( + by {tile.author}} + actionIcon={} + > + + + ))}
); diff --git a/docs/src/app/components/pages/components/IconButton/ExampleMaterial.jsx b/docs/src/app/components/pages/components/IconButton/ExampleMaterial.jsx index 8b1ca1db6aaae0..53c975fbf7f792 100644 --- a/docs/src/app/components/pages/components/IconButton/ExampleMaterial.jsx +++ b/docs/src/app/components/pages/components/IconButton/ExampleMaterial.jsx @@ -5,11 +5,12 @@ import IconButton from 'material-ui/lib/icon-button'; const IconButtonExampleMaterial = () => (
- + + tooltip="Sky" + > settings_system_daydream
diff --git a/docs/src/app/components/pages/components/IconButton/ExampleTooltip.jsx b/docs/src/app/components/pages/components/IconButton/ExampleTooltip.jsx index 0dea42650c842b..aec01ecdf93445 100644 --- a/docs/src/app/components/pages/components/IconButton/ExampleTooltip.jsx +++ b/docs/src/app/components/pages/components/IconButton/ExampleTooltip.jsx @@ -3,18 +3,30 @@ import IconButton from 'material-ui/lib/icon-button'; const IconButtonExampleTooltip = () => (
- - - - - - + + + + + +
); diff --git a/docs/src/app/components/pages/components/LeftNav/ExampleOpenRight.jsx b/docs/src/app/components/pages/components/LeftNav/ExampleOpenRight.jsx index ca7edd6b22e01e..1cb9ee43ebd78b 100644 --- a/docs/src/app/components/pages/components/LeftNav/ExampleOpenRight.jsx +++ b/docs/src/app/components/pages/components/LeftNav/ExampleOpenRight.jsx @@ -17,7 +17,8 @@ export default class LeftNavOpenRightExample extends React.Component {
+ onTouchTap={this.handleToggle} + /> diff --git a/docs/src/app/components/pages/components/LeftNav/ExampleSimple.jsx b/docs/src/app/components/pages/components/LeftNav/ExampleSimple.jsx index acfb49ece54bd9..b0a7c956cb345a 100644 --- a/docs/src/app/components/pages/components/LeftNav/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/LeftNav/ExampleSimple.jsx @@ -17,7 +17,8 @@ export default class LeftNavSimpleExample extends React.Component {
+ onTouchTap={this.handleToggle} + /> Menu Item Menu Item 2 diff --git a/docs/src/app/components/pages/components/LeftNav/ExampleUndocked.jsx b/docs/src/app/components/pages/components/LeftNav/ExampleUndocked.jsx index a5bd95616153b7..427e15ca13554f 100644 --- a/docs/src/app/components/pages/components/LeftNav/ExampleUndocked.jsx +++ b/docs/src/app/components/pages/components/LeftNav/ExampleUndocked.jsx @@ -19,7 +19,8 @@ export default class LeftNavUndockedExample extends React.Component {
+ onTouchTap={this.handleToggle} + /> ( } - rightIcon={} /> + rightIcon={} + /> } - rightIcon={} /> + rightIcon={} + /> } - rightIcon={} /> + rightIcon={} + /> } - rightIcon={} /> + rightIcon={} + /> } - rightIcon={} /> + rightIcon={} + /> } /> + leftAvatar={} + /> } /> + leftAvatar={} + /> ); diff --git a/docs/src/app/components/pages/components/List/ExampleContacts.jsx b/docs/src/app/components/pages/components/List/ExampleContacts.jsx index f3b779814ac0b7..4eb7e4f8c973fb 100644 --- a/docs/src/app/components/pages/components/List/ExampleContacts.jsx +++ b/docs/src/app/components/pages/components/List/ExampleContacts.jsx @@ -13,39 +13,53 @@ const ListExampleContacts = () => ( } - rightAvatar={} /> + rightAvatar={} + /> } /> + rightAvatar={} + /> } /> + rightAvatar={} + /> } /> + rightAvatar={} + /> A} - rightAvatar={} /> + leftAvatar={ + + A + + } + rightAvatar={} + /> } /> + rightAvatar={} + /> } /> + rightAvatar={} + /> } /> + rightAvatar={} + /> ); diff --git a/docs/src/app/components/pages/components/List/ExampleFolders.jsx b/docs/src/app/components/pages/components/List/ExampleFolders.jsx index 4c1ee06f214b6d..c1827cebd8cbc7 100644 --- a/docs/src/app/components/pages/components/List/ExampleFolders.jsx +++ b/docs/src/app/components/pages/components/List/ExampleFolders.jsx @@ -17,17 +17,20 @@ const ListExampleFolder = () => ( leftAvatar={} />} rightIcon={} primaryText="Photos" - secondaryText="Jan 9, 2014" /> + secondaryText="Jan 9, 2014" + /> } />} rightIcon={} primaryText="Recipes" - secondaryText="Jan 17, 2014" /> + secondaryText="Jan 17, 2014" + /> } />} rightIcon={} primaryText="Work" - secondaryText="Jan 28, 2014" /> + secondaryText="Jan 28, 2014" + /> @@ -35,12 +38,14 @@ const ListExampleFolder = () => ( leftAvatar={} backgroundColor={Colors.blue500} />} rightIcon={} primaryText="Vacation itinerary" - secondaryText="Jan 20, 2014" /> + secondaryText="Jan 20, 2014" + /> } backgroundColor={Colors.yellow600} />} rightIcon={} primaryText="Kitchen remodel" - secondaryText="Jan 10, 2014" /> + secondaryText="Jan 10, 2014" + /> ); diff --git a/docs/src/app/components/pages/components/List/ExampleMessages.jsx b/docs/src/app/components/pages/components/List/ExampleMessages.jsx index c38ec649014955..12cc48f04cc988 100644 --- a/docs/src/app/components/pages/components/List/ExampleMessages.jsx +++ b/docs/src/app/components/pages/components/List/ExampleMessages.jsx @@ -14,7 +14,8 @@ const iconButtonElement = ( + tooltipPosition="bottom-left" + > ); @@ -40,7 +41,8 @@ const ListExampleMessages = () => ( I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch?

} - secondaryTextLines={2} /> + secondaryTextLines={2} + /> } @@ -53,7 +55,8 @@ const ListExampleMessages = () => ( Wish I could come, but I'm out of town this weekend.

} - secondaryTextLines={2} /> + secondaryTextLines={2} + /> } @@ -64,7 +67,8 @@ const ListExampleMessages = () => ( Do you have Paris recommendations? Have you ever been?

} - secondaryTextLines={2} /> + secondaryTextLines={2} + /> } @@ -75,7 +79,8 @@ const ListExampleMessages = () => ( Do you have any ideas what we can get Heidi for her birthday? How about a pony?

} - secondaryTextLines={2} /> + secondaryTextLines={2} + /> } @@ -86,7 +91,8 @@ const ListExampleMessages = () => ( We should eat this: grated squash. Corn and tomatillo tacos.

} - secondaryTextLines={2} /> + secondaryTextLines={2} + /> @@ -101,7 +107,8 @@ const ListExampleMessages = () => ( I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch?

} - secondaryTextLines={2} /> + secondaryTextLines={2} + /> } @@ -113,7 +120,8 @@ const ListExampleMessages = () => ( Wish I could come, but I'm out of town this weekend.

} - secondaryTextLines={2} /> + secondaryTextLines={2} + /> } @@ -125,7 +133,8 @@ const ListExampleMessages = () => ( Do you have any Paris recs? Have you ever been?

} - secondaryTextLines={2} /> + secondaryTextLines={2} + /> } @@ -137,7 +146,8 @@ const ListExampleMessages = () => ( Do you have any ideas what we can get Heidi for her birthday? How about a pony?

} - secondaryTextLines={2} /> + secondaryTextLines={2} + /> } @@ -149,7 +159,8 @@ const ListExampleMessages = () => ( We should eat this: grated squash. Corn and tomatillo tacos.

} - secondaryTextLines={2} /> + secondaryTextLines={2} + />
diff --git a/docs/src/app/components/pages/components/List/ExampleNested.jsx b/docs/src/app/components/pages/components/List/ExampleNested.jsx index 94e503c93d5f54..f8d76b7fff49c1 100644 --- a/docs/src/app/components/pages/components/List/ExampleNested.jsx +++ b/docs/src/app/components/pages/components/List/ExampleNested.jsx @@ -21,7 +21,8 @@ const ListExampleNested = () => ( } />, + leftIcon={} + />, ( leftIcon={} rightIcon={} primaryText="(650) 555 - 1234" - secondaryText="Mobile" /> + secondaryText="Mobile" + /> } primaryText="(323) 555 - 6789" - secondaryText="Work" /> + secondaryText="Work" + /> } primaryText="aliconnors@example.com" - secondaryText="Personal" /> + secondaryText="Personal" + /> + secondaryText="Work" + /> ); diff --git a/docs/src/app/components/pages/components/List/ExampleSelectable.jsx b/docs/src/app/components/pages/components/List/ExampleSelectable.jsx index 65960d41734f92..871ed368b562a5 100644 --- a/docs/src/app/components/pages/components/List/ExampleSelectable.jsx +++ b/docs/src/app/components/pages/components/List/ExampleSelectable.jsx @@ -18,8 +18,11 @@ function wrapState(ComposedComponent) { }, render() { return ( - + ); }, }); @@ -32,26 +35,35 @@ const ListExampleSelectable = () => ( - + subheader="SelectableContacts" + > } nestedItems={[ - } />, - ]} /> - } + />, + ]} + /> + } /> - } + /> + } /> - } + /> + } /> + leftAvatar={} + /> ); diff --git a/docs/src/app/components/pages/components/List/ExampleSettings.jsx b/docs/src/app/components/pages/components/List/ExampleSettings.jsx index 5c19707a6d3f6b..20c4a584007c93 100644 --- a/docs/src/app/components/pages/components/List/ExampleSettings.jsx +++ b/docs/src/app/components/pages/components/List/ExampleSettings.jsx @@ -12,32 +12,38 @@ const ListExampleSettings = () => ( + secondaryText="Change your Google+ profile photo" + /> + secondaryText="Your status is visible to everyone you use with" + /> } primaryText="Notifications" - secondaryText="Allow notifications" /> + secondaryText="Allow notifications" + /> } primaryText="Sounds" - secondaryText="Hangouts message" /> + secondaryText="Hangouts message" + /> } primaryText="Video sounds" - secondaryText="Hangouts video call" /> + secondaryText="Hangouts video call" + /> + secondaryText="Always interrupt" + /> diff --git a/docs/src/app/components/pages/components/Menu/ExampleIcons.jsx b/docs/src/app/components/pages/components/Menu/ExampleIcons.jsx index a91a1e74ae0fb9..77a42fb56b0bc7 100644 --- a/docs/src/app/components/pages/components/Menu/ExampleIcons.jsx +++ b/docs/src/app/components/pages/components/Menu/ExampleIcons.jsx @@ -40,9 +40,12 @@ const MenuExampleIcons = () => ( } /> settings}/> - settings - }/> + settings + } + /> ¶} /> §} /> diff --git a/docs/src/app/components/pages/components/Menu/ExampleNested.jsx b/docs/src/app/components/pages/components/Menu/ExampleNested.jsx index 3e694ef3bb3479..b1c66a07fc135d 100644 --- a/docs/src/app/components/pages/components/Menu/ExampleNested.jsx +++ b/docs/src/app/components/pages/components/Menu/ExampleNested.jsx @@ -18,17 +18,26 @@ const MenuExampleNested = () => ( - } menuItems={[ - } menuItems={[ - , + } + menuItems={[ + } + menuItems={[ + , + , + , + , + ]} + />, , , , - ]}/>, - , - , - , - ]} /> + ]} + /> diff --git a/docs/src/app/components/pages/components/Popover/ExampleSimple.jsx b/docs/src/app/components/pages/components/Popover/ExampleSimple.jsx index 5053373978d288..867a5d4524a7d8 100644 --- a/docs/src/app/components/pages/components/Popover/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/Popover/ExampleSimple.jsx @@ -87,42 +87,66 @@ export default class PopoverExampleSimple extends React.Component {
Vertical - - - + + +
Horizontal - - - + + +

Target Origin

Vertical - - - + + +
Horizontal - - - + + +
( left={10} top={0} status="loading" - style={style.refresh} /> + style={style.refresh} + /> + style={style.refresh} + />
); diff --git a/docs/src/app/components/pages/components/RefreshIndicator/ExampleSimple.jsx b/docs/src/app/components/pages/components/RefreshIndicator/ExampleSimple.jsx index 7a2abe772ff864..6a8a5725f7cb30 100644 --- a/docs/src/app/components/pages/components/RefreshIndicator/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/RefreshIndicator/ExampleSimple.jsx @@ -19,14 +19,16 @@ const RefreshIndicatorExampleSimple = () => ( left={10} top={0} status="ready" - style={style.refresh} /> + style={style.refresh} + /> + style={style.refresh} + /> ( top={0} color={"red"} status="ready" - style={style.refresh} /> + style={style.refresh} + /> + style={style.refresh} + />
); diff --git a/docs/src/app/components/pages/components/Table/ExampleSimple.jsx b/docs/src/app/components/pages/components/Table/ExampleSimple.jsx index dba81aaa85d44a..09adfdf921b347 100644 --- a/docs/src/app/components/pages/components/Table/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/Table/ExampleSimple.jsx @@ -52,7 +52,8 @@ export default class TableExampleSimple extends React.Component { fixedFooter={this.state.fixedFooter} selectable={this.state.selectable} multiSelectable={this.state.multiSelectable} - onRowSelection={this._onRowSelection}> + onRowSelection={this._onRowSelection} + > @@ -68,7 +69,8 @@ export default class TableExampleSimple extends React.Component { + stripedRows={this.state.stripedRows} + > 1 John Smith @@ -124,47 +126,56 @@ export default class TableExampleSimple extends React.Component { + onChange={this.handleChange} + /> + defaultToggled={this.state.fixedHeader} + /> + defaultToggled={this.state.fixedFooter} + /> + defaultToggled={this.state.stripedRows} + /> + defaultToggled={this.state.showRowHover} + /> + defaultToggled={this.state.selectable} + /> + defaultToggled={this.state.multiSelectable} + /> + defaultToggled={this.state.enableSelectAll} + /> + defaultToggled={this.state.deselectOnClickaway} + />
); diff --git a/docs/src/app/components/pages/components/Tabs/ExampleSimple.jsx b/docs/src/app/components/pages/components/Tabs/ExampleSimple.jsx index 89db458704f79f..e714b5f6bfbbc8 100644 --- a/docs/src/app/components/pages/components/Tabs/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/Tabs/ExampleSimple.jsx @@ -41,7 +41,8 @@ const TabsExampleSimple = () => ( + onActive={handleActive} + /> ); diff --git a/docs/src/app/components/pages/components/Tabs/Page.jsx b/docs/src/app/components/pages/components/Tabs/Page.jsx index 2920b27b5bba02..a0ab26b3d11d11 100644 --- a/docs/src/app/components/pages/components/Tabs/Page.jsx +++ b/docs/src/app/components/pages/components/Tabs/Page.jsx @@ -26,12 +26,8 @@ const TabsPage = () => ( - - + + ); diff --git a/docs/src/app/components/pages/components/TimePicker/ExampleComplex.jsx b/docs/src/app/components/pages/components/TimePicker/ExampleComplex.jsx index 09981c5009fb24..bdb828aff54ccb 100644 --- a/docs/src/app/components/pages/components/TimePicker/ExampleComplex.jsx +++ b/docs/src/app/components/pages/components/TimePicker/ExampleComplex.jsx @@ -22,12 +22,14 @@ export default class TimePickerExampleComplex extends React.Component { ref="picker12hr" format="ampm" hintText="12hr Format" - onChange={this.handleChangeTimePicker24} /> + onChange={this.handleChangeTimePicker24} + /> + onChange={this.handleChangeTimePicker12} + /> ); } diff --git a/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx b/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx index 98ec4d7b4c9516..31c2c4a418243c 100644 --- a/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx @@ -27,11 +27,13 @@ const ToolbarsExamplesSimple = () => ( - - - - }> + + + + } + > diff --git a/docs/src/app/components/pages/components/Toolbars/Page.jsx b/docs/src/app/components/pages/components/Toolbars/Page.jsx index 9aebab76f05217..c73316533fa159 100644 --- a/docs/src/app/components/pages/components/Toolbars/Page.jsx +++ b/docs/src/app/components/pages/components/Toolbars/Page.jsx @@ -21,18 +21,10 @@ const ToolbarPage = () => ( - - - - + + + + ); diff --git a/docs/src/app/components/pages/customization/inline-styles.jsx b/docs/src/app/components/pages/customization/inline-styles.jsx index c7e99b9ee5c020..c3b2a230bc08d0 100644 --- a/docs/src/app/components/pages/customization/inline-styles.jsx +++ b/docs/src/app/components/pages/customization/inline-styles.jsx @@ -86,7 +86,8 @@ const InlineStyles = React.createClass({ }} iconStyle={{ fill: '#FF4081', - }}/> + }} + />

If you would like to override a style property that has been defined @@ -111,7 +112,8 @@ const InlineStyles = React.createClass({ className="muidocs-checkbox-example" iconStyle={{ fill: '#FF9800', - }}/> + }} + />

If you would like to add additional styling via CSS, pass in the diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx index dff2a51f6fa1db..ac0142471a2327 100644 --- a/docs/src/app/components/pages/customization/themes.jsx +++ b/docs/src/app/components/pages/customization/themes.jsx @@ -184,54 +184,64 @@ const ThemesPage = React.createClass({ + label="checkbox" + /> + disabled={true} + />

+ defaultSelected="usd" + > + label="USD" + /> + defaultChecked={true} + /> + disabled={true} + />
+ label="toggle" + /> + disabled={true} + />
+ hintText="TextField" + />
+ style={{width: '100%'}} + />
@@ -257,13 +267,16 @@ const ThemesPage = React.createClass({ label="Cancel" keyboardFocus={true} onTouchTap={this.handleRequestCloseDialog} - secondary={true} />, + secondary={true} + />, , + primary={true} + />, ]} - onRequestClose={this.handleRequestCloseDialog}> + onRequestClose={this.handleRequestCloseDialog} + > The actions in this window are created from the json that's passed in.
@@ -272,9 +285,12 @@ const ThemesPage = React.createClass({
- + label="View LeftNav" + /> + Menu Item Menu Item 2 @@ -284,13 +300,15 @@ const ThemesPage = React.createClass({
+ label="View Snackbar" + /> + onActionTouchTap={this.handleRequestCloseSnackbar} + />
@@ -576,7 +594,8 @@ const ThemesPage = React.createClass({
+ componentInfo={info} + />

Custom Themes

diff --git a/docs/src/app/components/pages/home-feature.jsx b/docs/src/app/components/pages/home-feature.jsx index 913e17b763584b..b5c958ef337810 100644 --- a/docs/src/app/components/pages/home-feature.jsx +++ b/docs/src/app/components/pages/home-feature.jsx @@ -111,7 +111,8 @@ let HomeFeature = React.createClass({ onMouseLeave={this._onMouseLeave} style={this.mergeStyles( styles.root, - this.props.lastChild && styles.rootWhenLastChild)}> + this.props.lastChild && styles.rootWhenLastChild)} + >

{this.props.heading}

diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx index bb3d3d52fa9dfa..64c664a734f6dc 100644 --- a/docs/src/app/components/pages/home.jsx +++ b/docs/src/app/components/pages/home.jsx @@ -92,7 +92,8 @@ const HomePage = React.createClass({ onTouchTap={this._onDemoClick} linkButton={true} style={styles.demoStyle} - labelStyle={styles.label}/> + labelStyle={styles.label} + />
); @@ -123,7 +124,8 @@ const HomePage = React.createClass({ useContent={true} contentStyle={styles.content} contentType="p" - className="home-purpose"> + className="home-purpose" + > Material-UI came about from our love of  React and  @@ -144,16 +146,19 @@ const HomePage = React.createClass({ heading="Get Started" route="/get-started" img="images/get-started.svg" - firstChild={true}/> + firstChild={true} + /> + img="images/css-framework.svg" + /> + lastChild={true} + /> ); }, @@ -186,7 +191,8 @@ const HomePage = React.createClass({ primary={true} linkButton={true} href="https://github.com/callemall/material-ui" - style={styles.button}/> + style={styles.button} + /> ); }, diff --git a/src/DropDownMenu/DropDownMenu.jsx b/src/DropDownMenu/DropDownMenu.jsx index a76bcf6f9ab976..a1f07efee66ed4 100644 --- a/src/DropDownMenu/DropDownMenu.jsx +++ b/src/DropDownMenu/DropDownMenu.jsx @@ -385,7 +385,8 @@ const DropDownMenu = React.createClass({ key={idx} primaryText={item[displayMember || 'text']} value={item[valueMember]} - onTouchTap={this._onMenuItemTouchTap.bind(this, idx, item)} /> + onTouchTap={this._onMenuItemTouchTap.bind(this, idx, item)} + /> )) : React.Children.map(children, child => { const clone = React.cloneElement(child, { @@ -420,13 +421,14 @@ const DropDownMenu = React.createClass({ style={popoverStyle} animation={PopoverAnimationFromTop} open={open} - onRequestClose={this._onMenuRequestClose} > + onRequestClose={this._onMenuRequestClose} + > + > {menuItemElements} diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx index 0f7d6395a145de..f981607345792c 100644 --- a/src/TextField/TextField.jsx +++ b/src/TextField/TextField.jsx @@ -467,7 +467,8 @@ const TextField = React.createClass({ htmlFor={inputId} shrink={this.state.hasValue || this.state.isFocused} disabled={disabled} - onTouchTap={this.focus}> + onTouchTap={this.focus} + > {floatingLabelText} ) : null; @@ -505,13 +506,15 @@ const TextField = React.createClass({ rows={rows} rowsMax={rowsMax} onHeightChange={this._handleTextAreaHeightChange} - textareaStyle={styles.textarea} /> + textareaStyle={styles.textarea} + /> ) : ( + type={type} + /> ); } diff --git a/src/TextField/TextFieldHint.jsx b/src/TextField/TextFieldHint.jsx index c080e7cb41b7d3..de38e8a18cc955 100644 --- a/src/TextField/TextFieldHint.jsx +++ b/src/TextField/TextFieldHint.jsx @@ -54,8 +54,8 @@ const TextFieldHint = (props) => { }; return ( -
{text} +
+ {text}
); }; diff --git a/src/app-bar.jsx b/src/app-bar.jsx index c900452998e376..9b722a0790ebb5 100644 --- a/src/app-bar.jsx +++ b/src/app-bar.jsx @@ -242,12 +242,16 @@ const AppBar = React.createClass({ // If the title is a string, wrap in an h1 tag. // If not, just use it as a node. titleElement = typeof title === 'string' || title instanceof String ? -

+

{title}

: -
+
{title}
; } @@ -274,7 +278,8 @@ const AppBar = React.createClass({ style={this.mergeStyles(styles.iconButton.style)} iconStyle={this.mergeStyles(styles.iconButton.iconStyle)} iconClassName={iconClassNameLeft} - onTouchTap={this._onLeftIconButtonTouchTap}> + onTouchTap={this._onLeftIconButtonTouchTap} + > {child} ); @@ -308,7 +313,8 @@ const AppBar = React.createClass({ style={iconRightStyle} iconStyle={this.mergeStyles(styles.iconButton.iconStyle)} iconClassName={iconClassNameRight} - onTouchTap={this._onRightIconButtonTouchTap} /> + onTouchTap={this._onRightIconButtonTouchTap} + /> ); } @@ -318,11 +324,12 @@ const AppBar = React.createClass({ rounded={false} className={className} style={this.mergeStyles(styles.root, style)} - zDepth={zDepth}> - {menuElementLeft} - {titleElement} - {menuElementRight} - {children} + zDepth={zDepth} + > + {menuElementLeft} + {titleElement} + {menuElementRight} + {children} ); }, diff --git a/src/auto-complete.jsx b/src/auto-complete.jsx index 5fa906c85be3cd..22f08130d574d7 100644 --- a/src/auto-complete.jsx +++ b/src/auto-complete.jsx @@ -352,7 +352,8 @@ const AutoComplete = React.createClass({ initiallyKeyboardFocused={false} onItemTouchTap={this._handleItemTouchTap} listStyle={this.mergeStyles(styles.list, listStyle)} - style={mergedMenuStyles}> + style={mergedMenuStyles} + > { requestsList.map((request, index) => { switch (typeof request) { @@ -391,12 +392,15 @@ const AutoComplete = React.createClass({ } return ( -
+
+ }} + > + {...textFieldProps} + />
+ onRequestClose={this._close} + > {menu}
diff --git a/src/card/card-expandable.jsx b/src/card/card-expandable.jsx index 96d9a7b5c15ce9..3e7bbef5105312 100644 --- a/src/card/card-expandable.jsx +++ b/src/card/card-expandable.jsx @@ -98,7 +98,8 @@ const CardExpandable = React.createClass({ let expandableBtn = ( + onTouchTap={this.props.onExpanding} + > {expandable} ); diff --git a/src/checkbox.jsx b/src/checkbox.jsx index c000c0153ef201..5589b20f9aa056 100644 --- a/src/checkbox.jsx +++ b/src/checkbox.jsx @@ -248,7 +248,8 @@ const Checkbox = React.createClass({ return ( + {...enhancedSwitchProps} + /> ); }, }); diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index 8368a7d88b6d2d..51454d2aa26b47 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -223,8 +223,11 @@ const CircularProgress = React.createClass({
- +
diff --git a/src/clearfix.jsx b/src/clearfix.jsx index 44914edbc60e47..b64fd6e84f9e62 100644 --- a/src/clearfix.jsx +++ b/src/clearfix.jsx @@ -18,7 +18,8 @@ const ClearFix = ({style, children, ...other}) => ( {...other} beforeStyle={styles.before} afterStyle={styles.after} - style={style}> + style={style} + > {children} ); diff --git a/src/date-picker/calendar-month.jsx b/src/date-picker/calendar-month.jsx index cd2258de6f1e6c..9d8d38eab8d4ca 100644 --- a/src/date-picker/calendar-month.jsx +++ b/src/date-picker/calendar-month.jsx @@ -51,7 +51,8 @@ const CalendarMonth = React.createClass({ date={day} onTouchTap={this._handleDayTouchTap} selected={selected} - disabled={disabled} /> + disabled={disabled} + /> ); }, this); }, diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index e50da6d4e3f55f..ffee720abe8e33 100644 --- a/src/date-picker/calendar-toolbar.jsx +++ b/src/date-picker/calendar-toolbar.jsx @@ -109,25 +109,26 @@ const CalendarToolbar = React.createClass({ + direction={this.state.transitionDirection} + >
{dateTimeFormatted}
 - - {nextButtonIcon} + onTouchTap={this._prevMonthTouchTap} + > + {nextButtonIcon} - - {prevButtonIcon} + onTouchTap={this._nextMonthTouchTap} + > + {prevButtonIcon} diff --git a/src/date-picker/calendar-year.jsx b/src/date-picker/calendar-year.jsx index e012989ec58f8a..81ae8d92c7c872 100644 --- a/src/date-picker/calendar-year.jsx +++ b/src/date-picker/calendar-year.jsx @@ -48,7 +48,8 @@ const CalendarYear = React.createClass({ year={year} onTouchTap={this._handleYearTouchTap} selected={selected} - {...selectedProps} /> + {...selectedProps} + /> ); years.push(yearButton); diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index 9bd70b6c09430e..6518136dccc1b2 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -97,7 +97,8 @@ const Calendar = React.createClass({ onYearTouchTap={this._handleYearTouchTap} selectedDate={this.state.selectedDate} minDate={this.props.minDate} - maxDate={this.props.maxDate} /> + maxDate={this.props.maxDate} + /> ); }, @@ -308,7 +309,8 @@ const Calendar = React.createClass({ handleYearClick={this._handleYearClick} monthDaySelected={this.state.displayMonthDay} mode={this.props.mode} - weekCount={weekCount} /> + weekCount={weekCount} + /> {this.state.displayMonthDay &&
+ nextMonth={toolbarInteractions.nextMonth} + /> + style={styles.weekTitle} + >
  • S
  • M
  • T
    • @@ -329,8 +333,7 @@ const Calendar = React.createClass({
  • F
  • S
    •  - + + shouldDisableDate={this.props.shouldDisableDate} + />
    } diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index 39adef801581bb..101d91534aabfc 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -172,17 +172,22 @@ const DateDisplay = React.createClass({
    -
    {year}
    + direction={this.state.transitionDirection} + > +
    + {year} +
    + direction={this.state.transitionDirection} + >
    - {dateTimeFormatted} + onTouchTap={this._handleMonthDayClick} + > + {dateTimeFormatted}
    diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index 81daa46d65ca77..85ffc9a5850b04 100644 --- a/src/date-picker/date-picker-dialog.jsx +++ b/src/date-picker/date-picker-dialog.jsx @@ -183,7 +183,8 @@ const DatePickerDialog = React.createClass({ label={wordings.cancel} secondary={true} style={styles.actions} - onTouchTap={this._handleCancelTouchTap} />, + onTouchTap={this._handleCancelTouchTap} + />, ]; if (!this.props.autoOk) { @@ -194,7 +195,8 @@ const DatePickerDialog = React.createClass({ secondary={true} disabled={this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled()} style={styles.actions} - onTouchTap={this._handleOKTouchTap} /> + onTouchTap={this._handleOKTouchTap} + /> ); } @@ -210,7 +212,8 @@ const DatePickerDialog = React.createClass({ actions={actions} repositionOnUpdate={false} open={this.state.open} - onRequestClose={this.dismiss}> + onRequestClose={this.dismiss} + > + mode={this.props.mode} + /> ); }, diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 91ddb3fdc83f69..9fe6f2162ddf33 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -294,7 +294,8 @@ const DatePicker = React.createClass({ ref="input" value={this.state.date ? formatDate(this.state.date) : undefined} onFocus={this._handleInputFocus} - onTouchTap={this._handleInputTouchTap}/> + onTouchTap={this._handleInputTouchTap} + /> + shouldDisableDate={this.props.shouldDisableDate} + />
    - ); }, diff --git a/src/date-picker/day-button.jsx b/src/date-picker/day-button.jsx index 013f89cc67915c..1bc39c39b9161f 100644 --- a/src/date-picker/day-button.jsx +++ b/src/date-picker/day-button.jsx @@ -133,7 +133,8 @@ const DayButton = React.createClass({ } return this.props.date ? ( - + onKeyboardFocus={this._handleKeyboardFocus} + >
    {this.props.date.getDate()} diff --git a/src/date-picker/year-button.jsx b/src/date-picker/year-button.jsx index b6f154519a0e61..809644a8bd3dc6 100644 --- a/src/date-picker/year-button.jsx +++ b/src/date-picker/year-button.jsx @@ -126,13 +126,15 @@ const YearButton = React.createClass({ } return ( - + onTouchTap={this._handleTouchTap} + >
    {year} diff --git a/src/dialog.jsx b/src/dialog.jsx index f43fecbe0a9935..681b7abbb43df8 100644 --- a/src/dialog.jsx +++ b/src/dialog.jsx @@ -427,16 +427,20 @@ const DialogInline = React.createClass({ return (
    - + transitionEnter={true} transitionEnterTimeout={450} + > {open && + style={styles.content} + > + zDepth={4} + > {titleElement}
    + onTouchTap={this._handleOverlayTouchTap} + />
    ); }, diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx index cfbcf66ea274a2..40e3bc3ef415ce 100644 --- a/src/enhanced-button.jsx +++ b/src/enhanced-button.jsx @@ -186,7 +186,8 @@ const EnhancedButton = React.createClass({ + opacity={touchRippleOpacity} + > {children} ) : undefined; @@ -289,7 +290,8 @@ const EnhancedButton = React.createClass({ return ( + style={mergedStyles} + > {children} ); diff --git a/src/enhanced-switch.jsx b/src/enhanced-switch.jsx index 5674e4f2e27554..6dda22777e85a0 100644 --- a/src/enhanced-switch.jsx +++ b/src/enhanced-switch.jsx @@ -387,7 +387,8 @@ const EnhancedSwitch = React.createClass({ let inputElement = ( + {...inputProps} + /> ); let touchRipple = ( @@ -396,7 +397,8 @@ const EnhancedSwitch = React.createClass({ key="touchRipple" style={rippleStyle} color={rippleColor} - centerRipple={true} /> + centerRipple={true} + /> ); let focusRipple = ( @@ -404,7 +406,8 @@ const EnhancedSwitch = React.createClass({ key="focusRipple" innerStyle={rippleStyle} color={rippleColor} - show={this.state.isKeyboardFocused} /> + show={this.state.isKeyboardFocused} + /> ); let ripples = [ @@ -444,8 +447,8 @@ const EnhancedSwitch = React.createClass({ return (
    - {inputElement} - {elementsInOrder} + {inputElement} + {elementsInOrder}
    ); }, diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx index de679c7d23b29a..31158cbe1a82fc 100644 --- a/src/enhanced-textarea.jsx +++ b/src/enhanced-textarea.jsx @@ -172,13 +172,15 @@ const EnhancedTextarea = React.createClass({ defaultValue={this.props.defaultValue} readOnly={true} value={this.props.value} - valueLink={this.props.valueLink} /> + valueLink={this.props.valueLink} + />