diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000000000..83e9de01d05a2a --- /dev/null +++ b/.babelrc @@ -0,0 +1,7 @@ +{ + "breakConfig": true, + "stage": 1, + "plugins": [ + "dev-expression" + ] +} diff --git a/.eslintrc b/.eslintrc index 97a089f71a626a..82f5333bf8fe84 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,6 @@ +# So parent files don't get applied +root: true + env: es6: true browser: true diff --git a/.travis.yml b/.travis.yml index 2d63fafb93ddf0..41586280211d3e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,3 +2,6 @@ language: node_js node_js: - "stable" sudo: false +script: + - npm run lint + - npm test diff --git a/CHANGELOG.md b/CHANGELOG.md index 570e89047adec1..5ff985cb5f5e0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,69 @@ +## 0.13.2 +###### _Nov 9, 2015_ + +##### General +- Add tabs with slide effect (#1907) +- Universal rendering support (#2007) (thanks @Cavitt) +- Add labelPosition prop to buttons (#2014) +- Add RenderToLayer component (#2042) (thanks @chrismcv) +- Open state of of dialog now controlled through props (#1996) + - openImmediately, show(), dismiss() deprecated +- Update TextField docs (#2070) +- New Badge component (#2045) (thanks @rhythnic) +- Add import statements to components' docs pages (#2113) + +##### Component Fixes / Enhancements +- Fix server side rendering (#2021) +- Add key to TableHeaderColumn for selectAll (#2030) +- Fix Circular Progress transition (#2047) +- Fix Snackbar getting stuck when receiving new props (#2024) +- iPad enhanced textarea fix (#1720) +- Table clickAway triggers onRowSelection (#2054) +- Theme color fixes for Slider and Toggle (#2016) + +## 0.13.1 +###### _Oct 29, 2015_ + +##### General +- [SVGIcons] added index.js and index-generator script (#1959) +- [TimePicker] openDialog() function (#1939) and autoOk prop (#1940) added +- [DatePicker] i18n support added (#1658) +- [LeftNav] supports nested children (w/o menuItems) (#1982) +- [Snackbar] updated for new specification (#1668) +- [Tabs] added tabTemplate prop (#1691) + +##### Component Fixes / Enhancements +- [TextArea] height issue fixed (#1875) +- [GridList] doc added (#1948) with code examples (#1988) +- [TextField] fixed custom theme color hiding backgroundColor (#1989) +- [TimePicker] added style and textFieldStyle props (#1949) +- [Card] text color is now pulled from theme (#1995) + +## 0.13.0 +###### _Oct 21, 2015_ + +##### Breaking Changes +- Material-UI for React 0.14.x + +##### Component Fixes / Enhancements +- FloatingActionButton now has iconStyle prop (#1575) +- Card title and subtitle props can be any node (#1950) + +## 0.12.5 +###### _Oct 21, 2015_ + +v0.12.4 should have really been v0.13.0 as it breaks compatibility with React 0.13.3. This version fixes that. We reverted some commits (related to React 0.14.0 support) from v0.12.4 to bring to you v0.12.5 that works as expected. + +##### Component Fixes / Enhancements +- DatePicker performance has been improved (#1905) +- Docs code now follows ESLint rules more strictly (#1778) +- Removed duplicate keys in component definitions (#1933) + ## 0.12.4 ###### _Oct 19, 2015_ +**This version is not compatible with React 0.13.x.** If you're on React 0.13.x, use Material-UI v0.12.5 instead. + ##### General - React 0.14 compatible diff --git a/README.md b/README.md index b9333208dd4186..7e75ca7b08dcb7 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ -#[Material-UI](http://callemall.github.io/material-ui/) [![npm package](https://img.shields.io/npm/v/material-ui.svg?style=flat-square)](https://www.npmjs.org/package/material-ui) [![Build Status](https://img.shields.io/travis/callemall/material-ui.svg?style=flat-square)](https://travis-ci.org/callemall/material-ui) [![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg?style=flat-square)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +#[Material-UI](http://callemall.github.io/material-ui/) +[![npm package](https://img.shields.io/npm/v/material-ui.svg?style=flat-square)](https://www.npmjs.org/package/material-ui) +[![Build Status](https://travis-ci.org/callemall/material-ui.svg?branch=master)](https://travis-ci.org/callemall/material-ui) +[![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg?style=flat-square)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![PeerDependencies](https://img.shields.io/david/peer/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui#info=peerDependencies&view=list) [![Dependencies](https://img.shields.io/david/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui) diff --git a/docs/package.json b/docs/package.json index c7ddee6a5a5dbd..da50229a91f868 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,11 +1,12 @@ { "name": "material-ui-docs", - "version": "0.12.4", + "version": "0.13.2", "description": "Documentation site for material-ui", "repository": { "type": "git", "url": "https://github.com/callemall/material-ui.git" }, + "private": true, "scripts": { "prestart": "webpack-dev-server --config webpack-dev-server.config.js --progress --colors --inline", "start": "open http://localhost:3000", @@ -15,13 +16,10 @@ "dependencies": { "codemirror": "^5.5.0", "history": "^1.11.1", - "react-addons-create-fragment": "^0.14.0", "react-addons-perf": "^0.14.0", - "react-addons-pure-render-mixin": "^0.14.0", - "react-addons-transition-group": "^0.14.0", - "react-addons-update": "^0.14.0", "react-dom": "^0.14.0", - "react-tap-event-plugin": "^0.2.0" + "react-motion": "^0.3.1", + "react-swipeable-views": "^0.3.0" }, "devDependencies": { "raw-loader": "^0.5.1", diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx index 17ac49ab04552e..240314979b4705 100644 --- a/docs/src/app/app-routes.jsx +++ b/docs/src/app/app-routes.jsx @@ -22,11 +22,13 @@ const InlineStyles = require('./components/pages/customization/inline-styles'); const Components = require('./components/pages/components'); const AppBar = require('./components/pages/components/app-bar'); const Avatars = require('./components/pages/components/avatars'); +const Badge = require('./components/pages/components/badge'); const Buttons = require('./components/pages/components/buttons'); const Cards = require('./components/pages/components/cards'); const DatePicker = require('./components/pages/components/date-picker'); const Dialog = require('./components/pages/components/dialog'); const DropDownMenu = require('./components/pages/components/drop-down-menu'); +const GridList = require('./components/pages/components/grid-list'); const Icons = require('./components/pages/components/icons'); const IconButtons = require('./components/pages/components/icon-buttons'); const IconMenus = require('./components/pages/components/icon-menus'); @@ -34,6 +36,7 @@ const LeftNav = require('./components/pages/components/left-nav'); const Lists = require('./components/pages/components/lists'); const Menus = require('./components/pages/components/menus'); const Paper = require('./components/pages/components/paper'); +const Popover = require('./components/pages/components/popover'); const Progress = require('./components/pages/components/progress'); const RefreshIndicator = require('./components/pages/components/refresh-indicator'); const Sliders = require('./components/pages/components/sliders'); @@ -76,11 +79,13 @@ const AppRoutes = ( + + @@ -88,6 +93,7 @@ const AppRoutes = ( + diff --git a/docs/src/app/components/pages/components.jsx b/docs/src/app/components/pages/components.jsx index 93340e31491384..2b1175489e00be 100644 --- a/docs/src/app/components/pages/components.jsx +++ b/docs/src/app/components/pages/components.jsx @@ -7,11 +7,13 @@ export default class Components extends React.Component { let menuItems = [ { route: '/components/appbar', text: 'AppBar'}, { route: '/components/avatars', text: 'Avatars'}, + { route: '/components/badge', text: 'Badge'}, { route: '/components/buttons', text: 'Buttons'}, { route: '/components/cards', text: 'Cards'}, { route: '/components/date-picker', text: 'Date Picker'}, { route: '/components/dialog', text: 'Dialog'}, { route: '/components/dropdown-menu', text: 'Dropdown Menu'}, + { route: '/components/grid-list', text: 'Grid List'}, { route: '/components/icons', text: 'Icons'}, { route: '/components/icon-buttons', text: 'Icon Buttons'}, { route: '/components/icon-menus', text: 'Icon Menus'}, @@ -19,6 +21,7 @@ export default class Components extends React.Component { { route: '/components/lists', text: 'Lists'}, { route: '/components/menus', text: 'Menus'}, { route: '/components/paper', text: 'Paper'}, + { route: '/components/popover', text: 'Popover'}, { route: '/components/progress', text: 'Progress'}, { route: '/components/refresh-indicator', text: 'Refresh Indicator'}, { route: '/components/sliders', text: 'Sliders'}, diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx index a0900340ab69e8..4c235915f77259 100644 --- a/docs/src/app/components/pages/components/app-bar.jsx +++ b/docs/src/app/components/pages/components/app-bar.jsx @@ -1,15 +1,22 @@ -let React = require('react'); -let { AppBar, DropDownMenu } = require('material-ui'); -let IconButton = require('icon-button'); -let NavigationClose = require('svg-icons/navigation/close'); -let FlatButton = require('flat-button'); -let ComponentDoc = require('../../component-doc'); -let CodeExample = require('../../code-example/code-example'); -let Code = require('app-bar-code'); +const React = require('react'); +const { AppBar, DropDownMenu, Paper } = require('material-ui'); +const IconButton = require('icon-button'); +const NavigationClose = require('svg-icons/navigation/close'); +const FlatButton = require('flat-button'); +const ComponentDoc = require('../../component-doc'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); +const Code = require('app-bar-code'); const IconMenu = require('menus/icon-menu'); const MenuItem = require('menus/menu-item'); const MoreVertIcon = require('svg-icons/navigation/more-vert'); +const styles = { + title: { + cursor: 'pointer', + }, +}; + export default class AppBarPage extends React.Component { constructor(props) { @@ -63,7 +70,7 @@ export default class AppBarPage extends React.Component { name: 'style', type: 'object', header: 'optional', - desc: 'Override the inline-styles of the app bars\'s root element.', + desc: 'Override the inline-styles of the app bar\'s root element.', }, { name: 'showMenuIconButton', @@ -102,6 +109,12 @@ export default class AppBarPage extends React.Component { desc: 'Callback function for when the right icon is selected via ' + 'a touch tap.', }, + { + name: 'onTitleTouchTap', + header: 'AppBar.onTitleTouchTap(e)', + desc: 'Callback function for when the title text is selected via ' + + 'a touch tap.', + }, ], }, ]; @@ -113,13 +126,23 @@ export default class AppBarPage extends React.Component { name="AppBar" desc={this.desc} componentInfo={this.componentInfo}> + + + + { + '//Import statement:\nconst AppBar = require(\'material-ui/lib/app-bar\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
Title} iconElementLeft={} iconElementRight={} />
@@ -140,4 +163,8 @@ export default class AppBarPage extends React.Component { ); } + _onTouchTap() { + alert('onTouchTap triggered on the title component'); + } + } diff --git a/docs/src/app/components/pages/components/avatars.jsx b/docs/src/app/components/pages/components/avatars.jsx index 552e23f83697c6..d82dfaa90250cb 100644 --- a/docs/src/app/components/pages/components/avatars.jsx +++ b/docs/src/app/components/pages/components/avatars.jsx @@ -1,10 +1,11 @@ -let React = require('react'); -let { Avatar, FontIcon, List, ListItem, Styles } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let FileFolder = require('svg-icons/file/folder'); -let { Colors } = Styles; -let Code = require('avatars-code'); -let CodeExample = require('../../code-example/code-example'); +const React = require('react'); +const { Avatar, FontIcon, List, ListItem, Styles, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const FileFolder = require('svg-icons/file/folder'); +const { Colors } = Styles; +const Code = require('avatars-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class AvatarsPage extends React.Component { @@ -70,6 +71,16 @@ export default class AvatarsPage extends React.Component { name="Avatars" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst Avatar = require(\'material-ui/lib/avatar\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + Image Avatar diff --git a/docs/src/app/components/pages/components/badge.jsx b/docs/src/app/components/pages/components/badge.jsx new file mode 100644 index 00000000000000..4ca67f96986985 --- /dev/null +++ b/docs/src/app/components/pages/components/badge.jsx @@ -0,0 +1,99 @@ +const React = require('react'); +const { FontIcon, IconButton, Badge, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('badge-code'); +const CodeExample = require('../../code-example/code-example'); +const NotificationsIcon = require('svg-icons/social/notifications'); +const ShoppingCartIcon = require('svg-icons/action/shopping-cart'); +const FolderIcon = require('svg-icons/file/folder-open'); +const UploadIcon = require('svg-icons/file/cloud-upload'); +const CodeBlock = require('../../code-example/code-block'); + +export default class BadgePage extends React.Component { + constructor(props) { + super(props); + + this.desc = 'This component generates a small badge to the top-right of it\'s child(ren)'; + + this.componentInfo = [ + { + name: 'Props', + infoArray: [ + { + name: 'badgeContent', + type: 'node', + header: 'required', + desc: 'This is the content rendered within the badge.', + }, + { + name: 'primary', + type: 'bool', + header: 'default: false', + desc: 'If true, the badge will use the primary badge colors.', + }, + { + name: 'secondary', + type: 'bool', + header: 'default: false', + desc: 'If true, the badge will use the secondary badge colors.', + }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the root element.', + }, + { + name: 'badgeStyle', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the badge element.', + }, + ], + }, + ]; + } + + render() { + return ( + + + + + { + '//Import statement:\nconst Badge = require(\'material-ui/lib/badge\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + + + + + + + + + + + + + }> + + + + +

Company Name

+ + + + + ); + } + +} diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx index 66d6b52e646171..d2890faf905374 100644 --- a/docs/src/app/components/pages/components/buttons.jsx +++ b/docs/src/app/components/pages/components/buttons.jsx @@ -1,25 +1,27 @@ -let React = require('react'); -let ComponentDoc = require('../../component-doc'); -let mui = require('material-ui'); -let ToggleStar = require('svg-icons/toggle/star'); +const React = require('react'); +const ComponentDoc = require('../../component-doc'); +const mui = require('material-ui'); +const ToggleStar = require('svg-icons/toggle/star'); -let { +const { ClearFix, FlatButton, FloatingActionButton, FontIcon, RaisedButton, + Paper, Styles, Tab, Tabs, Utils, } = mui; -let extend = Utils.Extend; -let { Colors, Typography } = Styles; -let RaisedButtonCode = require('raised-button-code'); -let FloatingActionButtonCode = require('floating-action-button-code'); -let FlatButtonCode = require('flat-button-code'); -let CodeExample = require('../../code-example/code-example'); +const extend = Utils.Extend; +const { Colors, Typography } = Styles; +const RaisedButtonCode = require('raised-button-code'); +const FloatingActionButtonCode = require('floating-action-button-code'); +const FlatButtonCode = require('flat-button-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class ButtonPage extends React.Component { @@ -70,6 +72,12 @@ export default class ButtonPage extends React.Component { header: 'optional', desc: 'Override the inline-styles of the button\'s label element.', }, + { + name: 'labelPosition', + type: 'oneOf ["before", "after"]', + header: 'default: "before"', + desc: 'Place label before or after the passed children', + }, { name: 'linkButton', type: 'bool', @@ -319,7 +327,6 @@ export default class ButtonPage extends React.Component { height: '100%', display: 'inline-block', verticalAlign: 'middle', - float: 'left', paddingLeft: '12px', lineHeight: '36px', color: Colors.cyan500, @@ -347,12 +354,25 @@ export default class ButtonPage extends React.Component { return (

Buttons

+ + + + { + '//Import statements:\nconst FlatButton = require(\'material-ui/lib/flat-button\');\n' + + 'const RaisedButton = require(\'material-ui/lib/raised-button\');\n' + + 'const FloatingActionButton = require(\'material-ui/lib/floating-action-button\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + +
@@ -375,7 +395,17 @@ export default class ButtonPage extends React.Component { + + +
+
+ @@ -420,6 +450,15 @@ export default class ButtonPage extends React.Component {
+
+ + + +
diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx index cb89da0dbfa486..121c02a2f10db4 100644 --- a/docs/src/app/components/pages/components/cards.jsx +++ b/docs/src/app/components/pages/components/cards.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let mui = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let CodeExample = require('../../code-example/code-example'); +const React = require('react'); +const mui = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const CodeExample = require('../../code-example/code-example'); -let { +const { Avatar, Card, CardActions, @@ -13,8 +13,10 @@ let { CardText, CardTitle, FlatButton, + Paper, } = mui; -let Code = require('cards-code'); +const Code = require('cards-code'); +const CodeBlock = require('../../code-example/code-block'); export default class CardPage extends React.Component { @@ -68,6 +70,12 @@ export default class CardPage extends React.Component { 'and CardActions implement showExpandableButton. Any child component of Card can implements ' + 'showExpandableButton or forwards the property to a child component supporting it.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the card\'s root element.', + }, ], }, { @@ -90,6 +98,22 @@ export default class CardPage extends React.Component { name="Card" desc={this.desc} componentInfo={this.componentInfo}> + + + + { + '//Import statements:\nconst Card = require(\'material-ui/lib/card/card\');\n' + + 'const CardActions = require(\'material-ui/lib/card/card-actions\');\n' + + 'const CardExpandable = require(\'material-ui/lib/card/card-expandable\');\n' + + 'const CardHeader = require(\'material-ui/lib/card/card-header\');\n' + + 'const CardMedia = require(\'material-ui/lib/card/card-media\');\n' + + 'const CardText = require(\'material-ui/lib/card/card-text\');\n' + + 'const CardTitle = require(\'material-ui/lib/card/card-title\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + + + + { + '//Import statements:\nconst DatePicker = require(\'material-ui/lib/date-picker/date-picker\');\n' + + 'const DatePickerDialog = require(\'material-ui/lib/date-picker/date-picker-dialog\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + @@ -183,6 +221,15 @@ export default class DatePickerPage extends React.Component { hintText="Landscape Dialog" mode="landscape" /> + + + + + +
+ + + + { + '//Import statement:\nconst Dialog = require(\'material-ui/lib/dialog\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +

@@ -175,7 +212,8 @@ export default class DialogPage extends React.Component { title="Dialog With Standard Actions" actions={standardActions} actionFocus="submit" - modal={this.state.modal}> + open={this.state.openDialogStandardActions} + onRequestClose={this._handleRequestClose}> The actions in this window are created from the json that's passed in. @@ -183,7 +221,8 @@ export default class DialogPage extends React.Component { ref="customDialog" title="Dialog With Custom Actions" actions={customActions} - modal={this.state.modal}> + open={this.state.openDialogCustomActions} + onRequestClose={this._handleRequestClose}> The actions in this window were passed in as an array of react objects.
@@ -196,9 +235,10 @@ export default class DialogPage extends React.Component { ref="scrollableContentDialog" title="Dialog With Scrollable Content" actions={scrollableCustomActions} - modal={this.state.modal} autoDetectWindowHeight={true} - autoScrollBodyContent={true}> + autoScrollBodyContent={true} + open={this.state.openDialogScrollable} + onRequestClose={this._handleRequestClose}>
Really long content
@@ -214,11 +254,15 @@ export default class DialogPage extends React.Component { } _handleCustomDialogCancel() { - this.refs.customDialog.dismiss(); + this.setState({ + openDialogCustomActions: true, + }); } _handleCustomDialogSubmit() { - this.refs.customDialog.dismiss(); + this.setState({ + openDialogCustomActions: true, + }); } _handleToggleChange(e, toggled) { @@ -226,23 +270,42 @@ export default class DialogPage extends React.Component { } _handleScrollableDialogCancel() { - this.refs.scrollableContentDialog.dismiss(); + this.setState({ + openDialogScrollable: false, + }); } _handleScrollableDialogSubmit() { - this.refs.scrollableContentDialog.dismiss(); + this.setState({ + openDialogScrollable: false, + }); } _handleCustomDialogTouchTap() { - this.refs.customDialog.show(); + this.setState({ + openDialogScrollable: true, + }); } _handleStandardDialogTouchTap() { - this.refs.standardDialog.show(); + this.setState({ + openDialogStandardActions: true, + }); } _handleScrollableDialogTouchTap() { - this.refs.scrollableContentDialog.show(); + this.setState({ + openDialogScrollable: true, + }); + } + + _handleRequestClose(buttonClicked) { + if (!buttonClicked && this.state.modal) return; + this.setState({ + openDialogStandardActions: false, + openDialogCustomActions: false, + openDialogScrollable: false, + }); } } diff --git a/docs/src/app/components/pages/components/drop-down-menu.jsx b/docs/src/app/components/pages/components/drop-down-menu.jsx index 7b7fc2a4051bb8..0bf50932e52eec 100644 --- a/docs/src/app/components/pages/components/drop-down-menu.jsx +++ b/docs/src/app/components/pages/components/drop-down-menu.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { DropDownMenu } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('drop-down-menu-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { DropDownMenu, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('drop-down-menu-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class DropDownMenuPage extends React.Component { @@ -92,6 +92,12 @@ export default class DropDownMenuPage extends React.Component { header: 'default: false', desc: 'Disables the menu.', }, + { + name: 'openImmediately', + type: 'bool', + header: 'default: false', + desc: 'Set to true to have the DropDownMenu automatically open on mount.', + }, ], }, { @@ -111,6 +117,16 @@ export default class DropDownMenuPage extends React.Component { + + + + { + '//Import statement:\nconst DropDownMenu = require(\'material-ui/lib/drop-down-menu\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/grid-list.jsx b/docs/src/app/components/pages/components/grid-list.jsx index 4c42eb526a753a..fda7e10432f0d4 100644 --- a/docs/src/app/components/pages/components/grid-list.jsx +++ b/docs/src/app/components/pages/components/grid-list.jsx @@ -1,52 +1,19 @@ -let React = require('react'); -let { GridList, GridTile } = require('material-ui'); +const React = require('react'); +const { GridList, GridTile, Paper } = require('material-ui'); -let StarBorder = require('svg-icons/toggle/star-border'); -let IconButton = require('icon-button'); - -let ComponentDoc = require('../../component-doc'); +const StarBorder = require('svg-icons/toggle/star-border'); +const IconButton = require('icon-button'); +const ComponentDoc = require('../../component-doc'); +const Code = require('grid-list-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); class GridListPage extends React.Component { constructor(props) { super(props); - this.code = ` -{/* Basic grid list with mostly default options */} - - { - tilesData.map(tile => by {tile.author}} - actionIcon={} - >) - } - -{/* Grid list with all possible overrides */} - - { - tilesData.map(tile => } - actionPosition="left" - titlePosition="top" - titleBackground={gradientBg} - cols={tile.featured ? 2 : 1} - rows={tile.featured ? 2 : 1} - >) - } - - `; - this.desc =

Simple flex-box based Grid List implementation. Support tiles with arbitrary cell size, @@ -77,6 +44,12 @@ class GridListPage extends React.Component { header: 'optional', desc: 'Number of px for one cell height. Defaults to 180.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the grid list\'s root element.', + }, ], }, { @@ -84,7 +57,7 @@ class GridListPage extends React.Component { infoArray: [ { name: 'title', - type: 'string', + type: 'node', header: 'optional', desc: 'Title to be displayed on tile.', }, @@ -130,6 +103,12 @@ class GridListPage extends React.Component { header: 'optional', desc: 'Height of the tile in number of grid cells. Defaults to 1.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the grid tile\'s root element.', + }, { name: 'rootClass', type: 'string|ReactComponent', @@ -199,7 +178,7 @@ class GridListPage extends React.Component { }, ]; - let 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%);'; + let 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%)'; return ( -

- {/* Basic grid list with mostly default options */} - - { - tilesData.map(tile => by {tile.author}} - actionIcon={} - >) - } - - {/* Grid list with all possible overrides */} - - { - tilesData.map(tile => } - actionPosition="left" - titlePosition="top" - titleBackground={gradientBg} - cols={tile.featured ? 2 : 1} - rows={tile.featured ? 2 : 1} - >) - } - -
+ + + + { + '//Import statement:\nconst GridList = require(\'material-ui/lib/grid-list/grid-list\');\n' + + 'const GridTile = require(\'material-ui/lib/grid-list/grid-tile\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + +
+ {/* Basic grid list with mostly default options */} + + { + tilesData.map(tile => by {tile.author}} + actionIcon={} + >) + } + + {/* Grid list with all possible overrides */} + + { + tilesData.map(tile => } + actionPosition="left" + titlePosition="top" + titleBackground={gradientBg} + cols={tile.featured ? 2 : 1} + rows={tile.featured ? 2 : 1} + >) + } + +
+ ); } diff --git a/docs/src/app/components/pages/components/icon-buttons.jsx b/docs/src/app/components/pages/components/icon-buttons.jsx index 3265b03aba6b1f..6a1c2daee16fbf 100644 --- a/docs/src/app/components/pages/components/icon-buttons.jsx +++ b/docs/src/app/components/pages/components/icon-buttons.jsx @@ -1,11 +1,11 @@ -let React = require('react'); -let { FontIcon, IconButton, NavigationMenu } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let ActionGrade = require('svg-icons/action/grade'); -let ActionHome = require('svg-icons/action/home'); -let Code = require('icon-buttons-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { FontIcon, IconButton, NavigationMenu, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const ActionGrade = require('svg-icons/action/grade'); +const ActionHome = require('svg-icons/action/home'); +const Code = require('icon-buttons-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class IconButtonsPage extends React.Component { @@ -115,6 +115,16 @@ export default class IconButtonsPage extends React.Component { name="Icon Buttons" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst IconButton = require(\'material-ui/lib/icon-button\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/icon-menus.jsx b/docs/src/app/components/pages/components/icon-menus.jsx index 2225cabcf4533c..c26da0ec406acf 100644 --- a/docs/src/app/components/pages/components/icon-menus.jsx +++ b/docs/src/app/components/pages/components/icon-menus.jsx @@ -1,22 +1,22 @@ -let React = require('react'); -let { IconButton } = require('material-ui'); -let IconMenu = require('menus/icon-menu'); -let MenuItem = require('menus/menu-item'); -let MenuDivider = require('menus/menu-divider'); -let MoreVertIcon = require('svg-icons/navigation/more-vert'); -let ComponentDoc = require('../../component-doc'); - -let ContentCopy = require('svg-icons/content/content-copy'); -let ContentFilter = require('svg-icons/content/filter-list'); -let ContentLink = require('svg-icons/content/link'); -let Delete = require('svg-icons/action/delete'); -let Download = require('svg-icons/file/file-download'); -let MapsPlace = require('svg-icons/maps/place'); -let PersonAdd = require('svg-icons/social/person-add'); -let RemoveRedEye = require('svg-icons/image/remove-red-eye'); -let Code = require('icon-menus-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { IconButton, Paper } = require('material-ui'); +const IconMenu = require('menus/icon-menu'); +const MenuItem = require('menus/menu-item'); +const MenuDivider = require('menus/menu-divider'); +const MoreVertIcon = require('svg-icons/navigation/more-vert'); +const ComponentDoc = require('../../component-doc'); + +const ContentCopy = require('svg-icons/content/content-copy'); +const ContentFilter = require('svg-icons/content/filter-list'); +const ContentLink = require('svg-icons/content/link'); +const Delete = require('svg-icons/action/delete'); +const Download = require('svg-icons/file/file-download'); +const MapsPlace = require('svg-icons/maps/place'); +const PersonAdd = require('svg-icons/social/person-add'); +const RemoveRedEye = require('svg-icons/image/remove-red-eye'); +const Code = require('icon-menus-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class IconMenus extends React.Component { @@ -56,6 +56,12 @@ export default class IconMenus extends React.Component { header: 'default: false', desc: 'Indicates if the menu should render with compact desktop styles.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the icon menu\'s root element.', + }, { name: 'iconStyle', type: 'object', @@ -146,6 +152,17 @@ export default class IconMenus extends React.Component { name="Icon Menus" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst IconMenu = require(\'material-ui/lib/menus/icon-menu\');\n' + + 'const MenuItem = require(\'material-ui/lib/menus/menu-item\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
diff --git a/docs/src/app/components/pages/components/icons.jsx b/docs/src/app/components/pages/components/icons.jsx index 9a467e095d28c3..833fb0f6add53d 100644 --- a/docs/src/app/components/pages/components/icons.jsx +++ b/docs/src/app/components/pages/components/icons.jsx @@ -1,13 +1,13 @@ -let React = require('react'); -let { ClearFix, FontIcon, Styles, Paper } = require('material-ui'); -let CodeBlock = require('../../code-example/code-block'); -let ComponentDoc = require('../../component-doc'); -let ActionHome = require('svg-icons/action/home'); +const React = require('react'); +const { ClearFix, FontIcon, Styles, Paper } = require('material-ui'); +const CodeBlock = require('../../code-example/code-block'); +const ComponentDoc = require('../../component-doc'); +const ActionHome = require('svg-icons/action/home'); -let { Colors, Typography } = Styles; -let IconButtonCode = require('icons-code'); -let SvgIconsCode = require('svg-icons-code'); -let CodeExample = require('../../code-example/code-example'); +const { Colors, Typography } = Styles; +const IconButtonCode = require('icons-code'); +const SvgIconsCode = require('svg-icons-code'); +const CodeExample = require('../../code-example/code-example'); export default class FontIconPage extends React.Component { @@ -38,7 +38,7 @@ export default class FontIconPage extends React.Component { and reference the icon's className in the "className" prop.

We also support Google's - Material Icons as seen in the third block of code. If you're using the material icons, be sure to include the link to the font icon file in your head section: + Material Icons as seen in the third block of code. If you're using the material icons, be sure to include the link to the font icon file in your head section: {''} @@ -75,6 +75,12 @@ export default class FontIconPage extends React.Component { header: 'optional', desc: 'This is the icon color when the mouse hovers over the icon.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the font icon\'s root element.', + }, ], }, { @@ -93,6 +99,12 @@ export default class FontIconPage extends React.Component { header: 'optional', desc: 'This is the icon color when the mouse hovers over the icon.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the svg icon\'s root element.', + }, ], }, ]; @@ -107,6 +119,16 @@ export default class FontIconPage extends React.Component { name="Font Icons" desc={fontIconDesc} componentInfo={componentInfo.slice(0, 1)}> + + + + { + '//Import statement:\nconst FontIcon = require(\'material-ui/lib/font-icon\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx index 534612fc2736b1..b6497f1db515c1 100644 --- a/docs/src/app/components/pages/components/left-nav.jsx +++ b/docs/src/app/components/pages/components/left-nav.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { LeftNav, MenuItem, RaisedButton } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('left-nav-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { LeftNav, MenuItem, RaisedButton, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('left-nav-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class LeftNavPage extends React.Component { @@ -11,7 +11,7 @@ export default class LeftNavPage extends React.Component { super(); this._showLeftNavClick = this._showLeftNavClick.bind(this); this._toggleDockedLeftNavClick = this._toggleDockedLeftNavClick.bind(this); - + this._showLeftNavChildrenClick = this._showLeftNavChildrenClick.bind(this); this.state = { isDocked: false, }; @@ -56,7 +56,7 @@ export default class LeftNavPage extends React.Component { { name: 'menuItems', type: 'array', - header: 'required', + header: 'optional', desc: 'JSON data representing all menu items to render.', }, { @@ -141,12 +141,30 @@ export default class LeftNavPage extends React.Component { + + + + { + '//Import statement:\nconst LeftNav = require(\'material-ui/lib/left-nav\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
-

- +
+

+

+

+
+ + + Menu Item + Link +
@@ -156,7 +174,9 @@ export default class LeftNavPage extends React.Component { _showLeftNavClick() { this.refs.leftNav.toggle(); } - + _showLeftNavChildrenClick() { + this.refs.leftNavChildren.toggle(); + } _toggleDockedLeftNavClick() { this.refs.dockedLeftNav.toggle(); this.setState({ diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx index 02a00e94df4dcd..119fee1dba9ec8 100644 --- a/docs/src/app/components/pages/components/lists.jsx +++ b/docs/src/app/components/pages/components/lists.jsx @@ -1,21 +1,21 @@ -let React = require('react'); -let mui = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let MobileTearSheet = require('../../mobile-tear-sheet'); -let ActionAssignment = require('svg-icons/action/assignment'); -let ActionGrade = require('svg-icons/action/grade'); -let ActionInfo = require('svg-icons/action/info'); -let CommunicationCall = require('svg-icons/communication/call'); -let CommunicationChatBubble = require('svg-icons/communication/chat-bubble'); -let CommunicationEmail = require('svg-icons/communication/email'); -let ContentDrafts = require('svg-icons/content/drafts'); -let ContentInbox = require('svg-icons/content/inbox'); -let ContentSend = require('svg-icons/content/send'); -let EditorInsertChart = require('svg-icons/editor/insert-chart'); -let FileFolder = require('svg-icons/file/folder'); -let MoreVertIcon = require('svg-icons/navigation/more-vert'); +const React = require('react'); +const mui = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const MobileTearSheet = require('../../mobile-tear-sheet'); +const ActionAssignment = require('svg-icons/action/assignment'); +const ActionGrade = require('svg-icons/action/grade'); +const ActionInfo = require('svg-icons/action/info'); +const CommunicationCall = require('svg-icons/communication/call'); +const CommunicationChatBubble = require('svg-icons/communication/chat-bubble'); +const CommunicationEmail = require('svg-icons/communication/email'); +const ContentDrafts = require('svg-icons/content/drafts'); +const ContentInbox = require('svg-icons/content/inbox'); +const ContentSend = require('svg-icons/content/send'); +const EditorInsertChart = require('svg-icons/editor/insert-chart'); +const FileFolder = require('svg-icons/file/folder'); +const MoreVertIcon = require('svg-icons/navigation/more-vert'); -let { +const { Avatar, Checkbox, IconButton, @@ -24,16 +24,16 @@ let { ListItem, Styles, Toggle, + Paper, } = mui; -let IconMenu = require('menus/icon-menu'); -let MenuItem = require('menus/menu-item'); - -let { Colors } = Styles; -let Code = require('lists-code'); -let CodeExample = require('../../code-example/code-example'); - +const IconMenu = require('menus/icon-menu'); +const MenuItem = require('menus/menu-item'); +const { Colors } = Styles; +const Code = require('lists-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class ListsPage extends React.Component { @@ -53,9 +53,15 @@ export default class ListsPage extends React.Component { header: 'default: false', desc: 'If true, the subheader will be indented by 72px.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the list\'s root element.', + }, { name: 'subheader', - type: 'string', + type: 'node', header: 'optional', desc: 'The subheader string that will be displayed at the top of the list.', }, @@ -170,6 +176,12 @@ export default class ListsPage extends React.Component { header: 'default: 1', desc: 'Can be 1 or 2. This is the number of secondary text lines before ellipsis will show.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the list item\'s root element.', + }, ], }, { @@ -236,6 +248,18 @@ export default class ListsPage extends React.Component { + + + + { + '//Import statement:\nconst List = require(\'material-ui/lib/lists/list\');\n' + + 'const ListDivider = require(\'material-ui/lib/lists/list-divider\');\n' + + 'const ListItem = require(\'material-ui/lib/lists/list-item\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + @@ -394,7 +418,7 @@ export default class ListsPage extends React.Component { } - primaryText="Notificaitons" + primaryText="Notifications" secondaryText="Allow notifications" /> } diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx index d8c51fec34f838..b48e3b5c88358b 100644 --- a/docs/src/app/components/pages/components/menus.jsx +++ b/docs/src/app/components/pages/components/menus.jsx @@ -1,20 +1,21 @@ -let React = require('react'); +const React = require('react'); const ReactTransitionGroup = require('react-addons-transition-group'); -let Menu = require('menus/menu'); -let MenuItem = require('menus/menu-item'); -let MenuDivider = require('menus/menu-divider'); -let ComponentDoc = require('../../component-doc'); - -let ArrowDropRight = require('svg-icons/navigation-arrow-drop-right'); -let ContentCopy = require('svg-icons/content/content-copy'); -let ContentLink = require('svg-icons/content/link'); -let Delete = require('svg-icons/action/delete'); -let Download = require('svg-icons/file/file-download'); -let PersonAdd = require('svg-icons/social/person-add'); -let RemoveRedEye = require('svg-icons/image/remove-red-eye'); -let Code = require('menus-code'); -let CodeExample = require('../../code-example/code-example'); +const Paper = require('paper'); +const Menu = require('menus/menu'); +const MenuItem = require('menus/menu-item'); +const MenuDivider = require('menus/menu-divider'); +const ComponentDoc = require('../../component-doc'); +const ArrowDropRight = require('svg-icons/navigation-arrow-drop-right'); +const ContentCopy = require('svg-icons/content/content-copy'); +const ContentLink = require('svg-icons/content/link'); +const Delete = require('svg-icons/action/delete'); +const Download = require('svg-icons/file/file-download'); +const PersonAdd = require('svg-icons/social/person-add'); +const RemoveRedEye = require('svg-icons/image/remove-red-eye'); +const Code = require('menus-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class MenusPage extends React.Component { @@ -46,6 +47,12 @@ export default class MenusPage extends React.Component { header: 'default: false', desc: 'Indicates if the menu should render with compact desktop styles.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the menu\'s root element.', + }, { name: 'listStyle', type: 'object', @@ -114,6 +121,12 @@ export default class MenusPage extends React.Component { header: 'default: false', desc: 'Disables a menu item.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the menu item\'s root element.', + }, { name: 'innerDivStyle', type: 'object', @@ -203,6 +216,18 @@ export default class MenusPage extends React.Component { name="Menus" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst Menu = require(\'material-ui/lib/menus/menu\');\n' + + 'const MenuItem = require(\'material-ui/lib/menus/menu-item\');\n' + + 'const MenuDivider = require(\'material-ui/lib/menus/menu-divider\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx index 00ea47d4b61f0e..ea3d0f6087ea0e 100644 --- a/docs/src/app/components/pages/components/paper.jsx +++ b/docs/src/app/components/pages/components/paper.jsx @@ -1,13 +1,13 @@ -let React = require('react'); -let { ClearFix, Mixins, Paper } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); +const React = require('react'); +const { ClearFix, Mixins, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); -let { StyleResizable } = Mixins; -let Code = require('paper-code'); -let CodeExample = require('../../code-example/code-example'); +const { StyleResizable } = Mixins; +const Code = require('paper-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); - -let PaperPage = React.createClass ({ +const PaperPage = React.createClass ({ mixins: [StyleResizable], @@ -84,6 +84,16 @@ let PaperPage = React.createClass ({ + + + + { + '//Import statement:\nconst Paper = require(\'material-ui/lib/paper\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
diff --git a/docs/src/app/components/pages/components/popover.jsx b/docs/src/app/components/pages/components/popover.jsx new file mode 100644 index 00000000000000..2c605adb60e0eb --- /dev/null +++ b/docs/src/app/components/pages/components/popover.jsx @@ -0,0 +1,196 @@ +let React = require('react'); +let { Popover, RadioButton, RaisedButton, SelectField, TextField } = require('material-ui'); +let ComponentDoc = require('../../component-doc'); +let Code = require('popover-code'); +let CodeExample = require('../../code-example/code-example'); + + +let PopoverPage = React.createClass({ + getInitialState() { + return { + selectValue:'1', + textValue:'here is a value', + activePopover:'none', + anchorOrigin:{horizontal:'left', vertical:'bottom'}, + targetOrigin:{horizontal:'left', vertical:'top'}, + } + }, + + render() { + + let componentInfo = [ + { + name: 'Props', + infoArray: [ + { + name: 'anchorOrigin', + type: 'origin object', + header: 'optional', + desc: + 'This is the point on the anchor where the popover targetOrigin will stick to.\n' + + 'Options:\n'+ + 'vertical: [top, middle, bottom]\n' + + 'horizontal: [left, center, right]\n', + }, + { + name: 'targetOrigin', + type: 'origin object', + header: 'optional', + desc: + 'This is the point on the popover which will stick to the anchors origin.' + + 'Options:'+ + 'vertical: [top, middle, bottom]' + + 'horizontal: [left, center, right]', + }, + { + name: 'animated', + type: 'bool', + header: 'default: false', + desc: 'If true, the popover will apply transitions when added it gets added to the DOM.', + }, + { + name: 'autoCloseWhenOffScreen', + type: 'bool', + header: 'default: true', + desc: 'If true, the popover will hide when the anchor scrolls off the screen', + }, + { + name: 'canAutoPosition', + type: 'bool', + header: 'default: true', + desc: 'If true, the popover (potentially) ignores targetOrigin and anchorOrigin to make itself fit on screen,' + + 'which is useful for mobile devices.', + }, + { + name: 'open', + type: 'bool', + header: 'default: false', + desc: 'Controls the visibility of the popover.', + }, + { + name: 'onRequestClose', + type: 'func', + header: 'default: no-op', + desc: 'This is a callback that fires when the popover thinks it should close. (e.g. click-away or scroll off-screen)', + }, + { + name: 'zDepth', + type: 'number (0-5)', + header: 'default: 1', + desc: 'This number represents the zDepth of the paper shadow.', + }, + ], + }, + ]; + + let menuItems = [ + { payload: '1', text: 'Never' }, + { payload: '2', text: 'Every Night' }, + { payload: '3', text: 'Weeknights' }, + { payload: '4', text: 'Weekends' }, + { payload: '5', text: 'Weekly' }, + ]; + + return ( + + + +
+
+ + Note that in this version, the select field causes nasty scrolling, + an upcoming PR will fix, which updates SelectField to use the popover for itself! +
+

Position Options

+

Use the settings below to toggle the positioning of the popovers above

+ Current Settings +
+ 
+            anchorOrigin: {JSON.stringify(this.state.anchorOrigin)}
+            

+            targetOrigin: {JSON.stringify(this.state.targetOrigin)}
+
+

Anchor Origin

+
+ Vertical + + + +
+
+ Horizontal + + + +
+
+
+ +

Target Origin

+
+ Vertical + + + +
+
+ Horizontal + + + +
+ + +
+

Here is an arbitrary popover

+

Hi - here is some content

+ +
+ + + + ); + }, + + show(key, e) { + this.setState({ + activePopover:key, + anchorEl:e.currentTarget, + }); + }, + + closePopover(key) { + if (this.state.activePopover !== key) + return + this.setState({ + activePopover:'none', + }); + }, + + setAnchor(positionElement, position, e) { + let {anchorOrigin} = this.state; + anchorOrigin[positionElement] = position; + + this.setState({ + anchorOrigin:anchorOrigin, + }); + }, + + setTarget(positionElement, position, e) { + let {targetOrigin} = this.state; + targetOrigin[positionElement] = position; + + this.setState({ + targetOrigin:targetOrigin, + }); + }, + +}); + +module.exports = PopoverPage; diff --git a/docs/src/app/components/pages/components/progress.jsx b/docs/src/app/components/pages/components/progress.jsx index 92ea197e8c3e64..aed803bfab6119 100644 --- a/docs/src/app/components/pages/components/progress.jsx +++ b/docs/src/app/components/pages/components/progress.jsx @@ -1,11 +1,11 @@ -let React = require('react'); -let { CircularProgress, LinearProgress } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('progress-code'); -let CodeExample = require('../../code-example/code-example'); +const React = require('react'); +const { CircularProgress, LinearProgress, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('progress-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); - -let ProgressPage = React.createClass({ +const ProgressPage = React.createClass({ getInitialState () { return { @@ -66,6 +66,12 @@ let ProgressPage = React.createClass({ header: 'default: 1', desc: 'The size of the progress.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the progress\'s root element.', + }, ], }, ]; @@ -75,6 +81,17 @@ let ProgressPage = React.createClass({ + + + + { + '//Import statement:\nconst CircularProgress = require(\'material-ui/lib/circular-progress\');\n' + + 'const LinearProgress = require(\'material-ui/lib/linear-progress\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +

Linear Progress

diff --git a/docs/src/app/components/pages/components/refresh-indicator.jsx b/docs/src/app/components/pages/components/refresh-indicator.jsx index 6c71795d89cc88..b66cd4ae810443 100644 --- a/docs/src/app/components/pages/components/refresh-indicator.jsx +++ b/docs/src/app/components/pages/components/refresh-indicator.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { RefreshIndicator } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('refresh-indicator-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { RefreshIndicator, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('refresh-indicator-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); let RefreshIndicatorPage = React.createClass({ @@ -58,6 +58,16 @@ let RefreshIndicatorPage = React.createClass({ + + + + { + '//Import statement:\nconst RefreshIndicator = require(\'material-ui/lib/refresh-indicator\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +

diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx index 1989c614f269d9..681bb76ef3073c 100644 --- a/docs/src/app/components/pages/components/sliders.jsx +++ b/docs/src/app/components/pages/components/sliders.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { Slider } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('sliders-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { Paper, Slider } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('sliders-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class SlidersPage extends React.Component { @@ -129,6 +129,16 @@ export default class SlidersPage extends React.Component { + + + + { + '//Import statement:\nconst Slider = require(\'material-ui/lib/slider\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/snackbar.jsx b/docs/src/app/components/pages/components/snackbar.jsx index d92c56227acdac..074e3dd9ecbba2 100644 --- a/docs/src/app/components/pages/components/snackbar.jsx +++ b/docs/src/app/components/pages/components/snackbar.jsx @@ -1,19 +1,21 @@ -let React = require('react'); -let { RaisedButton, Snackbar, TextField } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('snackbars-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { RaisedButton, Snackbar, TextField, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('snackbars-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class SnackbarPage extends React.Component { constructor() { super(); this._handleClick = this._handleClick.bind(this); + this._handleClickDouble = this._handleClickDouble.bind(this); this._updateAutoHideDuration = this._updateAutoHideDuration.bind(this); this.state = { autoHideDuration: 0, + message: 'Event added to your calendar', }; } @@ -53,6 +55,12 @@ export default class SnackbarPage extends React.Component { header: 'optional', desc: 'Override the inline-styles of the Snackbar\'s root element.', }, + { + name: 'bodyStyle', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the Snackbar\'s body element.', + }, ], }, { @@ -96,11 +104,28 @@ export default class SnackbarPage extends React.Component { + + + + { + '//Import statement:\nconst Snackbar = require(\'material-ui/lib/snackbar\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + +
+
+ + +
@@ -123,6 +148,18 @@ export default class SnackbarPage extends React.Component { this.refs.snackbar.show(); } + _handleClickDouble() { + this.refs.snackbar.show(); + + const duration = this.state.autoHideDuration / 2 || 2000; + + setTimeout(() => { + this.setState({ + message: 'Event ' + Math.round(Math.random() * 100) + ' added to your calendar', + }); + }, duration); + } + _handleAction() { //We can add more code here! In this example, we'll just include an alert. window.alert("We removed the event from your calendar."); diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx index 6ffe11abfe37dd..e48be9a95efb31 100644 --- a/docs/src/app/components/pages/components/switches.jsx +++ b/docs/src/app/components/pages/components/switches.jsx @@ -1,11 +1,11 @@ -let React = require('react'); -let mui = require('material-ui'); -let CodeExample = require('../../code-example/code-example'); -let ComponentDoc = require('../../component-doc'); -let ToggleStar = require('svg-icons/toggle/star'); -let ToggleStarBorder = require('svg-icons/toggle/star-border'); +const React = require('react'); +const mui = require('material-ui'); +const CodeExample = require('../../code-example/code-example'); +const ComponentDoc = require('../../component-doc'); +const ToggleStar = require('svg-icons/toggle/star'); +const ToggleStarBorder = require('svg-icons/toggle/star-border'); -let { +const { Checkbox, ClearFix, RadioButton, @@ -15,12 +15,13 @@ let { Tab, Tabs, Toggle, + Paper, } = mui; -let { Typography } = Styles; -let CheckboxCode = require('checkbox-code'); -let RadioButtonCode = require('radio-buttons-code'); -let ToggleCode = require('toggle-code'); - +const { Typography } = Styles; +const CheckboxCode = require('checkbox-code'); +const RadioButtonCode = require('radio-buttons-code'); +const ToggleCode = require('toggle-code'); +const CodeBlock = require('../../code-example/code-block'); export default class SwitchesPage extends React.Component { @@ -55,7 +56,7 @@ export default class SwitchesPage extends React.Component { }, { name: 'label', - type: 'string', + type: 'node', header: 'optional', desc: 'The text that is displayed beside the checkbox.', }, @@ -130,7 +131,7 @@ export default class SwitchesPage extends React.Component { }, { name: 'label', - type: 'string', + type: 'node', header: 'optional', desc: 'The text that is displayed beside the radio button.', }, @@ -252,7 +253,7 @@ export default class SwitchesPage extends React.Component { }, { name: 'label', - type: 'string', + type: 'node', header: 'optional', desc: 'The text that is displayed beside the toggle switch.', }, @@ -347,6 +348,19 @@ export default class SwitchesPage extends React.Component { return (

Switches

+ + + + { + '//Import statements:\nconst Checkbox = require(\'material-ui/lib/checkbox\');\n' + + 'const RadioButton = require(\'material-ui/lib/radio-button\');\n' + + 'const RadioButtonGroup = require(\'material-ui/lib/radio-button-group\');\n' + + 'const Toggle = require(\'material-ui/lib/toggle\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + + + + { + '//Import statements:\nconst Table = require(\'material-ui/lib/table/table\');\n' + + 'const TableBody = require(\'material-ui/lib/table/table-body\');\n' + + 'const TableFooter = require(\'material-ui/lib/table/table-footer\');\n' + + 'const TableHeader = require(\'material-ui/lib/table/table-header\');\n' + + 'const TableHeaderColumn = require(\'material-ui/lib/table/table-header-column\');\n' + + 'const TableRow = require(\'material-ui/lib/table/table-row\');\n' + + 'const TableRowColumn = require(\'material-ui/lib/table/table-row-column\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
+ + + + { + '//Import statement:\nconst Tabs = require(\'material-ui/lib/tabs/tabs\');\n' + + 'const Tab = require(\'material-ui/lib/tabs/tab\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + @@ -221,11 +245,41 @@ export default class TabsPage extends React.Component { +
+ + + + + + +
+

Tabs with slide effect

+ Swipe to see the next slide.
+
+
+ slide n°2 +
+
+ slide n°3 +
+ ); } + _handleChangeIndex(index) { + this.setState({ + slideIndex: index, + }); + } + + _handleChangeTabs(value) { + this.setState({ + slideIndex: parseInt(value, 10), + }); + } + _handleButtonClick() { this.setState({tabsValue: 'c'}); } diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx index ced04ddbaeaa6d..69a07a81a1ca0d 100644 --- a/docs/src/app/components/pages/components/text-fields.jsx +++ b/docs/src/app/components/pages/components/text-fields.jsx @@ -1,13 +1,14 @@ -let React = require('react'); -let { ClearFix, Mixins, SelectField, TextField, Styles } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let { Colors } = Styles; -let { StyleResizable } = Mixins; -let Code = require('text-fields-code'); -let CodeExample = require('../../code-example/code-example'); +const React = require('react'); +const { ClearFix, Mixins, SelectField, TextField, Styles, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const { Colors } = Styles; +const { StyleResizable } = Mixins; +const Code = require('text-fields-code'); +const CodeExample = require('../../code-example/code-example'); const LinkedStateMixin = require('react-addons-linked-state-mixin'); +const CodeBlock = require('../../code-example/code-block'); -let TextFieldsPage = React.createClass({ +const TextFieldsPage = React.createClass({ mixins: [StyleResizable, LinkedStateMixin], @@ -56,6 +57,12 @@ let TextFieldsPage = React.createClass({ { name: 'Props', infoArray: [ + { + name: 'defaultValue', + type: 'string', + header: 'optional', + desc: 'The text string to use for the default value.', + }, { name: 'errorStyle', type: 'object', @@ -68,6 +75,12 @@ let TextFieldsPage = React.createClass({ header: 'optional', desc: 'The error text string to display.', }, + { + name: 'floatingLabelStyle', + type: 'object', + header: 'optional', + desc: 'The style object to use to override floating label styles.', + }, { name: 'floatingLabelText', type: 'string', @@ -92,6 +105,12 @@ let TextFieldsPage = React.createClass({ header: 'optional', desc: 'The hint text string to display.', }, + { + name: 'inputStyle', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the TextField\'s input element.', + }, { name: 'multiLine', type: 'bool', @@ -229,6 +248,17 @@ let TextFieldsPage = React.createClass({ name="Text Field" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst TextField = require(\'material-ui/lib/text-field\');\n' + + 'const SelectField = require(\'material-ui/lib/select-field\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
@@ -236,7 +266,7 @@ let TextFieldsPage = React.createClass({ style={styles.textfield} hintText="Hint Text" />

+ + + + { + '//Import statement:\nconst TimePicker = require(\'material-ui/lib/time-picker\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + + + + + + + ); diff --git a/docs/src/app/components/pages/components/toolbars.jsx b/docs/src/app/components/pages/components/toolbars.jsx index 9a79c43ffe8549..62c0b66dc54a61 100644 --- a/docs/src/app/components/pages/components/toolbars.jsx +++ b/docs/src/app/components/pages/components/toolbars.jsx @@ -1,8 +1,8 @@ -let React = require('react'); -let mui = require('material-ui'); -let ComponentDoc = require('../../component-doc'); +const React = require('react'); +const mui = require('material-ui'); +const ComponentDoc = require('../../component-doc'); -let { +const { DropDownIcon, DropDownMenu, FontIcon, @@ -11,10 +11,11 @@ let { ToolbarGroup, ToolbarSeparator, ToolbarTitle, + Paper, } = mui; -let Code = require('toolbars-code'); -let CodeExample = require('../../code-example/code-example'); - +const Code = require('toolbars-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class ToolbarPage extends React.Component { @@ -43,6 +44,12 @@ export default class ToolbarPage extends React.Component { header: 'optional', desc: 'Optional pull "left" or "right"', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the toolbar group\'s root element.', + }, ], }, { @@ -53,6 +60,12 @@ export default class ToolbarPage extends React.Component { desc: 'A vertical bar used to separate groups of components. It ' + 'is used to easily organize components.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the toolbar separator\'s root element.', + }, ], }, { @@ -68,6 +81,12 @@ export default class ToolbarPage extends React.Component { header: 'optional', desc: 'The text to be displayed for the element.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the toolbar title\'s root element.', + }, ], }, ]; @@ -91,6 +110,19 @@ export default class ToolbarPage extends React.Component { name="Toolbars" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst Toolbar = require(\'material-ui/lib/toolbar/toolbar\');\n' + + 'const ToolbarGroup = require(\'material-ui/lib/toolbar/toolbar-group\');\n' + + 'const ToolbarSeparator = require(\'material-ui/lib/toolbar/toolbar-separator\');\n' + + 'const ToolbarTitle = require(\'material-ui/lib/toolbar/toolbar-title\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/raw-code/app-bar-code.txt b/docs/src/app/components/raw-code/app-bar-code.txt index 477eae19f02610..450e423bed4713 100644 --- a/docs/src/app/components/raw-code/app-bar-code.txt +++ b/docs/src/app/components/raw-code/app-bar-code.txt @@ -3,7 +3,7 @@ iconClassNameRight="muidocs-icon-navigation-expand-more" /> Title} iconElementLeft={} iconElementRight={} /> diff --git a/docs/src/app/components/raw-code/badge-code.txt b/docs/src/app/components/raw-code/badge-code.txt new file mode 100644 index 00000000000000..b81afb780a8e95 --- /dev/null +++ b/docs/src/app/components/raw-code/badge-code.txt @@ -0,0 +1,19 @@ + + + + +//override badgeStyle to account for padding of child element + + + + + + +}> + + + + +

Company Name

+ \ No newline at end of file diff --git a/docs/src/app/components/raw-code/date-picker-code.txt b/docs/src/app/components/raw-code/date-picker-code.txt index 6e4f14b4c65b20..29a4906ca3340a 100644 --- a/docs/src/app/components/raw-code/date-picker-code.txt +++ b/docs/src/app/components/raw-code/date-picker-code.txt @@ -16,3 +16,19 @@ minDate={this.state.minDate} maxDate={this.state.maxDate} showYearSelector={this.state.showYearSelector} /> + + +//Inline Picker + +//Inline Picker (AutoOk) + diff --git a/docs/src/app/components/raw-code/dialog-code.txt b/docs/src/app/components/raw-code/dialog-code.txt index ee89651d477e41..37f58cb4d881b9 100644 --- a/docs/src/app/components/raw-code/dialog-code.txt +++ b/docs/src/app/components/raw-code/dialog-code.txt @@ -8,7 +8,8 @@ let standardActions = [ title="Dialog With Standard Actions" actions={standardActions} actionFocus="submit" - modal={this.state.modal}> + open={this.state.showDialogStandardActions} + onRequestClose={this._handleRequestClose}> The actions in this window are created from the json that's passed in. @@ -27,11 +28,19 @@ let customActions = [ + open={this.state.showDialogCustomActions} + onRequestClose={this._handleRequestClose}> The actions in this window were passed in as an array of react objects. - -
Really long content
- + +
+ Really long content +
+ \ No newline at end of file diff --git a/docs/src/app/components/raw-code/flat-button-code.txt b/docs/src/app/components/raw-code/flat-button-code.txt index 4a22cf57b6502f..3bc6aa4d4b760c 100644 --- a/docs/src/app/components/raw-code/flat-button-code.txt +++ b/docs/src/app/components/raw-code/flat-button-code.txt @@ -1,15 +1,19 @@ -//Flat Buttons + + -
- - - -
-
- - - -
+ + + + + + + + + + + + + diff --git a/docs/src/app/components/raw-code/grid-list-code.txt b/docs/src/app/components/raw-code/grid-list-code.txt new file mode 100644 index 00000000000000..0fa7b71d181d1f --- /dev/null +++ b/docs/src/app/components/raw-code/grid-list-code.txt @@ -0,0 +1,32 @@ +{/* Basic grid list with mostly default options */} + + { + tilesData.map(tile => by {tile.author}} + actionIcon={} + >) + } + +{/* Grid list with all possible overrides */} + + { + tilesData.map(tile => } + actionPosition="left" + titlePosition="top" + titleBackground={gradientBg} + cols={tile.featured ? 2 : 1} + rows={tile.featured ? 2 : 1} + >) + } + diff --git a/docs/src/app/components/raw-code/left-nav-code.txt b/docs/src/app/components/raw-code/left-nav-code.txt index 12ff19d6023893..4e77ce37e73da3 100644 --- a/docs/src/app/components/raw-code/left-nav-code.txt +++ b/docs/src/app/components/raw-code/left-nav-code.txt @@ -28,3 +28,9 @@ this.refs.leftNav.toggle(); //Hideable Left Nav + +//Hideable Left Nav with Nested Children + + Menu Item + Link + diff --git a/docs/src/app/components/raw-code/popover-code.txt b/docs/src/app/components/raw-code/popover-code.txt new file mode 100644 index 00000000000000..0480a819eb282e --- /dev/null +++ b/docs/src/app/components/raw-code/popover-code.txt @@ -0,0 +1,90 @@ + +
+
+ +Note that in this version, the select field causes nasty scrolling, +an upcoming PR will fix, which updates SelectField to use the popover for itself! +
+

Position Options

+

Use the settings below to toggle the positioning of the popovers above

+Current Settings +
+
+  anchorOrigin: {JSON.stringify(this.state.anchorOrigin)}
+  

+  targetOrigin: {JSON.stringify(this.state.targetOrigin)}
+
+

Anchor Origin

+
+ Vertical + + + +
+
+ Horizontal + + + +
+
+
+ +

Target Origin

+
+ Vertical + + + +
+
+ Horizontal + + + +
+ + +
+

Here is an arbitrary popover

+

Hi - here is some content

+ +
+ + +show(key, e) { + this.setState({ + activePopover:key, + anchorEl:e.currentTarget, + }); +}, + +closePopover(key) { + if (this.state.activePopover !== key) + return + this.setState({ + activePopover:'none', + }); +}, + +setAnchor(positionElement, position, e) { + let {anchorOrigin} = this.state; + anchorOrigin[positionElement] = position; + + this.setState({ + anchorOrigin:anchorOrigin, + }); +}, + +setTarget(positionElement, position, e) { + let {targetOrigin} = this.state; + targetOrigin[positionElement] = position; + + this.setState({ + targetOrigin:targetOrigin, + }); +}, diff --git a/docs/src/app/components/raw-code/raised-button-code.txt b/docs/src/app/components/raw-code/raised-button-code.txt index aa2b5361fccd20..93eb6c4509650b 100644 --- a/docs/src/app/components/raw-code/raised-button-code.txt +++ b/docs/src/app/components/raw-code/raised-button-code.txt @@ -1,16 +1,19 @@ -//Raised Buttons + + -
- - - -
-
- - - -
- + + + + + + + + + + + + + diff --git a/docs/src/app/components/raw-code/tabs-code.txt b/docs/src/app/components/raw-code/tabs-code.txt index 0a1ea791286b66..76543ed0ff5b1a 100644 --- a/docs/src/app/components/raw-code/tabs-code.txt +++ b/docs/src/app/components/raw-code/tabs-code.txt @@ -28,3 +28,22 @@ (Tab content...) + +// Tabs with slide effect + + + + + + +
+

Tabs with slide effect

+ Swipe to see the next slide.
+
+
+ slide n°2 +
+
+ slide n°3 +
+ diff --git a/docs/src/app/components/raw-code/text-fields-code.txt b/docs/src/app/components/raw-code/text-fields-code.txt index d934fa3d8c8e40..294f1a77e6a57f 100644 --- a/docs/src/app/components/raw-code/text-fields-code.txt +++ b/docs/src/app/components/raw-code/text-fields-code.txt @@ -2,7 +2,6 @@ + +//Auto OK + + +//Override TextField/Input Style + + +//Override Container/Root Element Style + diff --git a/docs/webpack-production.config.js b/docs/webpack-production.config.js index 27987231b2d7fe..e742dec2f3c6de 100644 --- a/docs/webpack-production.config.js +++ b/docs/webpack-production.config.js @@ -45,6 +45,11 @@ var config = { warnings: false } }), + new webpack.DefinePlugin({ + "process.env": { + NODE_ENV: JSON.stringify("production") + } + }), new HtmlWebpackPlugin({ inject: false, template: path.join(__dirname, '/src/www/index.html') diff --git a/examples/browserify-gulp-example/package.json b/examples/browserify-gulp-example/package.json index e5f5071a02042a..383c5cdb58df3e 100644 --- a/examples/browserify-gulp-example/package.json +++ b/examples/browserify-gulp-example/package.json @@ -23,8 +23,13 @@ "watchify": "^2.2.1" }, "dependencies": { - "material-ui": ">=0.8", - "react": ">=0.13", - "react-tap-event-plugin": "^0.1.3" + "material-ui": "^0.13.0", + "react": "^0.14.0", + "react-dom":"^0.14.0", + "react-tap-event-plugin": "^0.2.1", + "react-addons-create-fragment": "^0.14.0", + "react-addons-pure-render-mixin": "^0.14.0", + "react-addons-transition-group": "^0.14.0", + "react-addons-update": "^0.14.0" } } diff --git a/examples/browserify-gulp-example/src/app/app.jsx b/examples/browserify-gulp-example/src/app/app.jsx index f808c2596968a8..384bce3aacf60b 100644 --- a/examples/browserify-gulp-example/src/app/app.jsx +++ b/examples/browserify-gulp-example/src/app/app.jsx @@ -1,5 +1,6 @@ (function () { let React = require('react'); + let ReactDOM = require('react-dom'); let injectTapEventPlugin = require('react-tap-event-plugin'); let Main = require('./components/main.jsx'); // Our custom react component @@ -12,8 +13,8 @@ //https://github.com/zilverline/react-tap-event-plugin injectTapEventPlugin(); - // Render the main app react component into the document body. + // Render the main app react component into the app div. // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render - React.render(
, document.body); + ReactDOM.render(
, document.getElementById('app')); })(); diff --git a/examples/browserify-gulp-example/src/www/index.html b/examples/browserify-gulp-example/src/www/index.html index 9e0861db250641..a3ed21648f67dc 100644 --- a/examples/browserify-gulp-example/src/www/index.html +++ b/examples/browserify-gulp-example/src/www/index.html @@ -11,6 +11,8 @@ +
+