From 67b5ae3764c52d24575e6eb81f3a8f7d804e4160 Mon Sep 17 00:00:00 2001 From: micimize Date: Mon, 25 Jun 2018 09:56:49 -0500 Subject: [PATCH 01/17] added backdrop stub to docs --- docs/src/modules/components/withRoot.js | 3 + docs/src/pages/lab/backdrop/Backdrop.js | 33 +++++++ docs/src/pages/lab/backdrop/backdrop.md | 7 ++ .../material-ui-lab/src/Backdrop/BackLayer.js | 87 +++++++++++++++++ .../src/Backdrop/Backdrop.d.ts | 21 ++++ .../material-ui-lab/src/Backdrop/Backdrop.js | 94 ++++++++++++++++++ .../src/Backdrop/Backdrop.test.js | 70 +++++++++++++ .../src/Backdrop/FrontLayer.js | 97 +++++++++++++++++++ .../material-ui-lab/src/Backdrop/index.d.ts | 2 + .../material-ui-lab/src/Backdrop/index.js | 1 + pages/lab/backdrop.js | 23 +++++ 11 files changed, 438 insertions(+) create mode 100644 docs/src/pages/lab/backdrop/Backdrop.js create mode 100644 docs/src/pages/lab/backdrop/backdrop.md create mode 100644 packages/material-ui-lab/src/Backdrop/BackLayer.js create mode 100644 packages/material-ui-lab/src/Backdrop/Backdrop.d.ts create mode 100644 packages/material-ui-lab/src/Backdrop/Backdrop.js create mode 100644 packages/material-ui-lab/src/Backdrop/Backdrop.test.js create mode 100644 packages/material-ui-lab/src/Backdrop/FrontLayer.js create mode 100644 packages/material-ui-lab/src/Backdrop/index.d.ts create mode 100644 packages/material-ui-lab/src/Backdrop/index.js create mode 100644 pages/lab/backdrop.js diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js index 015cd06ea868d3..0a7fedaa27981f 100644 --- a/docs/src/modules/components/withRoot.js +++ b/docs/src/modules/components/withRoot.js @@ -203,6 +203,9 @@ const pages = [ { pathname: '/lab/toggle-button', }, + { + pathname: '/lab/backdrop', + }, findPages[2].children[1], ], }, diff --git a/docs/src/pages/lab/backdrop/Backdrop.js b/docs/src/pages/lab/backdrop/Backdrop.js new file mode 100644 index 00000000000000..6c038bf5d7059b --- /dev/null +++ b/docs/src/pages/lab/backdrop/Backdrop.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +function SimpleAppBar(props) { + const { classes } = props; + return ( +
+ + + + Title + + + +
+ ); +} + +SimpleAppBar.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimpleAppBar); diff --git a/docs/src/pages/lab/backdrop/backdrop.md b/docs/src/pages/lab/backdrop/backdrop.md new file mode 100644 index 00000000000000..0794cba6830912 --- /dev/null +++ b/docs/src/pages/lab/backdrop/backdrop.md @@ -0,0 +1,7 @@ +--- +components: Backdrop +--- + +# Backdrop + +{{"demo": "pages/lab/backdrop/Backdrop.js"}} diff --git a/packages/material-ui-lab/src/Backdrop/BackLayer.js b/packages/material-ui-lab/src/Backdrop/BackLayer.js new file mode 100644 index 00000000000000..5b08d356288ca0 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/BackLayer.js @@ -0,0 +1,87 @@ +// @inheritedComponent Paper + +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import withStyles from '../styles/withStyles'; +import { capitalize } from '../utils/helpers'; +import Paper from '../Paper'; + +export const styles = theme => { + const backgroundColorDefault = theme.palette.primary[500]; + + return { + root: { + display: 'flex', + flexDirection: 'column', + width: '100%', + boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar. + zIndex: theme.zIndex.appBar, + flexShrink: 0, + }, + backLayer: { + + }, + frontLayer: { + + }, + colorDefault: { + backgroundColor: backgroundColorDefault, + color: theme.palette.getContrastText(backgroundColorDefault), + }, + colorPrimary: { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + colorSecondary: { + backgroundColor: theme.palette.secondary.main, + color: theme.palette.secondary.contrastText, + }, + }; +}; + +function BackdropBack(props) { + const { children, classes, className: classNameProp, color, position, ...other } = props; + + const className = classNames( + classes.root, + classes[`position${capitalize(position)}`], + { + [classes[`color${capitalize(color)}`]]: color !== 'inherit', + 'mui-fixed': position === 'fixed', // Useful for the Dialog + }, + classNameProp, + ); + + return ( + + {children} + + ); +} + +BackdropBack.propTypes = { + /** + * The content of the component. + */ + children: PropTypes.node.isRequired, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css-api) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ + color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'default']), +}; + +BackdropBack.defaultProps = { + color: 'primary', +}; + +export default withStyles(styles, { name: 'MuiBackdropBack' })(BackdropBack); diff --git a/packages/material-ui-lab/src/Backdrop/Backdrop.d.ts b/packages/material-ui-lab/src/Backdrop/Backdrop.d.ts new file mode 100644 index 00000000000000..fa5ca4a3f06676 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/Backdrop.d.ts @@ -0,0 +1,21 @@ +import { PropTypes, StandardProps } from '..'; +import { PaperProps } from '../Paper'; + +export interface AppBarProps extends StandardProps { + color?: PropTypes.Color; + position?: 'fixed' | 'absolute' | 'sticky' | 'static'; +} + +export type AppBarClassKey = + | 'root' + | 'positionFixed' + | 'positionAbsolute' + | 'positionSticky' + | 'positionStatic' + | 'colorDefault' + | 'colorPrimary' + | 'colorSecondary'; + +declare const AppBar: React.ComponentType; + +export default AppBar; diff --git a/packages/material-ui-lab/src/Backdrop/Backdrop.js b/packages/material-ui-lab/src/Backdrop/Backdrop.js new file mode 100644 index 00000000000000..2a1457dd643d3d --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/Backdrop.js @@ -0,0 +1,94 @@ +// @inheritedComponent Paper + +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import withStyles from '../styles/withStyles'; +import { capitalize } from '../utils/helpers'; +import Paper from '../Paper'; + +export const styles = theme => { + const backgroundColorDefault = + theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]; + + return { + root: { + flexDirection: 'column', + position: 'absolute', + width: '100%', + height: '100%', + zIndex: 0, + }, + backLayer: { + + }, + frontLayer: { + + }, + colorDefault: { + backgroundColor: backgroundColorDefault, + color: theme.palette.getContrastText(backgroundColorDefault), + }, + colorPrimary: { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + colorSecondary: { + backgroundColor: theme.palette.secondary.main, + color: theme.palette.secondary.contrastText, + }, + }; +}; + +function Backdrop(props) { + const { children, classes, className: classNameProp, color, position, ...other } = props; + + const className = classNames( + classes.root, + classes[`position${capitalize(position)}`], + { + [classes[`color${capitalize(color)}`]]: color !== 'inherit', + 'mui-fixed': position === 'fixed', // Useful for the Dialog + }, + classNameProp, + ); + + return ( + + {children} + + ); +} + +Backdrop.propTypes = { + /** + * The content of the component. + */ + children: PropTypes.node.isRequired, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css-api) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ + color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'default']), + /** + * The positioning type. The behavior of the different options is described + * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). + * Note: `sticky` is not universally supported and will fall back to `static` when unavailable. + */ + position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static']), +}; + +Backdrop.defaultProps = { + color: 'primary', + position: 'fixed', +}; + +export default withStyles(styles, { name: 'MuiBackdrop' })(Backdrop); diff --git a/packages/material-ui-lab/src/Backdrop/Backdrop.test.js b/packages/material-ui-lab/src/Backdrop/Backdrop.test.js new file mode 100644 index 00000000000000..6f019da3f2d45c --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/Backdrop.test.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { assert } from 'chai'; +import { createShallow, getClasses } from '../test-utils'; +import AppBar from './Backdrop'; + +describe('', () => { + let shallow; + let classes; + + before(() => { + shallow = createShallow({ dive: true }); + classes = getClasses(Hello World); + }); + + it('should render a Paper component', () => { + const wrapper = shallow(Hello World); + assert.strictEqual(wrapper.props().elevation, 4, 'should render with a 4dp shadow'); + }); + + it('should render with the root class and primary', () => { + const wrapper = shallow(Hello World); + assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual( + wrapper.hasClass(classes.colorPrimary), + true, + 'should have the primary class', + ); + assert.strictEqual(wrapper.hasClass(classes.colorSecondary), false); + }); + + it('should render the custom className and the appBar class', () => { + const wrapper = shallow(Hello World); + assert.strictEqual(wrapper.is('.test-class-name'), true, 'should pass the test className'); + assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual( + wrapper.hasClass(classes.colorPrimary), + true, + 'should have the primary class', + ); + }); + + it('should render a primary app bar', () => { + const wrapper = shallow(Hello World); + assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual( + wrapper.hasClass(classes.colorPrimary), + true, + 'should have the primary class', + ); + assert.strictEqual(wrapper.hasClass(classes.colorSecondary), false); + }); + + it('should render an secondary app bar', () => { + const wrapper = shallow(Hello World); + assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual( + wrapper.hasClass(classes.colorPrimary), + false, + 'should not have the primary class', + ); + assert.strictEqual(wrapper.hasClass(classes.colorSecondary), true); + }); + + describe('Dialog', () => { + it('should add a .mui-fixed class', () => { + const wrapper = shallow(Hello World); + assert.strictEqual(wrapper.hasClass('mui-fixed'), true); + }); + }); +}); diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayer.js b/packages/material-ui-lab/src/Backdrop/FrontLayer.js new file mode 100644 index 00000000000000..5e43802c555775 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/FrontLayer.js @@ -0,0 +1,97 @@ +// @inheritedComponent Paper + +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import Collapse from '../Collapse'; +import Paper from '../Paper'; +import withStyles from '../styles/withStyles'; +import { isMuiElement } from '../utils/reactHelpers'; + +export const styles = theme => { + const transition = { + duration: theme.transitions.duration.shortest, + }; + + return { + root: { + position: 'relative', + transition: theme.transitions.create(['margin'], transition), + }, + disabled: { // scrim + backgroundColor: theme.palette.action.disabledBackground, + }, + minimized: { // positioning + backgroundColor: theme.palette.action.disabledBackground, + }, + }; +}; + +function BackdropFront(props) { + const { + classes, + className: classNameProp, + defaultExpanded, + disabled, + minimized, + onChange: onChangeProp, + ...other + } = this.props; + const onChange = onChangeProp ? + event => onChange(event, !minimized) : + null; + + const className = classNames( + classes.root, + { + [classes.minimized]: minimized, + [classes.disabled]: disabled, + }, + classNameProp, + ); + + return ( + + ); +} + +BackdropFront.propTypes = { + /** + * The content of the front panel. + */ + children: PropTypes.node.isRequired, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css-api) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * If `true`, the panel will be displayed in a disabled state, + * with a scrim overlay + */ + disabled: PropTypes.bool, + /** + * If `true`, minimize the panel. + */ + minimized: PropTypes.bool, + /** + * The icon to display as the minimized indicator. + */ + minimizedIcon: PropTypes.node, + /** + * Callback fired when the expand/collapse state is changed. + * + * @param {object} event The event source of the callback + * @param {boolean} minimized The `minimized` state of the panel + */ + onChange: PropTypes.func, +}; + +BackdropFront.defaultProps = { +}; + +export default withStyles(styles, { name: 'MuiBackdropFront' })(BackdropFront); diff --git a/packages/material-ui-lab/src/Backdrop/index.d.ts b/packages/material-ui-lab/src/Backdrop/index.d.ts new file mode 100644 index 00000000000000..bb384d566ab582 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './Backdrop'; +export * from './Backdrop'; diff --git a/packages/material-ui-lab/src/Backdrop/index.js b/packages/material-ui-lab/src/Backdrop/index.js new file mode 100644 index 00000000000000..4f57103db2523e --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/index.js @@ -0,0 +1 @@ +export { default } from './Backdrop'; diff --git a/pages/lab/backdrop.js b/pages/lab/backdrop.js new file mode 100644 index 00000000000000..e96c1d998faa1f --- /dev/null +++ b/pages/lab/backdrop.js @@ -0,0 +1,23 @@ +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from 'docs/src/pages/lab/backdrop/backdrop.md'; + +function Page() { + return ( + + ); +} + +export default withRoot(Page); From b1a11555764491bb977fac79fc9055b9ca166abb Mon Sep 17 00:00:00 2001 From: micimize Date: Mon, 25 Jun 2018 17:37:50 -0500 Subject: [PATCH 02/17] basic backdrop revealing --- docs/src/pages/lab/backdrop/Backdrop.js | 92 +++++++++++++++---- packages/material-ui-lab/package.json | 3 +- .../material-ui-lab/src/Backdrop/BackLayer.js | 65 +++---------- .../src/Backdrop/BackLayerSection.js | 85 +++++++++++++++++ .../material-ui-lab/src/Backdrop/Backdrop.js | 33 ++----- .../src/Backdrop/FrontLayer.js | 22 +++-- 6 files changed, 197 insertions(+), 103 deletions(-) create mode 100644 packages/material-ui-lab/src/Backdrop/BackLayerSection.js diff --git a/docs/src/pages/lab/backdrop/Backdrop.js b/docs/src/pages/lab/backdrop/Backdrop.js index 6c038bf5d7059b..64a52775aaada0 100644 --- a/docs/src/pages/lab/backdrop/Backdrop.js +++ b/docs/src/pages/lab/backdrop/Backdrop.js @@ -1,33 +1,87 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; +import Backdrop from '@material-ui/lab/Backdrop/Backdrop'; +import Back from '@material-ui/lab/Backdrop/BackLayer'; +import BackSection from '@material-ui/lab/Backdrop/BackLayerSection'; +import Front from '@material-ui/lab/Backdrop/FrontLayer'; + import Typography from '@material-ui/core/Typography'; +import Toolbar from '@material-ui/core/Toolbar'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; -const styles = { +const styles = theme => ({ root: { - flexGrow: 1, + width: 360, + height: 616, + position: 'relative' }, -}; + flex: { + flex: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + subheading: { + height: 32, + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-end' + } +}); -function SimpleAppBar(props) { - const { classes } = props; - return ( -
- - - - Title +class SimpleBackdrop extends React.Component { + state = { + expanded: null, + } + render() { + const { classes } = this.props; + const { expanded } = this.state + const menu = ( + + this.setState({ expanded: !expanded })}> + + + + Title + + + + ) + return ( +
+ + + + {menu} + + +
    + Lorem ipsum + Lorem ipsum +
  • Lorem ipsum
    • +
  • Lorem ipsum
    • +
  • Lorem ipsum
    • +
+ + + + + Subtitle - - -
- ); + + +
+ ); + } } -SimpleAppBar.propTypes = { +SimpleBackdrop.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles)(SimpleAppBar); +export default withStyles(styles)(SimpleBackdrop); diff --git a/packages/material-ui-lab/package.json b/packages/material-ui-lab/package.json index 7e47700cffd5fd..995c7ddf6dc7b7 100644 --- a/packages/material-ui-lab/package.json +++ b/packages/material-ui-lab/package.json @@ -39,7 +39,8 @@ "react-dom": "^16.3.0" }, "dependencies": { - "@babel/runtime": "7.0.0-rc.1" + "@babel/runtime": "7.0.0-rc.1", + "react-animate-height": "^2.0.1" }, "devDependencies": {}, "sideEffects": false, diff --git a/packages/material-ui-lab/src/Backdrop/BackLayer.js b/packages/material-ui-lab/src/Backdrop/BackLayer.js index 5b08d356288ca0..7aa27debeb89d3 100644 --- a/packages/material-ui-lab/src/Backdrop/BackLayer.js +++ b/packages/material-ui-lab/src/Backdrop/BackLayer.js @@ -1,62 +1,29 @@ -// @inheritedComponent Paper - import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import withStyles from '../styles/withStyles'; -import { capitalize } from '../utils/helpers'; -import Paper from '../Paper'; - -export const styles = theme => { - const backgroundColorDefault = theme.palette.primary[500]; - - return { - root: { - display: 'flex', - flexDirection: 'column', - width: '100%', - boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar. - zIndex: theme.zIndex.appBar, - flexShrink: 0, - }, - backLayer: { - - }, - frontLayer: { - - }, - colorDefault: { - backgroundColor: backgroundColorDefault, - color: theme.palette.getContrastText(backgroundColorDefault), - }, - colorPrimary: { - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - colorSecondary: { - backgroundColor: theme.palette.secondary.main, - color: theme.palette.secondary.contrastText, - }, - }; +import withStyles from '@material-ui/core/styles/withStyles'; + +export const styles = { + root: { + // fit to content + flexGrow: 0, + flexShrink: 1, + flexBasis: 'auto', + } }; function BackdropBack(props) { - const { children, classes, className: classNameProp, color, position, ...other } = props; + const { children, classes, className: classNameProp, ...other } = props; const className = classNames( classes.root, - classes[`position${capitalize(position)}`], - { - [classes[`color${capitalize(color)}`]]: color !== 'inherit', - 'mui-fixed': position === 'fixed', // Useful for the Dialog - }, classNameProp, ); return ( - +
{children} - +
); } @@ -74,14 +41,6 @@ BackdropBack.propTypes = { * @ignore */ className: PropTypes.string, - /** - * The color of the component. It supports those theme colors that make sense for this component. - */ - color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'default']), -}; - -BackdropBack.defaultProps = { - color: 'primary', }; export default withStyles(styles, { name: 'MuiBackdropBack' })(BackdropBack); diff --git a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js new file mode 100644 index 00000000000000..53484bfd29b71a --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js @@ -0,0 +1,85 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import withStyles from '@material-ui/core/styles/withStyles'; + +import AnimateHeight from 'react-animate-height'; + +const SHORT_TRANSITION = 150 + +export const styles = theme => { + const transition = { + duration: SHORT_TRANSITION // theme.transitions.duration.shortest / 2, + }; + return { + root: { + width: '100%', + height: 0 + }, + collapsed: { + //opacity: 0, + //transition: theme.transitions.create('opacity', transition) + }, + expanded: { + } + } +}; + +function BackdropBackSection(props) { + const { children, classes, className: classNameProp, expanded, ...other } = props; + + const animationStateClasses = { + animatingToHeightZero: classes.collapsed, + animatingToHeightAuto: classes.expanded, + }; + + const className = classNames( + classes.root, + classNameProp, + ); + + // we delay for opacity animations + const animationProps = !expanded ? { + duration: SHORT_TRANSITION, + //delay: SHORT_TRANSITION, + height: 0, + animateOpacity: true + } : { + duration: SHORT_TRANSITION, + //delay: SHORT_TRANSITION, + height: 'auto', + animateOpacity: true + } + + return ( + + {children} + + ); +} + +BackdropBackSection.propTypes = { + /** + * The content of the component. + */ + children: PropTypes.node.isRequired, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css-api) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * If `true`, expand to reveal contextual information. + */ + expanded: PropTypes.bool, +}; + +BackdropBackSection.defaultProps = { + expanded: false +}; + +export default withStyles(styles, { name: 'MuiBackdropBackSection' })(BackdropBackSection); diff --git a/packages/material-ui-lab/src/Backdrop/Backdrop.js b/packages/material-ui-lab/src/Backdrop/Backdrop.js index 2a1457dd643d3d..ae629a6a665a29 100644 --- a/packages/material-ui-lab/src/Backdrop/Backdrop.js +++ b/packages/material-ui-lab/src/Backdrop/Backdrop.js @@ -3,31 +3,25 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import withStyles from '../styles/withStyles'; -import { capitalize } from '../utils/helpers'; -import Paper from '../Paper'; +import withStyles from '@material-ui/core/styles/withStyles'; +import { capitalize } from '@material-ui/core/utils/helpers'; +import Paper from '@material-ui/core/Paper'; export const styles = theme => { - const backgroundColorDefault = - theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]; - return { root: { - flexDirection: 'column', position: 'absolute', + zIndex: 0, + display: 'flex', + flexFlow: 'column', width: '100%', height: '100%', - zIndex: 0, }, backLayer: { }, frontLayer: { - }, - colorDefault: { - backgroundColor: backgroundColorDefault, - color: theme.palette.getContrastText(backgroundColorDefault), }, colorPrimary: { backgroundColor: theme.palette.primary.main, @@ -41,20 +35,18 @@ export const styles = theme => { }; function Backdrop(props) { - const { children, classes, className: classNameProp, color, position, ...other } = props; + const { children, classes, className: classNameProp, color, ...other } = props; const className = classNames( classes.root, - classes[`position${capitalize(position)}`], { [classes[`color${capitalize(color)}`]]: color !== 'inherit', - 'mui-fixed': position === 'fixed', // Useful for the Dialog }, classNameProp, ); return ( - + {children} ); @@ -77,18 +69,11 @@ Backdrop.propTypes = { /** * The color of the component. It supports those theme colors that make sense for this component. */ - color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'default']), - /** - * The positioning type. The behavior of the different options is described - * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). - * Note: `sticky` is not universally supported and will fall back to `static` when unavailable. - */ - position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static']), + color: PropTypes.oneOf(['inherit', 'primary', 'secondary']), }; Backdrop.defaultProps = { color: 'primary', - position: 'fixed', }; export default withStyles(styles, { name: 'MuiBackdrop' })(Backdrop); diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayer.js b/packages/material-ui-lab/src/Backdrop/FrontLayer.js index 5e43802c555775..ab85697debd6c9 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayer.js +++ b/packages/material-ui-lab/src/Backdrop/FrontLayer.js @@ -3,10 +3,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import Collapse from '../Collapse'; -import Paper from '../Paper'; -import withStyles from '../styles/withStyles'; -import { isMuiElement } from '../utils/reactHelpers'; +import Paper from '@material-ui/core/Paper'; +import withStyles from '@material-ui/core/styles/withStyles'; export const styles = theme => { const transition = { @@ -17,6 +15,18 @@ export const styles = theme => { root: { position: 'relative', transition: theme.transitions.create(['margin'], transition), + borderTopLeftRadius: 16, + borderTopRightRadius: 16, + + // fill remaining space not taken by back layer content + flexGrow: 1, + flexShrink: 1, + flexBasis: 'auto', + backgroundColor: theme.palette.background.paper, + color: theme.palette.getContrastText(theme.palette.background.paper), + + paddingLeft: 15, + paddingRight: 15 }, disabled: { // scrim backgroundColor: theme.palette.action.disabledBackground, @@ -36,7 +46,7 @@ function BackdropFront(props) { minimized, onChange: onChangeProp, ...other - } = this.props; + } = props; const onChange = onChangeProp ? event => onChange(event, !minimized) : null; @@ -51,7 +61,7 @@ function BackdropFront(props) { ); return ( - + ); } From b5c02ed1d88debc4a176b16dc6c36ba8c8ebb1f9 Mon Sep 17 00:00:00 2001 From: micimize Date: Mon, 25 Jun 2018 21:11:24 -0500 Subject: [PATCH 03/17] back layer FadeSwitch, front layer subheader --- docs/src/pages/lab/backdrop/Backdrop.js | 67 ++++++++++---- .../src/Backdrop/BackLayerSection.js | 24 ++--- .../src/Backdrop/FadeSwitch.js | 88 +++++++++++++++++++ .../src/Backdrop/FrontLayer.js | 3 +- .../src/Backdrop/FrontLayerSubheader.js | 73 +++++++++++++++ 5 files changed, 221 insertions(+), 34 deletions(-) create mode 100644 packages/material-ui-lab/src/Backdrop/FadeSwitch.js create mode 100644 packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js diff --git a/docs/src/pages/lab/backdrop/Backdrop.js b/docs/src/pages/lab/backdrop/Backdrop.js index 64a52775aaada0..d62a6e45ff6a96 100644 --- a/docs/src/pages/lab/backdrop/Backdrop.js +++ b/docs/src/pages/lab/backdrop/Backdrop.js @@ -1,16 +1,22 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; import { withStyles } from '@material-ui/core/styles'; import Backdrop from '@material-ui/lab/Backdrop/Backdrop'; import Back from '@material-ui/lab/Backdrop/BackLayer'; import BackSection from '@material-ui/lab/Backdrop/BackLayerSection'; import Front from '@material-ui/lab/Backdrop/FrontLayer'; +import Subheader from '@material-ui/lab/Backdrop/FrontLayerSubheader'; +import FadeSwitch from '@material-ui/lab/Backdrop/FadeSwitch'; import Typography from '@material-ui/core/Typography'; import Toolbar from '@material-ui/core/Toolbar'; -import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; + +import SimpleMediaCard from '../../demos/cards/SimpleMediaCard' const styles = theme => ({ root: { @@ -30,26 +36,44 @@ const styles = theme => ({ display: 'flex', flexDirection: 'row', alignItems: 'flex-end' - } + }, + menuItem: { + padding: 7.5, + borderRadius: 3, + }, + menuSelected: { + background: theme.palette.primary[300] + }, }); class SimpleBackdrop extends React.Component { state = { - expanded: null, + expanded: false, } render() { const { classes } = this.props; const { expanded } = this.state + const Title = ({ className, ...props }) => ( + + ) + const MenuItem = ({ className, ...props }) => ( + + ) + const menu = ( this.setState({ expanded: !expanded })}> - - Title - - + App Title, + false: Page Title + }} + /> ) return ( @@ -60,19 +84,28 @@ class SimpleBackdrop extends React.Component { {menu} -
    - Lorem ipsum - Lorem ipsum -
  • Lorem ipsum
    • -
  • Lorem ipsum
    • -
  • Lorem ipsum
    • -
+ + Subtitle 1 + + + Subtitle 2 + + + Subtitle 3 + - - Subtitle - + + + Subtitle 1 + + + + { new Array(5).fill( + + )} + diff --git a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js index 53484bfd29b71a..2c0b6b5912cd02 100644 --- a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js +++ b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js @@ -8,17 +8,13 @@ import AnimateHeight from 'react-animate-height'; const SHORT_TRANSITION = 150 export const styles = theme => { - const transition = { - duration: SHORT_TRANSITION // theme.transitions.duration.shortest / 2, - }; return { root: { width: '100%', - height: 0 + paddingLeft: 7.5, + paddingRight: 7.5, }, collapsed: { - //opacity: 0, - //transition: theme.transitions.create('opacity', transition) }, expanded: { } @@ -38,21 +34,17 @@ function BackdropBackSection(props) { classNameProp, ); - // we delay for opacity animations - const animationProps = !expanded ? { - duration: SHORT_TRANSITION, - //delay: SHORT_TRANSITION, - height: 0, - animateOpacity: true - } : { + const animationProps = { + className, + animationStateClasses, duration: SHORT_TRANSITION, - //delay: SHORT_TRANSITION, height: 'auto', - animateOpacity: true + animateOpacity: true, + height: expanded ? 'auto' : 0, } return ( - + {children} ); diff --git a/packages/material-ui-lab/src/Backdrop/FadeSwitch.js b/packages/material-ui-lab/src/Backdrop/FadeSwitch.js new file mode 100644 index 00000000000000..acd4dbe238af94 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/FadeSwitch.js @@ -0,0 +1,88 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import withStyles from '@material-ui/core/styles/withStyles'; +import Fade from '@material-ui/core/Fade'; + +const SHORT_TRANSITION = 150 + +export const styles = theme => { + return { + root: { + position: 'relative' + }, + option: { + position: 'relative', + top: 0, + left: '100%', + marginLeft: '-100%', + float: 'left', + }, + selected: { + } + } +}; + +function FadeSwitch(props) { + const { + children, + classes, + className: classNameProp, + selected: selectedProp, + options, + ...other + } = props; + + const selected = `${selectedProp}` + + const className = classNames( + classes.root, + classNameProp, + ); + + const fadeProps = isSelected => ({ + className: classNames(classes.option, { [classes.selected]: isSelected }), + in: isSelected, + timeout: SHORT_TRANSITION, + style: { + transitionDelay: isSelected ? SHORT_TRANSITION : 0 + } + }) + + return ( +
+ {Object.keys(options).map(key => ( + + {options[key]} + + ))} +
+ ); +} + +FadeSwitch.propTypes = { + /** + * select the node to be displayed from options + */ + selected: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.bool, + PropTypes.symbol, + ]), + /** + * Mapping of selected states to selectable nodes. + */ + options: PropTypes.object.isRequired, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css-api) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, +}; + +export default withStyles(styles, { name: 'MuiFadeSwitch' })(FadeSwitch); diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayer.js b/packages/material-ui-lab/src/Backdrop/FrontLayer.js index ab85697debd6c9..71413d16d9a9a2 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayer.js +++ b/packages/material-ui-lab/src/Backdrop/FrontLayer.js @@ -26,7 +26,8 @@ export const styles = theme => { color: theme.palette.getContrastText(theme.palette.background.paper), paddingLeft: 15, - paddingRight: 15 + paddingRight: 15, + overflow: 'scroll', }, disabled: { // scrim backgroundColor: theme.palette.action.disabledBackground, diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js b/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js new file mode 100644 index 00000000000000..0256d31081b245 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js @@ -0,0 +1,73 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import withStyles from '@material-ui/core/styles/withStyles'; + +export const styles = theme => { + return { + root: { + zIndex: theme.zIndex.appBar - 1, + backgroundColor: theme.palette.background.paper, + position: 'sticky', + top: 0, + height: 56, + width: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center' + }, + divided: { + borderBottomStyle: 'solid', + borderBottomWidth: 1, + borderBottomColor: theme.palette.divider + } + }; +}; + +function BackdropFrontSubheader(props) { + const { + classes, + className: classNameProp, + children, + divided, + ...other + } = props; + + const className = classNames( + classes.root, + { [classes.divided]: divided }, + classNameProp, + ); + + return ( +
+ { children } +
+ ); +} + +BackdropFrontSubheader.propTypes = { + /** + * The content of the front panel. + */ + children: PropTypes.node.isRequired, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css-api) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * If `true`, a thin dividing border is included in the header. + */ + divided: PropTypes.bool, +}; + +BackdropFrontSubheader.defaultProps = { + divided: true +}; + +export default withStyles(styles, { name: 'MuiBackdropFrontHeader' })(BackdropFrontSubheader); From 3832698220951d9112cbf9246a40ba8d065d8919 Mon Sep 17 00:00:00 2001 From: micimize Date: Mon, 25 Jun 2018 21:40:47 -0500 Subject: [PATCH 04/17] started scrim --- docs/src/pages/lab/backdrop/Backdrop.js | 14 +++++++------- .../material-ui-lab/src/Backdrop/FrontLayer.js | 6 ++++-- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/src/pages/lab/backdrop/Backdrop.js b/docs/src/pages/lab/backdrop/Backdrop.js index d62a6e45ff6a96..8622a3a9704831 100644 --- a/docs/src/pages/lab/backdrop/Backdrop.js +++ b/docs/src/pages/lab/backdrop/Backdrop.js @@ -70,8 +70,8 @@ class SimpleBackdrop extends React.Component { App Title, - false: Page Title + true: Nature's Nobility, + false: Luxurious Lizards }} /> @@ -85,20 +85,20 @@ class SimpleBackdrop extends React.Component { - Subtitle 1 + Luxurious Lizards - Subtitle 2 + Glorious Geese - Subtitle 3 + Ecstatic Eggs - + - Subtitle 1 + Incredible Iguanas diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayer.js b/packages/material-ui-lab/src/Backdrop/FrontLayer.js index 71413d16d9a9a2..ca12c07483ad49 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayer.js +++ b/packages/material-ui-lab/src/Backdrop/FrontLayer.js @@ -14,7 +14,6 @@ export const styles = theme => { return { root: { position: 'relative', - transition: theme.transitions.create(['margin'], transition), borderTopLeftRadius: 16, borderTopRightRadius: 16, @@ -30,7 +29,10 @@ export const styles = theme => { overflow: 'scroll', }, disabled: { // scrim - backgroundColor: theme.palette.action.disabledBackground, + '& > *': { + opacity: 0.5, + transition: theme.transitions.create('opacity', transition), + } }, minimized: { // positioning backgroundColor: theme.palette.action.disabledBackground, From dbba2d2624d89e0b44c2e6058170ac2346fc89a4 Mon Sep 17 00:00:00 2001 From: micimize Date: Mon, 25 Jun 2018 22:58:01 -0500 Subject: [PATCH 05/17] proper scrim --- docs/src/pages/lab/backdrop/Backdrop.js | 13 +++-- .../src/Backdrop/FrontLayer.js | 33 +++++++++---- .../src/Backdrop/FrontLayerContent.js | 47 +++++++++++++++++++ .../src/Backdrop/FrontLayerSubheader.js | 6 ++- 4 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 packages/material-ui-lab/src/Backdrop/FrontLayerContent.js diff --git a/docs/src/pages/lab/backdrop/Backdrop.js b/docs/src/pages/lab/backdrop/Backdrop.js index 8622a3a9704831..14e9eea9480794 100644 --- a/docs/src/pages/lab/backdrop/Backdrop.js +++ b/docs/src/pages/lab/backdrop/Backdrop.js @@ -7,6 +7,7 @@ import Back from '@material-ui/lab/Backdrop/BackLayer'; import BackSection from '@material-ui/lab/Backdrop/BackLayerSection'; import Front from '@material-ui/lab/Backdrop/FrontLayer'; import Subheader from '@material-ui/lab/Backdrop/FrontLayerSubheader'; +import FrontContent from '@material-ui/lab/Backdrop/FrontLayerContent'; import FadeSwitch from '@material-ui/lab/Backdrop/FadeSwitch'; import Typography from '@material-ui/core/Typography'; @@ -101,11 +102,13 @@ class SimpleBackdrop extends React.Component { Incredible Iguanas - - { new Array(5).fill( - - )} - + + + { new Array(5).fill( + + )} + + diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayer.js b/packages/material-ui-lab/src/Backdrop/FrontLayer.js index ca12c07483ad49..940beb44bf74f4 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayer.js +++ b/packages/material-ui-lab/src/Backdrop/FrontLayer.js @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import Paper from '@material-ui/core/Paper'; import withStyles from '@material-ui/core/styles/withStyles'; +import Fade from '@material-ui/core/Fade'; export const styles = theme => { const transition = { @@ -26,13 +27,23 @@ export const styles = theme => { paddingLeft: 15, paddingRight: 15, - overflow: 'scroll', + overflow: 'auto', + display: 'flex', + flexDirection: 'column' }, - disabled: { // scrim - '& > *': { - opacity: 0.5, - transition: theme.transitions.create('opacity', transition), - } + scrim: { + zIndex: -1, + position: 'absolute', + left: 0, + top: 0, + height: '100%', + width: '100%', + borderTopLeftRadius: 16, + borderTopRightRadius: 16, + backgroundColor: 'rgba(255,255,255,0.5)' + }, + scrimActive: { + zIndex: theme.zIndex.appBar - 1, }, minimized: { // positioning backgroundColor: theme.palette.action.disabledBackground, @@ -48,8 +59,10 @@ function BackdropFront(props) { disabled, minimized, onChange: onChangeProp, + children, ...other } = props; + const onChange = onChangeProp ? event => onChange(event, !minimized) : null; @@ -58,13 +71,17 @@ function BackdropFront(props) { classes.root, { [classes.minimized]: minimized, - [classes.disabled]: disabled, }, classNameProp, ); return ( - + + +
+ + {children} + ); } diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayerContent.js b/packages/material-ui-lab/src/Backdrop/FrontLayerContent.js new file mode 100644 index 00000000000000..31d40f87df2cdd --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/FrontLayerContent.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import withStyles from '@material-ui/core/styles/withStyles'; + +export const styles = { + root: { + flex: 1, + overflow: 'scroll' + }, +}; + +function BackdropFrontContent(props) { + const { + classes, + className: classNameProp, + ...other + } = props; + + const className = classNames( + classes.root, + classNameProp, + ); + + return ( +
+ ); +} + +BackdropFrontContent.propTypes = { + /** + * The content of the front panel. + */ + children: PropTypes.node.isRequired, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css-api) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, +}; + +export default withStyles(styles, { name: 'MuiBackdropFrontContent' })(BackdropFrontContent); + diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js b/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js index 0256d31081b245..378682edce8148 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js +++ b/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js @@ -6,11 +6,13 @@ import withStyles from '@material-ui/core/styles/withStyles'; export const styles = theme => { return { root: { - zIndex: theme.zIndex.appBar - 1, + zIndex: theme.zIndex.appBar - 2, backgroundColor: theme.palette.background.paper, position: 'sticky', top: 0, - height: 56, + flexGrow: 0, + flexShrink: 0, + flexBasis: 56, width: '100%', display: 'flex', flexDirection: 'column', From 029505fe870aa7d279574535487b2bea817b6eb0 Mon Sep 17 00:00:00 2001 From: micimize Date: Tue, 26 Jun 2018 17:49:14 -0500 Subject: [PATCH 06/17] added MultiSection + animation functionality --- .../lab/backdrop/MultiSectionBackdrop.js | 152 ++++++++++++++++++ .../{Backdrop.js => SimpleBackdrop.js} | 106 ++++++------ docs/src/pages/lab/backdrop/backdrop.md | 8 +- .../src/Backdrop/BackLayerSection.js | 37 +++-- .../src/Backdrop/BackdropMenuItem.js | 69 ++++++++ .../src/Backdrop/FadeSwitch.js | 8 +- .../src/Backdrop/FrontLayer.js | 3 - pages/lab/backdrop.js | 13 +- 8 files changed, 315 insertions(+), 81 deletions(-) create mode 100644 docs/src/pages/lab/backdrop/MultiSectionBackdrop.js rename docs/src/pages/lab/backdrop/{Backdrop.js => SimpleBackdrop.js} (60%) create mode 100644 packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js diff --git a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js new file mode 100644 index 00000000000000..851a081739c882 --- /dev/null +++ b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js @@ -0,0 +1,152 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import Backdrop from '@material-ui/lab/Backdrop/Backdrop'; +import Back from '@material-ui/lab/Backdrop/BackLayer'; +import BackSection from '@material-ui/lab/Backdrop/BackLayerSection'; +import Front from '@material-ui/lab/Backdrop/FrontLayer'; +import Subheader from '@material-ui/lab/Backdrop/FrontLayerSubheader'; +import FrontContent from '@material-ui/lab/Backdrop/FrontLayerContent'; +import FadeSwitch from '@material-ui/lab/Backdrop/FadeSwitch'; +import MenuItem from '@material-ui/lab/Backdrop/BackdropMenuItem'; + +import Typography from '@material-ui/core/Typography'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import FilterIcon from '@material-ui/icons/FilterList'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; + +import Chip from '@material-ui/core/Chip'; +import MultiSectionMediaCard from '../../demos/cards/SimpleMediaCard' + +let tags = [ + 'chameleon', 'green anole', 'wing', 'gecko', + 'water dragon', 'bearded dragon', 'uromastyx', 'skink', + 'horned', 'rainbow', 'leopard gecko', 'basilisk', + 'tegu', 'brown anole', 'geico', 'frilled', + 'camouflage', 'lego', 'rainforest', 'tropical rainforest', + 'blue', 'red', 'black', 'purple', 'yellow', 'small', + 'godzilla', 'giant', 'monster', 'dwarf', 'cool', +] + + +const styles = theme => { + let transition = theme.transitions.create( + 'backgroundColor', + { duration: theme.transitions.duration.shortest } + ) + return { + root: { + width: 360, + height: 616, + position: 'relative' + }, + flex: { + flex: 1, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + width: '100%', + height: 48 + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + chip: { + margin: theme.spacing.unit, + backgroundColor: theme.palette.primary[300], + color: theme.palette.primary.contrastText, + } + }; +}; + +class MultiSectionBackdrop extends React.Component { + state = { + expanded: false, + } + render() { + const { classes } = this.props; + const { expanded } = this.state + + const Title = ({ className, ...props }) => ( + + ); + + return ( +
+ + + + + this.setState({ expanded: expanded ? false : 'nav' })}> + + + Luxurious Lizards, + 'nav': ( + + Nature's Nobility + <IconButton color="inherit" aria-label="Filters" + className={classes.filter} + onClick={() => this.setState({ expanded: 'filters' })}> + <FilterIcon /> + </IconButton> + + ), + 'filters': Filter by tags + }} + /> + + + + + + Luxurious Lizards + + + Glorious Geese + + + Ecstatic Eggs + + + + + { tags.map(label => ( + + )) } + + + + + + Incredible Iguanas + + + + + {new Array(5).fill( + + )} + + + + +
+ ); + } +} + +MultiSectionBackdrop.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(MultiSectionBackdrop); diff --git a/docs/src/pages/lab/backdrop/Backdrop.js b/docs/src/pages/lab/backdrop/SimpleBackdrop.js similarity index 60% rename from docs/src/pages/lab/backdrop/Backdrop.js rename to docs/src/pages/lab/backdrop/SimpleBackdrop.js index 14e9eea9480794..2f416b8470ca6f 100644 --- a/docs/src/pages/lab/backdrop/Backdrop.js +++ b/docs/src/pages/lab/backdrop/SimpleBackdrop.js @@ -9,6 +9,7 @@ import Front from '@material-ui/lab/Backdrop/FrontLayer'; import Subheader from '@material-ui/lab/Backdrop/FrontLayerSubheader'; import FrontContent from '@material-ui/lab/Backdrop/FrontLayerContent'; import FadeSwitch from '@material-ui/lab/Backdrop/FadeSwitch'; +import MenuItem from '@material-ui/lab/Backdrop/BackdropMenuItem'; import Typography from '@material-ui/core/Typography'; import Toolbar from '@material-ui/core/Toolbar'; @@ -19,33 +20,26 @@ import ListItem from '@material-ui/core/ListItem'; import SimpleMediaCard from '../../demos/cards/SimpleMediaCard' -const styles = theme => ({ - root: { - width: 360, - height: 616, - position: 'relative' - }, - flex: { - flex: 1, - }, - menuButton: { - marginLeft: -12, - marginRight: 20, - }, - subheading: { - height: 32, - display: 'flex', - flexDirection: 'row', - alignItems: 'flex-end' - }, - menuItem: { - padding: 7.5, - borderRadius: 3, - }, - menuSelected: { - background: theme.palette.primary[300] - }, -}); +const styles = theme => { + let transition = theme.transitions.create( + 'backgroundColor', + { duration: theme.transitions.duration.shortest } + ) + return { + root: { + width: 360, + height: 616, + position: 'relative' + }, + flex: { + flex: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + }; +}; class SimpleBackdrop extends React.Component { state = { @@ -54,46 +48,42 @@ class SimpleBackdrop extends React.Component { render() { const { classes } = this.props; const { expanded } = this.state + const Title = ({ className, ...props }) => ( - ) - const MenuItem = ({ className, ...props }) => ( - - ) + className={classNames(classes.flex, className)} {...props} /> + ); - const menu = ( - - this.setState({ expanded: !expanded })}> - - - Nature's Nobility, - false: Luxurious Lizards - }} - /> - - ) return (
- {menu} + + this.setState({ expanded: !expanded })}> + + + Nature's Nobility, + false: Luxurious Lizards + }} + /> + - - Luxurious Lizards - - - Glorious Geese - - - Ecstatic Eggs - + + + Luxurious Lizards + + + Glorious Geese + + + Ecstatic Eggs + + @@ -104,7 +94,7 @@ class SimpleBackdrop extends React.Component { - { new Array(5).fill( + {new Array(5).fill( )} diff --git a/docs/src/pages/lab/backdrop/backdrop.md b/docs/src/pages/lab/backdrop/backdrop.md index 0794cba6830912..4a8338c1b46225 100644 --- a/docs/src/pages/lab/backdrop/backdrop.md +++ b/docs/src/pages/lab/backdrop/backdrop.md @@ -2,6 +2,10 @@ components: Backdrop --- -# Backdrop +# Simple Backdrop -{{"demo": "pages/lab/backdrop/Backdrop.js"}} +{{"demo": "pages/lab/backdrop/SimpleBackdrop.js"}} + +# Multi-section Backdrop + +{{"demo": "pages/lab/backdrop/MultiSectionBackdrop.js"}} \ No newline at end of file diff --git a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js index 2c0b6b5912cd02..752f2571537a4a 100644 --- a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js +++ b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js @@ -4,8 +4,11 @@ import classNames from 'classnames'; import withStyles from '@material-ui/core/styles/withStyles'; import AnimateHeight from 'react-animate-height'; +import Fade from '@material-ui/core/Fade'; -const SHORT_TRANSITION = 150 +const FADE_OUT = 150 +const EXPAND = 150 +const FADE_IN = 150 export const styles = theme => { return { @@ -13,10 +16,12 @@ export const styles = theme => { width: '100%', paddingLeft: 7.5, paddingRight: 7.5, - }, - collapsed: { + opacity: 0, + zIndex: 0 }, expanded: { + zIndex: 1, + opacity: 0, } } }; @@ -24,28 +29,34 @@ export const styles = theme => { function BackdropBackSection(props) { const { children, classes, className: classNameProp, expanded, ...other } = props; - const animationStateClasses = { - animatingToHeightZero: classes.collapsed, - animatingToHeightAuto: classes.expanded, - }; - const className = classNames( classes.root, classNameProp, + { [classes.expanded]: expanded } ); const animationProps = { - className, - animationStateClasses, - duration: SHORT_TRANSITION, + delay: FADE_OUT, + duration: EXPAND, height: 'auto', - animateOpacity: true, height: expanded ? 'auto' : 0, } + const fadeProps = { + in: expanded, + timeout: expanded ? FADE_IN : FADE_OUT, + style: { + transitionDelay: expanded ? EXPAND + FADE_OUT : 0, + } + } + return ( - {children} + +
+ {children} +
+ ); } diff --git a/packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js b/packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js new file mode 100644 index 00000000000000..eb54cd1b6db4ee --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js @@ -0,0 +1,69 @@ +// @inheritedComponent MenuItem + +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import MenuItem from '@material-ui/core/MenuItem'; +import { capitalize } from '@material-ui/core/utils/helpers'; + +const styles = theme => { + let transition = theme.transitions.create( + 'backgroundColor', + { duration: theme.transitions.duration.shortest } + ) + return { + root: { + ...theme.typography.body2, + padding: 7.5, + borderRadius: 3, + backgroundColor: 'transparent', + transition + }, + colorPrimary: { + color: theme.palette.primary.contrastText, + '&$selected': { + backgroundColor: theme.palette.primary[300] + }, + }, + colorSecondary: { + color: theme.palette.secondary.contrastText, + '&$selected': { + backgroundColor: theme.palette.secondary[300] + }, + }, + selected: {} + }; +}; + +function BackdropMenuItem (props) { + const { + classes, + className: classNameProp, + color, + selected, + ...other + } = props + const className = classNames( + classes.root, + classes[`color${capitalize(color)}`], + { [classes.selected]: selected }, + classNameProp + ) + return +} + +BackdropMenuItem.propTypes = { + ...MenuItem.propTypes, + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ + color: PropTypes.oneOf(['primary', 'secondary']), +}; + +BackdropMenuItem.defaultProps = { + color: 'primary', + selected: false +}; + +export default withStyles(styles, { name: 'MuiBackdropMenuItem' })(BackdropMenuItem); diff --git a/packages/material-ui-lab/src/Backdrop/FadeSwitch.js b/packages/material-ui-lab/src/Backdrop/FadeSwitch.js index acd4dbe238af94..d8173dcd21a073 100644 --- a/packages/material-ui-lab/src/Backdrop/FadeSwitch.js +++ b/packages/material-ui-lab/src/Backdrop/FadeSwitch.js @@ -44,8 +44,12 @@ function FadeSwitch(props) { className: classNames(classes.option, { [classes.selected]: isSelected }), in: isSelected, timeout: SHORT_TRANSITION, - style: { - transitionDelay: isSelected ? SHORT_TRANSITION : 0 + style: isSelected ? { + transitionDelay: SHORT_TRANSITION, + zIndex: 1, + } : { + transitionDelay: 0, + zIndex: 0, } }) diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayer.js b/packages/material-ui-lab/src/Backdrop/FrontLayer.js index 940beb44bf74f4..f5657c1ad3816c 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayer.js +++ b/packages/material-ui-lab/src/Backdrop/FrontLayer.js @@ -8,9 +8,6 @@ import withStyles from '@material-ui/core/styles/withStyles'; import Fade from '@material-ui/core/Fade'; export const styles = theme => { - const transition = { - duration: theme.transitions.duration.shortest, - }; return { root: { diff --git a/pages/lab/backdrop.js b/pages/lab/backdrop.js index e96c1d998faa1f..d4fb58e6a73a04 100644 --- a/pages/lab/backdrop.js +++ b/pages/lab/backdrop.js @@ -8,11 +8,18 @@ function Page() { Date: Tue, 26 Jun 2018 17:54:25 -0500 Subject: [PATCH 07/17] slight cleanup --- docs/src/pages/lab/backdrop/backdrop.md | 6 ++++-- packages/material-ui-lab/src/Backdrop/BackLayerSection.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/lab/backdrop/backdrop.md b/docs/src/pages/lab/backdrop/backdrop.md index 4a8338c1b46225..03a3143ca36471 100644 --- a/docs/src/pages/lab/backdrop/backdrop.md +++ b/docs/src/pages/lab/backdrop/backdrop.md @@ -2,10 +2,12 @@ components: Backdrop --- -# Simple Backdrop +# Backdrop + +## Simple Backdrop {{"demo": "pages/lab/backdrop/SimpleBackdrop.js"}} -# Multi-section Backdrop +## Multi-section Backdrop {{"demo": "pages/lab/backdrop/MultiSectionBackdrop.js"}} \ No newline at end of file diff --git a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js index 752f2571537a4a..095659b58e3987 100644 --- a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js +++ b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js @@ -76,7 +76,7 @@ BackdropBackSection.propTypes = { */ className: PropTypes.string, /** - * If `true`, expand to reveal contextual information. + * If `true`, expand to reveal section. */ expanded: PropTypes.bool, }; From ecd5c363f01a5bee592083c28855053a3b7c4f51 Mon Sep 17 00:00:00 2001 From: micimize Date: Tue, 26 Jun 2018 18:03:04 -0500 Subject: [PATCH 08/17] applied prettier --- .../lab/backdrop/MultiSectionBackdrop.js | 114 +++++++++++------- docs/src/pages/lab/backdrop/SimpleBackdrop.js | 56 ++++----- .../material-ui-lab/src/Backdrop/BackLayer.js | 13 +- .../src/Backdrop/BackLayerSection.js | 30 ++--- .../material-ui-lab/src/Backdrop/Backdrop.js | 8 +- .../src/Backdrop/BackdropMenuItem.js | 33 ++--- .../src/Backdrop/FadeSwitch.js | 34 +++--- .../src/Backdrop/FrontLayer.js | 17 ++- .../src/Backdrop/FrontLayerContent.js | 18 +-- .../src/Backdrop/FrontLayerSubheader.js | 28 ++--- 10 files changed, 163 insertions(+), 188 deletions(-) diff --git a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js index 851a081739c882..3d46c665e097e9 100644 --- a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js +++ b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js @@ -20,29 +20,51 @@ import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import Chip from '@material-ui/core/Chip'; -import MultiSectionMediaCard from '../../demos/cards/SimpleMediaCard' +import MultiSectionMediaCard from '../../demos/cards/SimpleMediaCard'; let tags = [ - 'chameleon', 'green anole', 'wing', 'gecko', - 'water dragon', 'bearded dragon', 'uromastyx', 'skink', - 'horned', 'rainbow', 'leopard gecko', 'basilisk', - 'tegu', 'brown anole', 'geico', 'frilled', - 'camouflage', 'lego', 'rainforest', 'tropical rainforest', - 'blue', 'red', 'black', 'purple', 'yellow', 'small', - 'godzilla', 'giant', 'monster', 'dwarf', 'cool', -] - + 'chameleon', + 'green anole', + 'wing', + 'gecko', + 'water dragon', + 'bearded dragon', + 'uromastyx', + 'skink', + 'horned', + 'rainbow', + 'leopard gecko', + 'basilisk', + 'tegu', + 'brown anole', + 'geico', + 'frilled', + 'camouflage', + 'lego', + 'rainforest', + 'tropical rainforest', + 'blue', + 'red', + 'black', + 'purple', + 'yellow', + 'small', + 'godzilla', + 'giant', + 'monster', + 'dwarf', + 'cool', +]; const styles = theme => { - let transition = theme.transitions.create( - 'backgroundColor', - { duration: theme.transitions.duration.shortest } - ) + let transition = theme.transitions.create('backgroundColor', { + duration: theme.transitions.duration.shortest, + }); return { root: { width: 360, height: 616, - position: 'relative' + position: 'relative', }, flex: { flex: 1, @@ -51,7 +73,7 @@ const styles = theme => { alignItems: 'center', justifyContent: 'space-between', width: '100%', - height: 48 + height: 48, }, menuButton: { marginLeft: -12, @@ -61,21 +83,25 @@ const styles = theme => { margin: theme.spacing.unit, backgroundColor: theme.palette.primary[300], color: theme.palette.primary.contrastText, - } + }, }; }; class MultiSectionBackdrop extends React.Component { state = { expanded: false, - } + }; render() { const { classes } = this.props; - const { expanded } = this.state + const { expanded } = this.state; const Title = ({ className, ...props }) => ( - + ); return ( @@ -84,57 +110,57 @@ class MultiSectionBackdrop extends React.Component { - this.setState({ expanded: expanded ? false : 'nav' })}> + this.setState({ expanded: expanded ? false : 'nav' })} + > - Luxurious Lizards, - 'nav': ( + nav: ( Nature's Nobility - <IconButton color="inherit" aria-label="Filters" + <IconButton + color="inherit" + aria-label="Filters" className={classes.filter} - onClick={() => this.setState({ expanded: 'filters' })}> + onClick={() => this.setState({ expanded: 'filters' })} + > <FilterIcon /> </IconButton> ), - 'filters': Filter by tags + filters: Filter by tags , }} /> - - Luxurious Lizards - - - Glorious Geese - - - Ecstatic Eggs - + Luxurious Lizards + Glorious Geese + Ecstatic Eggs - { tags.map(label => ( - - )) } + {tags.map(label => )} - - Incredible Iguanas - + Incredible Iguanas {new Array(5).fill( - + + + , )} diff --git a/docs/src/pages/lab/backdrop/SimpleBackdrop.js b/docs/src/pages/lab/backdrop/SimpleBackdrop.js index 2f416b8470ca6f..eec15dadd40280 100644 --- a/docs/src/pages/lab/backdrop/SimpleBackdrop.js +++ b/docs/src/pages/lab/backdrop/SimpleBackdrop.js @@ -18,18 +18,17 @@ import MenuIcon from '@material-ui/icons/Menu'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; -import SimpleMediaCard from '../../demos/cards/SimpleMediaCard' +import SimpleMediaCard from '../../demos/cards/SimpleMediaCard'; const styles = theme => { - let transition = theme.transitions.create( - 'backgroundColor', - { duration: theme.transitions.duration.shortest } - ) + let transition = theme.transitions.create('backgroundColor', { + duration: theme.transitions.duration.shortest, + }); return { root: { width: 360, height: 616, - position: 'relative' + position: 'relative', }, flex: { flex: 1, @@ -44,14 +43,18 @@ const styles = theme => { class SimpleBackdrop extends React.Component { state = { expanded: false, - } + }; render() { const { classes } = this.props; - const { expanded } = this.state + const { expanded } = this.state; const Title = ({ className, ...props }) => ( - + ); return ( @@ -60,42 +63,41 @@ class SimpleBackdrop extends React.Component { - this.setState({ expanded: !expanded })}> + this.setState({ expanded: !expanded })} + > - Nature's Nobility, - false: Luxurious Lizards + false: Luxurious Lizards, }} /> - - Luxurious Lizards - - - Glorious Geese - - - Ecstatic Eggs - + Luxurious Lizards + Glorious Geese + Ecstatic Eggs - - Incredible Iguanas - + Incredible Iguanas {new Array(5).fill( - + + + , )} diff --git a/packages/material-ui-lab/src/Backdrop/BackLayer.js b/packages/material-ui-lab/src/Backdrop/BackLayer.js index 7aa27debeb89d3..e4551e67cb7ed4 100644 --- a/packages/material-ui-lab/src/Backdrop/BackLayer.js +++ b/packages/material-ui-lab/src/Backdrop/BackLayer.js @@ -9,22 +9,15 @@ export const styles = { flexGrow: 0, flexShrink: 1, flexBasis: 'auto', - } + }, }; function BackdropBack(props) { const { children, classes, className: classNameProp, ...other } = props; - const className = classNames( - classes.root, - classNameProp, - ); + const className = classNames(classes.root, classNameProp); - return ( -
- {children} -
- ); + return
{children}
; } BackdropBack.propTypes = { diff --git a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js index 095659b58e3987..131057f1fb7652 100644 --- a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js +++ b/packages/material-ui-lab/src/Backdrop/BackLayerSection.js @@ -6,9 +6,9 @@ import withStyles from '@material-ui/core/styles/withStyles'; import AnimateHeight from 'react-animate-height'; import Fade from '@material-ui/core/Fade'; -const FADE_OUT = 150 -const EXPAND = 150 -const FADE_IN = 150 +const FADE_OUT = 150; +const EXPAND = 150; +const FADE_IN = 150; export const styles = theme => { return { @@ -17,45 +17,39 @@ export const styles = theme => { paddingLeft: 7.5, paddingRight: 7.5, opacity: 0, - zIndex: 0 + zIndex: 0, }, expanded: { zIndex: 1, opacity: 0, - } - } + }, + }; }; function BackdropBackSection(props) { const { children, classes, className: classNameProp, expanded, ...other } = props; - const className = classNames( - classes.root, - classNameProp, - { [classes.expanded]: expanded } - ); + const className = classNames(classes.root, classNameProp, { [classes.expanded]: expanded }); const animationProps = { delay: FADE_OUT, duration: EXPAND, height: 'auto', height: expanded ? 'auto' : 0, - } + }; const fadeProps = { in: expanded, timeout: expanded ? FADE_IN : FADE_OUT, style: { transitionDelay: expanded ? EXPAND + FADE_OUT : 0, - } - } + }, + }; return ( -
- {children} -
+
{children}
 ); @@ -82,7 +76,7 @@ BackdropBackSection.propTypes = { }; BackdropBackSection.defaultProps = { - expanded: false + expanded: false, }; export default withStyles(styles, { name: 'MuiBackdropBackSection' })(BackdropBackSection); diff --git a/packages/material-ui-lab/src/Backdrop/Backdrop.js b/packages/material-ui-lab/src/Backdrop/Backdrop.js index ae629a6a665a29..3ec980955184b7 100644 --- a/packages/material-ui-lab/src/Backdrop/Backdrop.js +++ b/packages/material-ui-lab/src/Backdrop/Backdrop.js @@ -17,12 +17,8 @@ export const styles = theme => { width: '100%', height: '100%', }, - backLayer: { - - }, - frontLayer: { - - }, + backLayer: {}, + frontLayer: {}, colorPrimary: { backgroundColor: theme.palette.primary.main, color: theme.palette.primary.contrastText, diff --git a/packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js b/packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js index eb54cd1b6db4ee..6c454b355d8d1e 100644 --- a/packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js +++ b/packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js @@ -8,49 +8,42 @@ import MenuItem from '@material-ui/core/MenuItem'; import { capitalize } from '@material-ui/core/utils/helpers'; const styles = theme => { - let transition = theme.transitions.create( - 'backgroundColor', - { duration: theme.transitions.duration.shortest } - ) + let transition = theme.transitions.create('backgroundColor', { + duration: theme.transitions.duration.shortest, + }); return { root: { ...theme.typography.body2, padding: 7.5, borderRadius: 3, backgroundColor: 'transparent', - transition + transition, }, colorPrimary: { color: theme.palette.primary.contrastText, '&$selected': { - backgroundColor: theme.palette.primary[300] + backgroundColor: theme.palette.primary[300], }, }, colorSecondary: { color: theme.palette.secondary.contrastText, '&$selected': { - backgroundColor: theme.palette.secondary[300] + backgroundColor: theme.palette.secondary[300], }, }, - selected: {} + selected: {}, }; }; -function BackdropMenuItem (props) { - const { - classes, - className: classNameProp, - color, - selected, - ...other - } = props +function BackdropMenuItem(props) { + const { classes, className: classNameProp, color, selected, ...other } = props; const className = classNames( classes.root, classes[`color${capitalize(color)}`], { [classes.selected]: selected }, - classNameProp - ) - return + classNameProp, + ); + return ; } BackdropMenuItem.propTypes = { @@ -63,7 +56,7 @@ BackdropMenuItem.propTypes = { BackdropMenuItem.defaultProps = { color: 'primary', - selected: false + selected: false, }; export default withStyles(styles, { name: 'MuiBackdropMenuItem' })(BackdropMenuItem); diff --git a/packages/material-ui-lab/src/Backdrop/FadeSwitch.js b/packages/material-ui-lab/src/Backdrop/FadeSwitch.js index d8173dcd21a073..cc4df487d91cd2 100644 --- a/packages/material-ui-lab/src/Backdrop/FadeSwitch.js +++ b/packages/material-ui-lab/src/Backdrop/FadeSwitch.js @@ -4,12 +4,12 @@ import classNames from 'classnames'; import withStyles from '@material-ui/core/styles/withStyles'; import Fade from '@material-ui/core/Fade'; -const SHORT_TRANSITION = 150 +const SHORT_TRANSITION = 150; export const styles = theme => { return { root: { - position: 'relative' + position: 'relative', }, option: { position: 'relative', @@ -18,9 +18,8 @@ export const styles = theme => { marginLeft: '-100%', float: 'left', }, - selected: { - } - } + selected: {}, + }; }; function FadeSwitch(props) { @@ -33,25 +32,24 @@ function FadeSwitch(props) { ...other } = props; - const selected = `${selectedProp}` + const selected = `${selectedProp}`; - const className = classNames( - classes.root, - classNameProp, - ); + const className = classNames(classes.root, classNameProp); const fadeProps = isSelected => ({ className: classNames(classes.option, { [classes.selected]: isSelected }), in: isSelected, timeout: SHORT_TRANSITION, - style: isSelected ? { - transitionDelay: SHORT_TRANSITION, - zIndex: 1, - } : { - transitionDelay: 0, - zIndex: 0, - } - }) + style: isSelected + ? { + transitionDelay: SHORT_TRANSITION, + zIndex: 1, + } + : { + transitionDelay: 0, + zIndex: 0, + }, + }); return (
diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayer.js b/packages/material-ui-lab/src/Backdrop/FrontLayer.js index f5657c1ad3816c..d5800585292dc3 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayer.js +++ b/packages/material-ui-lab/src/Backdrop/FrontLayer.js @@ -8,7 +8,6 @@ import withStyles from '@material-ui/core/styles/withStyles'; import Fade from '@material-ui/core/Fade'; export const styles = theme => { - return { root: { position: 'relative', @@ -26,7 +25,7 @@ export const styles = theme => { paddingRight: 15, overflow: 'auto', display: 'flex', - flexDirection: 'column' + flexDirection: 'column', }, scrim: { zIndex: -1, @@ -37,12 +36,13 @@ export const styles = theme => { width: '100%', borderTopLeftRadius: 16, borderTopRightRadius: 16, - backgroundColor: 'rgba(255,255,255,0.5)' + backgroundColor: 'rgba(255,255,255,0.5)', }, scrimActive: { zIndex: theme.zIndex.appBar - 1, }, - minimized: { // positioning + minimized: { + // positioning backgroundColor: theme.palette.action.disabledBackground, }, }; @@ -60,9 +60,7 @@ function BackdropFront(props) { ...other } = props; - const onChange = onChangeProp ? - event => onChange(event, !minimized) : - null; + const onChange = onChangeProp ? event => onChange(event, !minimized) : null; const className = classNames( classes.root, @@ -75,7 +73,7 @@ function BackdropFront(props) { return ( -
+
{children} @@ -118,7 +116,6 @@ BackdropFront.propTypes = { onChange: PropTypes.func, }; -BackdropFront.defaultProps = { -}; +BackdropFront.defaultProps = {}; export default withStyles(styles, { name: 'MuiBackdropFront' })(BackdropFront); diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayerContent.js b/packages/material-ui-lab/src/Backdrop/FrontLayerContent.js index 31d40f87df2cdd..1ef0a53295c16a 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayerContent.js +++ b/packages/material-ui-lab/src/Backdrop/FrontLayerContent.js @@ -6,25 +6,16 @@ import withStyles from '@material-ui/core/styles/withStyles'; export const styles = { root: { flex: 1, - overflow: 'scroll' + overflow: 'scroll', }, }; function BackdropFrontContent(props) { - const { - classes, - className: classNameProp, - ...other - } = props; + const { classes, className: classNameProp, ...other } = props; - const className = classNames( - classes.root, - classNameProp, - ); + const className = classNames(classes.root, classNameProp); - return ( -
- ); + return
; } BackdropFrontContent.propTypes = { @@ -44,4 +35,3 @@ BackdropFrontContent.propTypes = { }; export default withStyles(styles, { name: 'MuiBackdropFrontContent' })(BackdropFrontContent); - diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js b/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js index 378682edce8148..3c0bf0f0a85ce0 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js +++ b/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js @@ -16,36 +16,22 @@ export const styles = theme => { width: '100%', display: 'flex', flexDirection: 'column', - justifyContent: 'center' + justifyContent: 'center', }, divided: { borderBottomStyle: 'solid', borderBottomWidth: 1, - borderBottomColor: theme.palette.divider - } + borderBottomColor: theme.palette.divider, + }, }; }; function BackdropFrontSubheader(props) { - const { - classes, - className: classNameProp, - children, - divided, - ...other - } = props; + const { classes, className: classNameProp, children, divided, ...other } = props; - const className = classNames( - classes.root, - { [classes.divided]: divided }, - classNameProp, - ); + const className = classNames(classes.root, { [classes.divided]: divided }, classNameProp); - return ( -
- { children } -
- ); + return
{children}
; } BackdropFrontSubheader.propTypes = { @@ -69,7 +55,7 @@ BackdropFrontSubheader.propTypes = { }; BackdropFrontSubheader.defaultProps = { - divided: true + divided: true, }; export default withStyles(styles, { name: 'MuiBackdropFrontHeader' })(BackdropFrontSubheader); From 64ef8b6f0424be2434e9ae081c17356e27f0f938 Mon Sep 17 00:00:00 2001 From: micimize Date: Tue, 26 Jun 2018 18:23:40 -0500 Subject: [PATCH 09/17] fix errors after rebase --- .../lab/backdrop/MultiSectionBackdrop.js | 22 ++++++++++++++----- docs/src/pages/lab/backdrop/SimpleBackdrop.js | 20 ++++++++++++----- docs/src/pages/lab/backdrop/backdrop.md | 1 + 3 files changed, 32 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js index 3d46c665e097e9..a25684c43e412e 100644 --- a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js +++ b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js @@ -20,7 +20,7 @@ import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import Chip from '@material-ui/core/Chip'; -import MultiSectionMediaCard from '../../demos/cards/SimpleMediaCard'; +import SimpleMediaCard from '../../demos/cards/SimpleMediaCard'; let tags = [ 'chameleon', @@ -157,11 +157,21 @@ class MultiSectionBackdrop extends React.Component { - {new Array(5).fill( - - - , - )} + + + + + + + + + + + + + + + diff --git a/docs/src/pages/lab/backdrop/SimpleBackdrop.js b/docs/src/pages/lab/backdrop/SimpleBackdrop.js index eec15dadd40280..7bdee666e0171e 100644 --- a/docs/src/pages/lab/backdrop/SimpleBackdrop.js +++ b/docs/src/pages/lab/backdrop/SimpleBackdrop.js @@ -94,11 +94,21 @@ class SimpleBackdrop extends React.Component { - {new Array(5).fill( - - - , - )} + + + + + + + + + + + + + + + diff --git a/docs/src/pages/lab/backdrop/backdrop.md b/docs/src/pages/lab/backdrop/backdrop.md index 03a3143ca36471..2a2c6a75896f71 100644 --- a/docs/src/pages/lab/backdrop/backdrop.md +++ b/docs/src/pages/lab/backdrop/backdrop.md @@ -3,6 +3,7 @@ components: Backdrop --- # Backdrop +

A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.

## Simple Backdrop From 219e5d4f29d935e0f19ee6aefd0870c90e6582dc Mon Sep 17 00:00:00 2001 From: micimize Date: Tue, 26 Jun 2018 19:27:37 -0500 Subject: [PATCH 10/17] fix yarn lock --- yarn.lock | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/yarn.lock b/yarn.lock index 7486fd78c00b26..37ed3a5725b48b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -981,9 +981,21 @@ "@types/prop-types" "*" csstype "^2.2.0" +<<<<<<< HEAD "@webassemblyjs/ast@1.5.13": version "1.5.13" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.13.tgz#81155a570bd5803a30ec31436bc2c9c0ede38f25" +======= +"@types/react@>=16": + version "16.4.2" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.2.tgz#f1a9cf1ee85221530def2ac26aee20f910a9dac8" + dependencies: + csstype "^2.2.0" + +"@webassemblyjs/ast@1.5.12": + version "1.5.12" + resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.12.tgz#a9acbcb3f25333c4edfa1fdf3186b1ccf64e6664" +>>>>>>> fix yarn lock dependencies: "@webassemblyjs/helper-module-context" "1.5.13" "@webassemblyjs/helper-wasm-bytecode" "1.5.13" @@ -7872,6 +7884,15 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-animate-height@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-2.0.1.tgz#6ec3f8d5126d0d90fed591afad0adf76b707ee2f" + dependencies: + classnames "^2.2.5" + prop-types "^15.6.1" + optionalDependencies: + "@types/react" ">=16" + react-autosuggest@^9.3.2: version "9.4.0" resolved "https://registry.yarnpkg.com/react-autosuggest/-/react-autosuggest-9.4.0.tgz#3146bc9afa4f171bed067c542421edec5ca94294" From f6815bf1aa6a7e025a9b012c54651c1a10a9225d Mon Sep 17 00:00:00 2001 From: micimize Date: Wed, 27 Jun 2018 10:08:24 -0500 Subject: [PATCH 11/17] cleaned lint and prettier errors replaced FadeSwitch with StackedFade --- .../lab/backdrop/MultiSectionBackdrop.js | 69 +++++++------- docs/src/pages/lab/backdrop/SimpleBackdrop.js | 65 ++++++------- .../src/Backdrop/Backdrop.d.ts | 21 ---- .../material-ui-lab/src/Backdrop/Backdrop.js | 2 - .../src/Backdrop/Backdrop.test.js | 70 -------------- .../{BackLayer.js => BackdropBack.js} | 6 +- ...ropMenuItem.js => BackdropBackMenuItem.js} | 7 +- ...LayerSection.js => BackdropBackSection.js} | 28 +++--- .../{FrontLayer.js => BackdropFront.js} | 1 - ...ayerContent.js => BackdropFrontContent.js} | 0 ...Subheader.js => BackdropFrontSubheader.js} | 5 +- .../src/Backdrop/FadeSwitch.js | 90 ------------------ .../src/Backdrop/StackedFade.js | 95 +++++++++++++++++++ .../material-ui-lab/src/Backdrop/index.js | 9 +- 14 files changed, 192 insertions(+), 276 deletions(-) delete mode 100644 packages/material-ui-lab/src/Backdrop/Backdrop.d.ts delete mode 100644 packages/material-ui-lab/src/Backdrop/Backdrop.test.js rename packages/material-ui-lab/src/Backdrop/{BackLayer.js => BackdropBack.js} (90%) rename packages/material-ui-lab/src/Backdrop/{BackdropMenuItem.js => BackdropBackMenuItem.js} (91%) rename packages/material-ui-lab/src/Backdrop/{BackLayerSection.js => BackdropBackSection.js} (86%) rename packages/material-ui-lab/src/Backdrop/{FrontLayer.js => BackdropFront.js} (99%) rename packages/material-ui-lab/src/Backdrop/{FrontLayerContent.js => BackdropFrontContent.js} (100%) rename packages/material-ui-lab/src/Backdrop/{FrontLayerSubheader.js => BackdropFrontSubheader.js} (91%) delete mode 100644 packages/material-ui-lab/src/Backdrop/FadeSwitch.js create mode 100644 packages/material-ui-lab/src/Backdrop/StackedFade.js diff --git a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js index a25684c43e412e..58aace18fe86ae 100644 --- a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js +++ b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js @@ -3,14 +3,13 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { withStyles } from '@material-ui/core/styles'; import Backdrop from '@material-ui/lab/Backdrop/Backdrop'; -import Back from '@material-ui/lab/Backdrop/BackLayer'; -import BackSection from '@material-ui/lab/Backdrop/BackLayerSection'; -import Front from '@material-ui/lab/Backdrop/FrontLayer'; -import Subheader from '@material-ui/lab/Backdrop/FrontLayerSubheader'; -import FrontContent from '@material-ui/lab/Backdrop/FrontLayerContent'; -import FadeSwitch from '@material-ui/lab/Backdrop/FadeSwitch'; -import MenuItem from '@material-ui/lab/Backdrop/BackdropMenuItem'; - +import Back from '@material-ui/lab/Backdrop/BackdropBack'; +import BackSection from '@material-ui/lab/Backdrop/BackdropBackSection'; +import Front from '@material-ui/lab/Backdrop/BackdropFront'; +import Subheader from '@material-ui/lab/Backdrop/BackdropFrontSubheader'; +import FrontContent from '@material-ui/lab/Backdrop/BackdropFrontContent'; +import StackedFade from '@material-ui/lab/Backdrop/StackedFade'; +import MenuItem from '@material-ui/lab/Backdrop/BackdropBackMenuItem'; import Typography from '@material-ui/core/Typography'; import Toolbar from '@material-ui/core/Toolbar'; import IconButton from '@material-ui/core/IconButton'; @@ -18,11 +17,10 @@ import MenuIcon from '@material-ui/icons/Menu'; import FilterIcon from '@material-ui/icons/FilterList'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; - import Chip from '@material-ui/core/Chip'; import SimpleMediaCard from '../../demos/cards/SimpleMediaCard'; -let tags = [ +const tags = [ 'chameleon', 'green anole', 'wing', @@ -57,9 +55,6 @@ let tags = [ ]; const styles = theme => { - let transition = theme.transitions.create('backgroundColor', { - duration: theme.transitions.duration.shortest, - }); return { root: { width: 360, @@ -68,6 +63,8 @@ const styles = theme => { }, flex: { flex: 1, + }, + title: { display: 'flex', flexDirection: 'row', alignItems: 'center', @@ -91,6 +88,7 @@ class MultiSectionBackdrop extends React.Component { state = { expanded: false, }; + render() { const { classes } = this.props; const { expanded } = this.state; @@ -99,7 +97,7 @@ class MultiSectionBackdrop extends React.Component { ); @@ -118,31 +116,32 @@ class MultiSectionBackdrop extends React.Component { > - Luxurious Lizards, - nav: ( - - Nature's Nobility - <IconButton - color="inherit" - aria-label="Filters" - className={classes.filter} - onClick={() => this.setState({ expanded: 'filters' })} - > - <FilterIcon /> - </IconButton> - - ), - filters: Filter by tags , - }} - /> +
+ + Luxurious Lizards + + + + {"Nature's Nobility"} + <IconButton + color="inherit" + aria-label="Filters" + className={classes.filter} + onClick={() => this.setState({ expanded: 'filters' })} + > + <FilterIcon /> + </IconButton> + + + + Filter by tags + +
- Luxurious Lizards + Luxurious Lizards Glorious Geese Ecstatic Eggs diff --git a/docs/src/pages/lab/backdrop/SimpleBackdrop.js b/docs/src/pages/lab/backdrop/SimpleBackdrop.js index 7bdee666e0171e..9b194a70db43a4 100644 --- a/docs/src/pages/lab/backdrop/SimpleBackdrop.js +++ b/docs/src/pages/lab/backdrop/SimpleBackdrop.js @@ -3,47 +3,41 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { withStyles } from '@material-ui/core/styles'; import Backdrop from '@material-ui/lab/Backdrop/Backdrop'; -import Back from '@material-ui/lab/Backdrop/BackLayer'; -import BackSection from '@material-ui/lab/Backdrop/BackLayerSection'; -import Front from '@material-ui/lab/Backdrop/FrontLayer'; -import Subheader from '@material-ui/lab/Backdrop/FrontLayerSubheader'; -import FrontContent from '@material-ui/lab/Backdrop/FrontLayerContent'; -import FadeSwitch from '@material-ui/lab/Backdrop/FadeSwitch'; -import MenuItem from '@material-ui/lab/Backdrop/BackdropMenuItem'; - +import Back from '@material-ui/lab/Backdrop/BackdropBack'; +import BackSection from '@material-ui/lab/Backdrop/BackdropBackSection'; +import Front from '@material-ui/lab/Backdrop/BackdropFront'; +import Subheader from '@material-ui/lab/Backdrop/BackdropFrontSubheader'; +import FrontContent from '@material-ui/lab/Backdrop/BackdropFrontContent'; +import StackedFade from '@material-ui/lab/Backdrop/StackedFade'; +import MenuItem from '@material-ui/lab/Backdrop/BackdropBackMenuItem'; import Typography from '@material-ui/core/Typography'; import Toolbar from '@material-ui/core/Toolbar'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; - import SimpleMediaCard from '../../demos/cards/SimpleMediaCard'; -const styles = theme => { - let transition = theme.transitions.create('backgroundColor', { - duration: theme.transitions.duration.shortest, - }); - return { - root: { - width: 360, - height: 616, - position: 'relative', - }, - flex: { - flex: 1, - }, - menuButton: { - marginLeft: -12, - marginRight: 20, - }, - }; +const styles = { + root: { + width: 360, + height: 616, + position: 'relative', + }, + flex: { + flex: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, }; class SimpleBackdrop extends React.Component { state = { expanded: false, }; + render() { const { classes } = this.props; const { expanded } = this.state; @@ -71,18 +65,19 @@ class SimpleBackdrop extends React.Component { > - Nature's Nobility, - false: Luxurious Lizards, - }} - /> + + <StackedFade in={!expanded}> + <span>Luxurious Lizards</span> + </StackedFade> + <StackedFade in={expanded}> + <span>{"Nature's Nobility"}</span> + </StackedFade> + - Luxurious Lizards + Luxurious Lizards Glorious Geese Ecstatic Eggs diff --git a/packages/material-ui-lab/src/Backdrop/Backdrop.d.ts b/packages/material-ui-lab/src/Backdrop/Backdrop.d.ts deleted file mode 100644 index fa5ca4a3f06676..00000000000000 --- a/packages/material-ui-lab/src/Backdrop/Backdrop.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { PropTypes, StandardProps } from '..'; -import { PaperProps } from '../Paper'; - -export interface AppBarProps extends StandardProps { - color?: PropTypes.Color; - position?: 'fixed' | 'absolute' | 'sticky' | 'static'; -} - -export type AppBarClassKey = - | 'root' - | 'positionFixed' - | 'positionAbsolute' - | 'positionSticky' - | 'positionStatic' - | 'colorDefault' - | 'colorPrimary' - | 'colorSecondary'; - -declare const AppBar: React.ComponentType; - -export default AppBar; diff --git a/packages/material-ui-lab/src/Backdrop/Backdrop.js b/packages/material-ui-lab/src/Backdrop/Backdrop.js index 3ec980955184b7..7cbc98c974dda3 100644 --- a/packages/material-ui-lab/src/Backdrop/Backdrop.js +++ b/packages/material-ui-lab/src/Backdrop/Backdrop.js @@ -17,8 +17,6 @@ export const styles = theme => { width: '100%', height: '100%', }, - backLayer: {}, - frontLayer: {}, colorPrimary: { backgroundColor: theme.palette.primary.main, color: theme.palette.primary.contrastText, diff --git a/packages/material-ui-lab/src/Backdrop/Backdrop.test.js b/packages/material-ui-lab/src/Backdrop/Backdrop.test.js deleted file mode 100644 index 6f019da3f2d45c..00000000000000 --- a/packages/material-ui-lab/src/Backdrop/Backdrop.test.js +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import { assert } from 'chai'; -import { createShallow, getClasses } from '../test-utils'; -import AppBar from './Backdrop'; - -describe('', () => { - let shallow; - let classes; - - before(() => { - shallow = createShallow({ dive: true }); - classes = getClasses(Hello World); - }); - - it('should render a Paper component', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.props().elevation, 4, 'should render with a 4dp shadow'); - }); - - it('should render with the root class and primary', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual( - wrapper.hasClass(classes.colorPrimary), - true, - 'should have the primary class', - ); - assert.strictEqual(wrapper.hasClass(classes.colorSecondary), false); - }); - - it('should render the custom className and the appBar class', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.is('.test-class-name'), true, 'should pass the test className'); - assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual( - wrapper.hasClass(classes.colorPrimary), - true, - 'should have the primary class', - ); - }); - - it('should render a primary app bar', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual( - wrapper.hasClass(classes.colorPrimary), - true, - 'should have the primary class', - ); - assert.strictEqual(wrapper.hasClass(classes.colorSecondary), false); - }); - - it('should render an secondary app bar', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual( - wrapper.hasClass(classes.colorPrimary), - false, - 'should not have the primary class', - ); - assert.strictEqual(wrapper.hasClass(classes.colorSecondary), true); - }); - - describe('Dialog', () => { - it('should add a .mui-fixed class', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.hasClass('mui-fixed'), true); - }); - }); -}); diff --git a/packages/material-ui-lab/src/Backdrop/BackLayer.js b/packages/material-ui-lab/src/Backdrop/BackdropBack.js similarity index 90% rename from packages/material-ui-lab/src/Backdrop/BackLayer.js rename to packages/material-ui-lab/src/Backdrop/BackdropBack.js index e4551e67cb7ed4..77729165f8f32c 100644 --- a/packages/material-ui-lab/src/Backdrop/BackLayer.js +++ b/packages/material-ui-lab/src/Backdrop/BackdropBack.js @@ -17,7 +17,11 @@ function BackdropBack(props) { const className = classNames(classes.root, classNameProp); - return
{children}
; + return ( +
+ {children} +
+ ); } BackdropBack.propTypes = { diff --git a/packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js b/packages/material-ui-lab/src/Backdrop/BackdropBackMenuItem.js similarity index 91% rename from packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js rename to packages/material-ui-lab/src/Backdrop/BackdropBackMenuItem.js index 6c454b355d8d1e..bfeb56e338ea34 100644 --- a/packages/material-ui-lab/src/Backdrop/BackdropMenuItem.js +++ b/packages/material-ui-lab/src/Backdrop/BackdropBackMenuItem.js @@ -8,9 +8,10 @@ import MenuItem from '@material-ui/core/MenuItem'; import { capitalize } from '@material-ui/core/utils/helpers'; const styles = theme => { - let transition = theme.transitions.create('backgroundColor', { + const transition = theme.transitions.create('backgroundColor', { duration: theme.transitions.duration.shortest, }); + return { root: { ...theme.typography.body2, @@ -52,6 +53,10 @@ BackdropMenuItem.propTypes = { * The color of the component. It supports those theme colors that make sense for this component. */ color: PropTypes.oneOf(['primary', 'secondary']), + /** + * Use to apply selected styling. + */ + selected: PropTypes.bool, }; BackdropMenuItem.defaultProps = { diff --git a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js b/packages/material-ui-lab/src/Backdrop/BackdropBackSection.js similarity index 86% rename from packages/material-ui-lab/src/Backdrop/BackLayerSection.js rename to packages/material-ui-lab/src/Backdrop/BackdropBackSection.js index 131057f1fb7652..0e4d3bff429a74 100644 --- a/packages/material-ui-lab/src/Backdrop/BackLayerSection.js +++ b/packages/material-ui-lab/src/Backdrop/BackdropBackSection.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import withStyles from '@material-ui/core/styles/withStyles'; - import AnimateHeight from 'react-animate-height'; import Fade from '@material-ui/core/Fade'; @@ -10,20 +9,18 @@ const FADE_OUT = 150; const EXPAND = 150; const FADE_IN = 150; -export const styles = theme => { - return { - root: { - width: '100%', - paddingLeft: 7.5, - paddingRight: 7.5, - opacity: 0, - zIndex: 0, - }, - expanded: { - zIndex: 1, - opacity: 0, - }, - }; +export const styles = { + root: { + width: '100%', + paddingLeft: 7.5, + paddingRight: 7.5, + opacity: 0, + zIndex: 0, + }, + expanded: { + zIndex: 1, + opacity: 0, + }, }; function BackdropBackSection(props) { @@ -34,7 +31,6 @@ function BackdropBackSection(props) { const animationProps = { delay: FADE_OUT, duration: EXPAND, - height: 'auto', height: expanded ? 'auto' : 0, }; diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayer.js b/packages/material-ui-lab/src/Backdrop/BackdropFront.js similarity index 99% rename from packages/material-ui-lab/src/Backdrop/FrontLayer.js rename to packages/material-ui-lab/src/Backdrop/BackdropFront.js index d5800585292dc3..8cb2b449e9271d 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayer.js +++ b/packages/material-ui-lab/src/Backdrop/BackdropFront.js @@ -52,7 +52,6 @@ function BackdropFront(props) { const { classes, className: classNameProp, - defaultExpanded, disabled, minimized, onChange: onChangeProp, diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayerContent.js b/packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js similarity index 100% rename from packages/material-ui-lab/src/Backdrop/FrontLayerContent.js rename to packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js diff --git a/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js b/packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js similarity index 91% rename from packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js rename to packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js index 3c0bf0f0a85ce0..4cab45a6b9bd76 100644 --- a/packages/material-ui-lab/src/Backdrop/FrontLayerSubheader.js +++ b/packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js @@ -27,11 +27,10 @@ export const styles = theme => { }; function BackdropFrontSubheader(props) { - const { classes, className: classNameProp, children, divided, ...other } = props; - + const { classes, className: classNameProp, divided, ...other } = props; const className = classNames(classes.root, { [classes.divided]: divided }, classNameProp); - return
{children}
; + return
; } BackdropFrontSubheader.propTypes = { diff --git a/packages/material-ui-lab/src/Backdrop/FadeSwitch.js b/packages/material-ui-lab/src/Backdrop/FadeSwitch.js deleted file mode 100644 index cc4df487d91cd2..00000000000000 --- a/packages/material-ui-lab/src/Backdrop/FadeSwitch.js +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import withStyles from '@material-ui/core/styles/withStyles'; -import Fade from '@material-ui/core/Fade'; - -const SHORT_TRANSITION = 150; - -export const styles = theme => { - return { - root: { - position: 'relative', - }, - option: { - position: 'relative', - top: 0, - left: '100%', - marginLeft: '-100%', - float: 'left', - }, - selected: {}, - }; -}; - -function FadeSwitch(props) { - const { - children, - classes, - className: classNameProp, - selected: selectedProp, - options, - ...other - } = props; - - const selected = `${selectedProp}`; - - const className = classNames(classes.root, classNameProp); - - const fadeProps = isSelected => ({ - className: classNames(classes.option, { [classes.selected]: isSelected }), - in: isSelected, - timeout: SHORT_TRANSITION, - style: isSelected - ? { - transitionDelay: SHORT_TRANSITION, - zIndex: 1, - } - : { - transitionDelay: 0, - zIndex: 0, - }, - }); - - return ( -
- {Object.keys(options).map(key => ( - - {options[key]} - - ))} -
- ); -} - -FadeSwitch.propTypes = { - /** - * select the node to be displayed from options - */ - selected: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.bool, - PropTypes.symbol, - ]), - /** - * Mapping of selected states to selectable nodes. - */ - options: PropTypes.object.isRequired, - /** - * Override or extend the styles applied to the component. - * See [CSS API](#css-api) below for more details. - */ - classes: PropTypes.object.isRequired, - /** - * @ignore - */ - className: PropTypes.string, -}; - -export default withStyles(styles, { name: 'MuiFadeSwitch' })(FadeSwitch); diff --git a/packages/material-ui-lab/src/Backdrop/StackedFade.js b/packages/material-ui-lab/src/Backdrop/StackedFade.js new file mode 100644 index 00000000000000..60d237c4e1b238 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/StackedFade.js @@ -0,0 +1,95 @@ +// @inheritedComponent Fade + +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import withStyles from '@material-ui/core/styles/withStyles'; +import Fade from '@material-ui/core/Fade'; +import { duration } from '@material-ui/core/styles/transitions'; + +export const styles = { + root: { + position: 'relative', + top: 0, + left: '100%', + marginLeft: '-100%', + float: 'left', + }, + selected: {}, +}; + +function StackedFade(props) { + const { + classes, + timeout, + className: classNameProp, + style: styleProp, + in: inProp, + ...other + } = props; + + const className = classNames(classes.root, classNameProp); + + const inTransitionDelay = + (styleProp && styleProp.transitionDuration) || typeof timeout === 'object' + ? timeout.exit + : timeout; + + const style = { + ...styleProp, + zIndex: inProp ? 1 : 0, + transitionDelay: inProp ? inTransitionDelay : 0, + }; + + return ; +} + +StackedFade.propTypes = { + /** + * A single child content element. + */ + children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css-api) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * If `true`, the component will transition in. + */ + in: PropTypes.bool, + /** + * @ignore + */ + onEnter: PropTypes.func, + /** + * @ignore + */ + onExit: PropTypes.func, + /** + * @ignore + */ + style: PropTypes.object, + /** + * @ignore + */ + theme: PropTypes.object, + /** + * The duration for the transition, in milliseconds. + * You may specify a single timeout for all transitions, or individually with an object. + */ + timeout: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), + ]), +}; + +StackedFade.defaultProps = { + timeout: duration.shortest, +}; + +export default withStyles(styles, { name: 'MuiStackedFade' })(StackedFade); diff --git a/packages/material-ui-lab/src/Backdrop/index.js b/packages/material-ui-lab/src/Backdrop/index.js index 4f57103db2523e..df96bfa6555308 100644 --- a/packages/material-ui-lab/src/Backdrop/index.js +++ b/packages/material-ui-lab/src/Backdrop/index.js @@ -1 +1,8 @@ -export { default } from './Backdrop'; +export { default as Backdrop } from './Backdrop'; +export { default as BackdropBack } from './BackdropBack'; +export { default as BackdropBackSection } from './BackdropBackSection'; +export { default as BackdropBackMenuIteom } from './BackdropBackMenuItem'; +export { default as BackdropFront } from './BackdropFront'; +export { default as BackdropFrontContent } from './BackdropFrontContent'; +export { default as BackdropFrontSubheader } from './BackdropFrontSubheader'; +export { default as StackedFade } from './StackedFade'; From 6317f8efb8982c7c9c35b19e63d843042bb88f65 Mon Sep 17 00:00:00 2001 From: micimize Date: Wed, 27 Jun 2018 10:22:11 -0500 Subject: [PATCH 12/17] generated backdrop docs --- pages/lab/api/backdrop-back-menu-item.js | 10 +++++ pages/lab/api/backdrop-back-menu-item.md | 27 +++++++++++++ pages/lab/api/backdrop-back-section.js | 10 +++++ pages/lab/api/backdrop-back-section.md | 38 ++++++++++++++++++ pages/lab/api/backdrop-back.js | 10 +++++ pages/lab/api/backdrop-back.md | 36 +++++++++++++++++ pages/lab/api/backdrop-front-content.js | 10 +++++ pages/lab/api/backdrop-front-content.md | 36 +++++++++++++++++ pages/lab/api/backdrop-front-subheader.js | 10 +++++ pages/lab/api/backdrop-front-subheader.md | 38 ++++++++++++++++++ pages/lab/api/backdrop-front.js | 10 +++++ pages/lab/api/backdrop-front.md | 48 +++++++++++++++++++++++ pages/lab/api/backdrop.js | 10 +++++ pages/lab/api/backdrop.md | 48 +++++++++++++++++++++++ pages/lab/api/stacked-fade.js | 10 +++++ pages/lab/api/stacked-fade.md | 44 +++++++++++++++++++++ 16 files changed, 395 insertions(+) create mode 100644 pages/lab/api/backdrop-back-menu-item.js create mode 100644 pages/lab/api/backdrop-back-menu-item.md create mode 100644 pages/lab/api/backdrop-back-section.js create mode 100644 pages/lab/api/backdrop-back-section.md create mode 100644 pages/lab/api/backdrop-back.js create mode 100644 pages/lab/api/backdrop-back.md create mode 100644 pages/lab/api/backdrop-front-content.js create mode 100644 pages/lab/api/backdrop-front-content.md create mode 100644 pages/lab/api/backdrop-front-subheader.js create mode 100644 pages/lab/api/backdrop-front-subheader.md create mode 100644 pages/lab/api/backdrop-front.js create mode 100644 pages/lab/api/backdrop-front.md create mode 100644 pages/lab/api/backdrop.js create mode 100644 pages/lab/api/backdrop.md create mode 100644 pages/lab/api/stacked-fade.js create mode 100644 pages/lab/api/stacked-fade.md diff --git a/pages/lab/api/backdrop-back-menu-item.js b/pages/lab/api/backdrop-back-menu-item.js new file mode 100644 index 00000000000000..7d3b72d3f877a2 --- /dev/null +++ b/pages/lab/api/backdrop-back-menu-item.js @@ -0,0 +1,10 @@ +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './backdrop-back-menu-item.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/lab/api/backdrop-back-menu-item.md b/pages/lab/api/backdrop-back-menu-item.md new file mode 100644 index 00000000000000..7defc609dffb2c --- /dev/null +++ b/pages/lab/api/backdrop-back-menu-item.md @@ -0,0 +1,27 @@ +--- +filename: /packages/material-ui-lab/src/Backdrop/BackdropBackMenuItem.js +title: BackdropBackMenuItem API +--- + + + +# BackdropBackMenuItem + +

The API documentation of the BackdropBackMenuItem React component.

+ + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| color | enum: 'primary' |
 'secondary'
| 'primary' | The color of the component. It supports those theme colors that make sense for this component. | +| selected | bool | false | Use to apply selected styling. | + +Any other properties supplied will be spread to the root element ([MenuItem](/api/menu-item)). + +## Inheritance + +The properties of the [MenuItem](/api/menu-item) component are also available. +You can take advantage of this behavior to [target nested components](/guides/api#spread). + diff --git a/pages/lab/api/backdrop-back-section.js b/pages/lab/api/backdrop-back-section.js new file mode 100644 index 00000000000000..4b725e4815350f --- /dev/null +++ b/pages/lab/api/backdrop-back-section.js @@ -0,0 +1,10 @@ +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './backdrop-back-section.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/lab/api/backdrop-back-section.md b/pages/lab/api/backdrop-back-section.md new file mode 100644 index 00000000000000..dc6f433ddcbeb9 --- /dev/null +++ b/pages/lab/api/backdrop-back-section.md @@ -0,0 +1,38 @@ +--- +filename: /packages/material-ui-lab/src/Backdrop/BackdropBackSection.js +title: BackdropBackSection API +--- + + + +# BackdropBackSection + +

The API documentation of the BackdropBackSection React component.

+ + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children * | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| expanded | bool | false | If `true`, expand to reveal section. | + +Any other properties supplied will be spread to the root element (native element). + +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `root` +- `expanded` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Backdrop/BackdropBackSection.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiBackdropBackSection`. + diff --git a/pages/lab/api/backdrop-back.js b/pages/lab/api/backdrop-back.js new file mode 100644 index 00000000000000..a2fd93c0b4238f --- /dev/null +++ b/pages/lab/api/backdrop-back.js @@ -0,0 +1,10 @@ +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './backdrop-back.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/lab/api/backdrop-back.md b/pages/lab/api/backdrop-back.md new file mode 100644 index 00000000000000..4cca70b24fd417 --- /dev/null +++ b/pages/lab/api/backdrop-back.md @@ -0,0 +1,36 @@ +--- +filename: /packages/material-ui-lab/src/Backdrop/BackdropBack.js +title: BackdropBack API +--- + + + +# BackdropBack + +

The API documentation of the BackdropBack React component.

+ + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children * | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | + +Any other properties supplied will be spread to the root element (native element). + +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `root` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Backdrop/BackdropBack.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiBackdropBack`. + diff --git a/pages/lab/api/backdrop-front-content.js b/pages/lab/api/backdrop-front-content.js new file mode 100644 index 00000000000000..2d55e28b5270b4 --- /dev/null +++ b/pages/lab/api/backdrop-front-content.js @@ -0,0 +1,10 @@ +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './backdrop-front-content.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/lab/api/backdrop-front-content.md b/pages/lab/api/backdrop-front-content.md new file mode 100644 index 00000000000000..9d747c62134f17 --- /dev/null +++ b/pages/lab/api/backdrop-front-content.md @@ -0,0 +1,36 @@ +--- +filename: /packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js +title: BackdropFrontContent API +--- + + + +# BackdropFrontContent + +

The API documentation of the BackdropFrontContent React component.

+ + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children * | node |   | The content of the front panel. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | + +Any other properties supplied will be spread to the root element (native element). + +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `root` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiBackdropFrontContent`. + diff --git a/pages/lab/api/backdrop-front-subheader.js b/pages/lab/api/backdrop-front-subheader.js new file mode 100644 index 00000000000000..d05d77af89ecf0 --- /dev/null +++ b/pages/lab/api/backdrop-front-subheader.js @@ -0,0 +1,10 @@ +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './backdrop-front-subheader.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/lab/api/backdrop-front-subheader.md b/pages/lab/api/backdrop-front-subheader.md new file mode 100644 index 00000000000000..d4009c78072b50 --- /dev/null +++ b/pages/lab/api/backdrop-front-subheader.md @@ -0,0 +1,38 @@ +--- +filename: /packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js +title: BackdropFrontSubheader API +--- + + + +# BackdropFrontSubheader + +

The API documentation of the BackdropFrontSubheader React component.

+ + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children * | node |   | The content of the front panel. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| divided | bool | true | If `true`, a thin dividing border is included in the header. | + +Any other properties supplied will be spread to the root element (native element). + +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `root` +- `divided` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiBackdropFrontHeader`. + diff --git a/pages/lab/api/backdrop-front.js b/pages/lab/api/backdrop-front.js new file mode 100644 index 00000000000000..2ddbd45698e3b3 --- /dev/null +++ b/pages/lab/api/backdrop-front.js @@ -0,0 +1,10 @@ +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './backdrop-front.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/lab/api/backdrop-front.md b/pages/lab/api/backdrop-front.md new file mode 100644 index 00000000000000..f575f9bde7c4d1 --- /dev/null +++ b/pages/lab/api/backdrop-front.md @@ -0,0 +1,48 @@ +--- +filename: /packages/material-ui-lab/src/Backdrop/BackdropFront.js +title: BackdropFront API +--- + + + +# BackdropFront + +

The API documentation of the BackdropFront React component.

+ + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children * | node |   | The content of the front panel. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| disabled | bool |   | If `true`, the panel will be displayed in a disabled state, with a scrim overlay | +| minimized | bool |   | If `true`, minimize the panel. | +| minimizedIcon | node |   | The icon to display as the minimized indicator. | +| onChange | func |   | Callback fired when the expand/collapse state is changed.

**Signature:**
`function(event: object, minimized: boolean) => void`
*event:* The event source of the callback
*minimized:* The `minimized` state of the panel | + +Any other properties supplied will be spread to the root element ([Paper](/api/paper)). + +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `root` +- `scrim` +- `scrimActive` +- `minimized` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Backdrop/BackdropFront.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiBackdropFront`. + +## Inheritance + +The properties of the [Paper](/api/paper) component are also available. +You can take advantage of this behavior to [target nested components](/guides/api#spread). + diff --git a/pages/lab/api/backdrop.js b/pages/lab/api/backdrop.js new file mode 100644 index 00000000000000..9be553df504aa7 --- /dev/null +++ b/pages/lab/api/backdrop.js @@ -0,0 +1,10 @@ +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './backdrop.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/lab/api/backdrop.md b/pages/lab/api/backdrop.md new file mode 100644 index 00000000000000..e504295cbba513 --- /dev/null +++ b/pages/lab/api/backdrop.md @@ -0,0 +1,48 @@ +--- +filename: /packages/material-ui-lab/src/Backdrop/Backdrop.js +title: Backdrop API +--- + + + +# Backdrop + +

The API documentation of the Backdrop React component.

+ + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children * | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| color | enum: 'inherit' |
 'primary' |
 'secondary'
| 'primary' | The color of the component. It supports those theme colors that make sense for this component. | + +Any other properties supplied will be spread to the root element ([Paper](/api/paper)). + +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `root` +- `colorPrimary` +- `colorSecondary` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Backdrop/Backdrop.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiBackdrop`. + +## Inheritance + +The properties of the [Paper](/api/paper) component are also available. +You can take advantage of this behavior to [target nested components](/guides/api#spread). + +## Demos + +- [Backdrop](/lab/backdrop) + diff --git a/pages/lab/api/stacked-fade.js b/pages/lab/api/stacked-fade.js new file mode 100644 index 00000000000000..d501074f42ba01 --- /dev/null +++ b/pages/lab/api/stacked-fade.js @@ -0,0 +1,10 @@ +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './stacked-fade.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/lab/api/stacked-fade.md b/pages/lab/api/stacked-fade.md new file mode 100644 index 00000000000000..902507e4ebb65a --- /dev/null +++ b/pages/lab/api/stacked-fade.md @@ -0,0 +1,44 @@ +--- +filename: /packages/material-ui-lab/src/Backdrop/StackedFade.js +title: StackedFade API +--- + + + +# StackedFade + +

The API documentation of the StackedFade React component.

+ + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children | union: element |
 func
|   | A single child content element. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| in | bool |   | If `true`, the component will transition in. | +| timeout | union: number |
 {enter?: number, exit?: number}
| duration.shortest | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | + +Any other properties supplied will be spread to the root element ([Fade](/api/fade)). + +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `root` +- `selected` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Backdrop/StackedFade.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiStackedFade`. + +## Inheritance + +The properties of the [Fade](/api/fade) component are also available. +You can take advantage of this behavior to [target nested components](/guides/api#spread). + From 465f1a4a4104eaa5dff250706598984cf5699171 Mon Sep 17 00:00:00 2001 From: micimize Date: Wed, 27 Jun 2018 12:24:36 -0500 Subject: [PATCH 13/17] minimization --- .../lab/backdrop/MultiSectionBackdrop.js | 21 ++++++-- docs/src/pages/lab/backdrop/SimpleBackdrop.js | 6 ++- .../material-ui-lab/src/Backdrop/Backdrop.js | 1 + .../src/Backdrop/BackdropFront.js | 50 ++++++++++++------- .../src/Backdrop/BackdropFrontContent.js | 31 ++++++++++-- .../src/Backdrop/BackdropFrontSubheader.js | 33 ++++++++++-- .../ExpansionPanelSummary.js | 1 + 7 files changed, 110 insertions(+), 33 deletions(-) diff --git a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js index 58aace18fe86ae..a36f2d60ac2650 100644 --- a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js +++ b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { withStyles } from '@material-ui/core/styles'; +import Fade from '@material-ui/core/Fade'; import Backdrop from '@material-ui/lab/Backdrop/Backdrop'; import Back from '@material-ui/lab/Backdrop/BackdropBack'; import BackSection from '@material-ui/lab/Backdrop/BackdropBackSection'; @@ -15,6 +16,7 @@ import Toolbar from '@material-ui/core/Toolbar'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import FilterIcon from '@material-ui/icons/FilterList'; +import ExpandIcon from '@material-ui/icons/ExpandLess'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import Chip from '@material-ui/core/Chip'; @@ -81,6 +83,10 @@ const styles = theme => { backgroundColor: theme.palette.primary[300], color: theme.palette.primary.contrastText, }, + content: { + marginRight: -15, + overflowY: 'hidden', + }, }; }; @@ -139,22 +145,29 @@ class MultiSectionBackdrop extends React.Component {
- + Luxurious Lizards Glorious Geese Ecstatic Eggs - + {tags.map(label => )} - + this.setState({ expanded: false })} + > Incredible Iguanas + + + - + diff --git a/docs/src/pages/lab/backdrop/SimpleBackdrop.js b/docs/src/pages/lab/backdrop/SimpleBackdrop.js index 9b194a70db43a4..dd59fa268e07ea 100644 --- a/docs/src/pages/lab/backdrop/SimpleBackdrop.js +++ b/docs/src/pages/lab/backdrop/SimpleBackdrop.js @@ -31,6 +31,10 @@ const styles = { marginLeft: -12, marginRight: 20, }, + content: { + marginRight: -15, + overflowY: 'hidden', + }, }; class SimpleBackdrop extends React.Component { @@ -87,7 +91,7 @@ class SimpleBackdrop extends React.Component { Incredible Iguanas - + diff --git a/packages/material-ui-lab/src/Backdrop/Backdrop.js b/packages/material-ui-lab/src/Backdrop/Backdrop.js index 7cbc98c974dda3..9ce1d9fae71f16 100644 --- a/packages/material-ui-lab/src/Backdrop/Backdrop.js +++ b/packages/material-ui-lab/src/Backdrop/Backdrop.js @@ -16,6 +16,7 @@ export const styles = theme => { flexFlow: 'column', width: '100%', height: '100%', + justifyContent: 'space-between', }, colorPrimary: { backgroundColor: theme.palette.primary.main, diff --git a/packages/material-ui-lab/src/Backdrop/BackdropFront.js b/packages/material-ui-lab/src/Backdrop/BackdropFront.js index 8cb2b449e9271d..f223878ef45602 100644 --- a/packages/material-ui-lab/src/Backdrop/BackdropFront.js +++ b/packages/material-ui-lab/src/Backdrop/BackdropFront.js @@ -6,8 +6,14 @@ import classNames from 'classnames'; import Paper from '@material-ui/core/Paper'; import withStyles from '@material-ui/core/styles/withStyles'; import Fade from '@material-ui/core/Fade'; +import { isMuiElement } from '@material-ui/core/utils/reactHelpers'; export const styles = theme => { + const transition = { + duration: theme.transitions.duration.shortest, + delay: theme.transitions.duration.shortest, + }; + return { root: { position: 'relative', @@ -26,6 +32,8 @@ export const styles = theme => { overflow: 'auto', display: 'flex', flexDirection: 'column', + + transition: theme.transitions.create(['flex-grow'], transition), }, scrim: { zIndex: -1, @@ -42,8 +50,7 @@ export const styles = theme => { zIndex: theme.zIndex.appBar - 1, }, minimized: { - // positioning - backgroundColor: theme.palette.action.disabledBackground, + flexGrow: 0.0001, }, }; }; @@ -53,24 +60,32 @@ function BackdropFront(props) { classes, className: classNameProp, disabled, - minimized, - onChange: onChangeProp, - children, + expanded, + onExpand, + children: childrenProp, ...other } = props; - const onChange = onChangeProp ? event => onChange(event, !minimized) : null; - const className = classNames( classes.root, { - [classes.minimized]: minimized, + [classes.minimized]: !expanded, }, classNameProp, ); + const onClick = !expanded && !disabled ? onExpand : null; + + const children = React.Children.map( + childrenProp, + child => + isMuiElement(child, ['BackdropFrontSubheader', 'BackdropFrontContent']) + ? React.cloneElement(child, { expanded }) + : child, + ); + return ( - +
@@ -99,22 +114,19 @@ BackdropFront.propTypes = { */ disabled: PropTypes.bool, /** - * If `true`, minimize the panel. + * If `true`, expands the panel, otherwise collapse it to a minimized view. */ - minimized: PropTypes.bool, + expanded: PropTypes.bool, /** - * The icon to display as the minimized indicator. - */ - minimizedIcon: PropTypes.node, - /** - * Callback fired when the expand/collapse state is changed. + * Callback fired when minimized, non-disabled panel is clicked. * * @param {object} event The event source of the callback - * @param {boolean} minimized The `minimized` state of the panel */ - onChange: PropTypes.func, + onExpand: PropTypes.func, }; -BackdropFront.defaultProps = {}; +BackdropFront.defaultProps = { + expanded: true, +}; export default withStyles(styles, { name: 'MuiBackdropFront' })(BackdropFront); diff --git a/packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js b/packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js index 1ef0a53295c16a..3d943673a62827 100644 --- a/packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js +++ b/packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js @@ -2,20 +2,32 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import withStyles from '@material-ui/core/styles/withStyles'; +import AnimateHeight from 'react-animate-height'; export const styles = { root: { - flex: 1, - overflow: 'scroll', + overflow: 'auto!important', }, + content: {}, }; +const FADE_OUT = 150; +const EXPAND = 150; + function BackdropFrontContent(props) { - const { classes, className: classNameProp, ...other } = props; + const { classes, className: classNameProp, expanded, ...other } = props; const className = classNames(classes.root, classNameProp); - return
; + const animationProps = { + className, + contentClassName: classes.content, + delay: FADE_OUT, + duration: EXPAND, + height: expanded ? 'auto' : 0, + }; + + return ; } BackdropFrontContent.propTypes = { @@ -32,6 +44,17 @@ BackdropFrontContent.propTypes = { * @ignore */ className: PropTypes.string, + /** + * @ignore + * If `true`, parent panel is expanded. + */ + expanded: PropTypes.bool, +}; + +BackdropFrontContent.defaultProps = { + expanded: true, }; +BackdropFrontContent.muiName = 'BackdropFrontContent'; + export default withStyles(styles, { name: 'MuiBackdropFrontContent' })(BackdropFrontContent); diff --git a/packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js b/packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js index 4cab45a6b9bd76..9ff0dbcbb5cc24 100644 --- a/packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js +++ b/packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js @@ -4,6 +4,11 @@ import classNames from 'classnames'; import withStyles from '@material-ui/core/styles/withStyles'; export const styles = theme => { + const transition = { + duration: theme.transitions.duration.shortest, + delay: theme.transitions.duration.shortest, + }; + return { root: { zIndex: theme.zIndex.appBar - 2, @@ -15,20 +20,30 @@ export const styles = theme => { flexBasis: 56, width: '100%', display: 'flex', - flexDirection: 'column', - justifyContent: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', }, divided: { borderBottomStyle: 'solid', borderBottomWidth: 1, borderBottomColor: theme.palette.divider, + transition: theme.transitions.create(['border-bottom-color'], transition), + }, + minimized: { + cursor: 'pointer', + borderBottomColor: 'transparent', }, }; }; function BackdropFrontSubheader(props) { - const { classes, className: classNameProp, divided, ...other } = props; - const className = classNames(classes.root, { [classes.divided]: divided }, classNameProp); + const { classes, className: classNameProp, divided, expanded, ...other } = props; + const className = classNames( + classes.root, + { [classes.divided]: divided, [classes.minimized]: !expanded }, + classNameProp, + ); return
; } @@ -51,10 +66,18 @@ BackdropFrontSubheader.propTypes = { * If `true`, a thin dividing border is included in the header. */ divided: PropTypes.bool, + /** + * @ignore + * If `true`, parent panel is expanded. + */ + expanded: PropTypes.bool, }; BackdropFrontSubheader.defaultProps = { divided: true, + expanded: true, }; -export default withStyles(styles, { name: 'MuiBackdropFrontHeader' })(BackdropFrontSubheader); +BackdropFrontSubheader.muiName = 'BackdropFrontSubheader'; + +export default withStyles(styles, { name: 'MuiBackdropFrontSubheader' })(BackdropFrontSubheader); diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js index 3a89bcb406b6ba..47e199c98926fb 100644 --- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js +++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js @@ -11,6 +11,7 @@ export const styles = theme => { const transition = { duration: theme.transitions.duration.shortest, }; + return { /* Styles applied to the root element. */ root: { From c0be82e4a6222bc403ee84b129646a8c168230f1 Mon Sep 17 00:00:00 2001 From: micimize Date: Wed, 27 Jun 2018 22:48:02 -0500 Subject: [PATCH 14/17] fix margin --- docs/src/pages/lab/backdrop/MultiSectionBackdrop.js | 1 - docs/src/pages/lab/backdrop/SimpleBackdrop.js | 1 - 2 files changed, 2 deletions(-) diff --git a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js index a36f2d60ac2650..cafb40aec9265c 100644 --- a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js +++ b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js @@ -84,7 +84,6 @@ const styles = theme => { color: theme.palette.primary.contrastText, }, content: { - marginRight: -15, overflowY: 'hidden', }, }; diff --git a/docs/src/pages/lab/backdrop/SimpleBackdrop.js b/docs/src/pages/lab/backdrop/SimpleBackdrop.js index dd59fa268e07ea..6b73152022d064 100644 --- a/docs/src/pages/lab/backdrop/SimpleBackdrop.js +++ b/docs/src/pages/lab/backdrop/SimpleBackdrop.js @@ -32,7 +32,6 @@ const styles = { marginRight: 20, }, content: { - marginRight: -15, overflowY: 'hidden', }, }; From bfca01ef32570ac19710b599506f01656bdfb8de Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 25 Aug 2018 21:26:13 +0100 Subject: [PATCH 15/17] Rebase --- docs/src/pages/lab/backdrop/MultiSectionBackdrop.js | 12 ++++++------ docs/src/pages/lab/backdrop/SimpleBackdrop.js | 12 ++++++------ yarn.lock | 12 +++--------- 3 files changed, 15 insertions(+), 21 deletions(-) diff --git a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js index cafb40aec9265c..e7843840fbbec9 100644 --- a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js +++ b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js @@ -20,7 +20,7 @@ import ExpandIcon from '@material-ui/icons/ExpandLess'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import Chip from '@material-ui/core/Chip'; -import SimpleMediaCard from '../../demos/cards/SimpleMediaCard'; +import ImgMediaCard from '../../demos/cards/ImgMediaCard'; const tags = [ 'chameleon', @@ -169,19 +169,19 @@ class MultiSectionBackdrop extends React.Component { - + - + - + - + - + diff --git a/docs/src/pages/lab/backdrop/SimpleBackdrop.js b/docs/src/pages/lab/backdrop/SimpleBackdrop.js index 6b73152022d064..b4cf2a645e69fc 100644 --- a/docs/src/pages/lab/backdrop/SimpleBackdrop.js +++ b/docs/src/pages/lab/backdrop/SimpleBackdrop.js @@ -16,7 +16,7 @@ import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; -import SimpleMediaCard from '../../demos/cards/SimpleMediaCard'; +import ImgMediaCard from '../../demos/cards/ImgMediaCard'; const styles = { root: { @@ -93,19 +93,19 @@ class SimpleBackdrop extends React.Component { - + - + - + - + - + diff --git a/yarn.lock b/yarn.lock index 37ed3a5725b48b..937b52a92a4127 100644 --- a/yarn.lock +++ b/yarn.lock @@ -981,21 +981,15 @@ "@types/prop-types" "*" csstype "^2.2.0" -<<<<<<< HEAD -"@webassemblyjs/ast@1.5.13": - version "1.5.13" - resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.13.tgz#81155a570bd5803a30ec31436bc2c9c0ede38f25" -======= "@types/react@>=16": version "16.4.2" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.2.tgz#f1a9cf1ee85221530def2ac26aee20f910a9dac8" dependencies: csstype "^2.2.0" -"@webassemblyjs/ast@1.5.12": - version "1.5.12" - resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.12.tgz#a9acbcb3f25333c4edfa1fdf3186b1ccf64e6664" ->>>>>>> fix yarn lock +"@webassemblyjs/ast@1.5.13": + version "1.5.13" + resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.13.tgz#81155a570bd5803a30ec31436bc2c9c0ede38f25" dependencies: "@webassemblyjs/helper-module-context" "1.5.13" "@webassemblyjs/helper-wasm-bytecode" "1.5.13" From 315980977a0ee8f4062b0148b515985af5a8ea27 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 25 Aug 2018 21:39:39 +0100 Subject: [PATCH 16/17] Prettier --- docs/src/pages/lab/backdrop/MultiSectionBackdrop.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js index e7843840fbbec9..3ae0a53f3ae43e 100644 --- a/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js +++ b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js @@ -152,7 +152,9 @@ class MultiSectionBackdrop extends React.Component { - {tags.map(label => )} + {tags.map(label => ( + + ))} Date: Sat, 25 Aug 2018 22:14:33 +0100 Subject: [PATCH 17/17] yarn docs:api --- pages/api/backdrop.md | 4 ++++ pages/lab/api/backdrop-back-section.md | 1 + pages/lab/api/backdrop-back.md | 1 + pages/lab/api/backdrop-front-content.md | 2 ++ pages/lab/api/backdrop-front-subheader.md | 4 +++- pages/lab/api/backdrop-front.md | 6 +++--- pages/lab/api/backdrop.md | 1 + pages/lab/api/stacked-fade.md | 3 ++- 8 files changed, 17 insertions(+), 5 deletions(-) diff --git a/pages/api/backdrop.md b/pages/api/backdrop.md index fa0bdaa03267f9..67081108feca66 100644 --- a/pages/api/backdrop.md +++ b/pages/api/backdrop.md @@ -41,3 +41,7 @@ If using the `overrides` key of the theme as documented [here](/customization/themes#customizing-all-instances-of-a-component-type), you need to use the following style sheet name: `MuiBackdrop`. +## Demos + +- [Backdrop](/lab/backdrop) + diff --git a/pages/lab/api/backdrop-back-section.md b/pages/lab/api/backdrop-back-section.md index dc6f433ddcbeb9..21092586168f44 100644 --- a/pages/lab/api/backdrop-back-section.md +++ b/pages/lab/api/backdrop-back-section.md @@ -25,6 +25,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: + - `root` - `expanded` diff --git a/pages/lab/api/backdrop-back.md b/pages/lab/api/backdrop-back.md index 4cca70b24fd417..db6b677269cfa9 100644 --- a/pages/lab/api/backdrop-back.md +++ b/pages/lab/api/backdrop-back.md @@ -24,6 +24,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: + - `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section diff --git a/pages/lab/api/backdrop-front-content.md b/pages/lab/api/backdrop-front-content.md index 9d747c62134f17..43852b338f5ed5 100644 --- a/pages/lab/api/backdrop-front-content.md +++ b/pages/lab/api/backdrop-front-content.md @@ -24,7 +24,9 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: + - `root` +- `content` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js) diff --git a/pages/lab/api/backdrop-front-subheader.md b/pages/lab/api/backdrop-front-subheader.md index d4009c78072b50..bb4ddd4dc7db7b 100644 --- a/pages/lab/api/backdrop-front-subheader.md +++ b/pages/lab/api/backdrop-front-subheader.md @@ -25,8 +25,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: + - `root` - `divided` +- `minimized` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js) @@ -34,5 +36,5 @@ for more detail. If using the `overrides` key of the theme as documented [here](/customization/themes#customizing-all-instances-of-a-component-type), -you need to use the following style sheet name: `MuiBackdropFrontHeader`. +you need to use the following style sheet name: `MuiBackdropFrontSubheader`. diff --git a/pages/lab/api/backdrop-front.md b/pages/lab/api/backdrop-front.md index f575f9bde7c4d1..ca3872d4449863 100644 --- a/pages/lab/api/backdrop-front.md +++ b/pages/lab/api/backdrop-front.md @@ -18,9 +18,8 @@ title: BackdropFront API | children * | node |   | The content of the front panel. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | disabled | bool |   | If `true`, the panel will be displayed in a disabled state, with a scrim overlay | -| minimized | bool |   | If `true`, minimize the panel. | -| minimizedIcon | node |   | The icon to display as the minimized indicator. | -| onChange | func |   | Callback fired when the expand/collapse state is changed.

**Signature:**
`function(event: object, minimized: boolean) => void`
*event:* The event source of the callback
*minimized:* The `minimized` state of the panel | +| expanded | bool | true | If `true`, expands the panel, otherwise collapse it to a minimized view. | +| onExpand | func |   | Callback fired when minimized, non-disabled panel is clicked.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | Any other properties supplied will be spread to the root element ([Paper](/api/paper)). @@ -28,6 +27,7 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: + - `root` - `scrim` - `scrimActive` diff --git a/pages/lab/api/backdrop.md b/pages/lab/api/backdrop.md index e504295cbba513..3748a991a1c064 100644 --- a/pages/lab/api/backdrop.md +++ b/pages/lab/api/backdrop.md @@ -25,6 +25,7 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: + - `root` - `colorPrimary` - `colorSecondary` diff --git a/pages/lab/api/stacked-fade.md b/pages/lab/api/stacked-fade.md index 902507e4ebb65a..cbf10805d7319b 100644 --- a/pages/lab/api/stacked-fade.md +++ b/pages/lab/api/stacked-fade.md @@ -18,7 +18,7 @@ title: StackedFade API | children | union: element |
 func
|   | A single child content element. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | in | bool |   | If `true`, the component will transition in. | -| timeout | union: number |
 {enter?: number, exit?: number}
| duration.shortest | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| timeout | union: number |
 { enter?: number, exit?: number }
| duration.shortest | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | Any other properties supplied will be spread to the root element ([Fade](/api/fade)). @@ -26,6 +26,7 @@ Any other properties supplied will be spread to the root element ([Fade](/api/fa You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: + - `root` - `selected`