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/MultiSectionBackdrop.js b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js new file mode 100644 index 00000000000000..3ae0a53f3ae43e --- /dev/null +++ b/docs/src/pages/lab/backdrop/MultiSectionBackdrop.js @@ -0,0 +1,201 @@ +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'; +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 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'; +import ImgMediaCard from '../../demos/cards/ImgMediaCard'; + +const 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 => { + return { + root: { + width: 360, + height: 616, + position: 'relative', + }, + flex: { + flex: 1, + }, + title: { + 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, + }, + content: { + overflowY: 'hidden', + }, + }; +}; + +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 + + + + {"Nature's Nobility"} + <IconButton + color="inherit" + aria-label="Filters" + className={classes.filter} + onClick={() => this.setState({ expanded: 'filters' })} + > + <FilterIcon /> + </IconButton> + + + + Filter by tags + +
+ + + + + Luxurious Lizards + Glorious Geese + Ecstatic Eggs + + + + {tags.map(label => ( + + ))} + + + this.setState({ expanded: false })} + > + + Incredible Iguanas + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); + } +} + +MultiSectionBackdrop.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(MultiSectionBackdrop); diff --git a/docs/src/pages/lab/backdrop/SimpleBackdrop.js b/docs/src/pages/lab/backdrop/SimpleBackdrop.js new file mode 100644 index 00000000000000..b4cf2a645e69fc --- /dev/null +++ b/docs/src/pages/lab/backdrop/SimpleBackdrop.js @@ -0,0 +1,123 @@ +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/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 ImgMediaCard from '../../demos/cards/ImgMediaCard'; + +const styles = { + root: { + width: 360, + height: 616, + position: 'relative', + }, + flex: { + flex: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + content: { + overflowY: 'hidden', + }, +}; + +class SimpleBackdrop extends React.Component { + state = { + expanded: false, + }; + + render() { + const { classes } = this.props; + const { expanded } = this.state; + + const Title = ({ className, ...props }) => ( + + ); + + return ( +
+ + + + + this.setState({ expanded: !expanded })} + > + + + + <StackedFade in={!expanded}> + <span>Luxurious Lizards</span> + </StackedFade> + <StackedFade in={expanded}> + <span>{"Nature's Nobility"}</span> + </StackedFade> + + + + + + Luxurious Lizards + Glorious Geese + Ecstatic Eggs + + + + + + Incredible Iguanas + + + + + + + + + + + + + + + + + + + + + + +
+ ); + } +} + +SimpleBackdrop.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimpleBackdrop); diff --git a/docs/src/pages/lab/backdrop/backdrop.md b/docs/src/pages/lab/backdrop/backdrop.md new file mode 100644 index 00000000000000..2a2c6a75896f71 --- /dev/null +++ b/docs/src/pages/lab/backdrop/backdrop.md @@ -0,0 +1,14 @@ +--- +components: Backdrop +--- + +# Backdrop +

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

+ +## Simple Backdrop + +{{"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/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/Backdrop.js b/packages/material-ui-lab/src/Backdrop/Backdrop.js new file mode 100644 index 00000000000000..9ce1d9fae71f16 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/Backdrop.js @@ -0,0 +1,74 @@ +// @inheritedComponent Paper + +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +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 => { + return { + root: { + position: 'absolute', + zIndex: 0, + display: 'flex', + flexFlow: 'column', + width: '100%', + height: '100%', + justifyContent: 'space-between', + }, + 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, ...other } = props; + + const className = classNames( + classes.root, + { + [classes[`color${capitalize(color)}`]]: color !== 'inherit', + }, + 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']), +}; + +Backdrop.defaultProps = { + color: 'primary', +}; + +export default withStyles(styles, { name: 'MuiBackdrop' })(Backdrop); diff --git a/packages/material-ui-lab/src/Backdrop/BackdropBack.js b/packages/material-ui-lab/src/Backdrop/BackdropBack.js new file mode 100644 index 00000000000000..77729165f8f32c --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/BackdropBack.js @@ -0,0 +1,43 @@ +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: { + // fit to content + flexGrow: 0, + flexShrink: 1, + flexBasis: 'auto', + }, +}; + +function BackdropBack(props) { + const { children, classes, className: classNameProp, ...other } = props; + + const className = classNames(classes.root, 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, +}; + +export default withStyles(styles, { name: 'MuiBackdropBack' })(BackdropBack); diff --git a/packages/material-ui-lab/src/Backdrop/BackdropBackMenuItem.js b/packages/material-ui-lab/src/Backdrop/BackdropBackMenuItem.js new file mode 100644 index 00000000000000..bfeb56e338ea34 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/BackdropBackMenuItem.js @@ -0,0 +1,67 @@ +// @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 => { + const 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']), + /** + * Use to apply selected styling. + */ + selected: PropTypes.bool, +}; + +BackdropMenuItem.defaultProps = { + color: 'primary', + selected: false, +}; + +export default withStyles(styles, { name: 'MuiBackdropMenuItem' })(BackdropMenuItem); diff --git a/packages/material-ui-lab/src/Backdrop/BackdropBackSection.js b/packages/material-ui-lab/src/Backdrop/BackdropBackSection.js new file mode 100644 index 00000000000000..0e4d3bff429a74 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/BackdropBackSection.js @@ -0,0 +1,78 @@ +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'; + +const FADE_OUT = 150; +const EXPAND = 150; +const FADE_IN = 150; + +export const styles = { + root: { + width: '100%', + paddingLeft: 7.5, + paddingRight: 7.5, + opacity: 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 animationProps = { + delay: FADE_OUT, + duration: EXPAND, + height: expanded ? 'auto' : 0, + }; + + const fadeProps = { + in: expanded, + timeout: expanded ? FADE_IN : FADE_OUT, + style: { + transitionDelay: expanded ? EXPAND + FADE_OUT : 0, + }, + }; + + 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 section. + */ + expanded: PropTypes.bool, +}; + +BackdropBackSection.defaultProps = { + expanded: false, +}; + +export default withStyles(styles, { name: 'MuiBackdropBackSection' })(BackdropBackSection); diff --git a/packages/material-ui-lab/src/Backdrop/BackdropFront.js b/packages/material-ui-lab/src/Backdrop/BackdropFront.js new file mode 100644 index 00000000000000..f223878ef45602 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/BackdropFront.js @@ -0,0 +1,132 @@ +// @inheritedComponent Paper + +import React from 'react'; +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'; +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', + 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, + overflow: 'auto', + display: 'flex', + flexDirection: 'column', + + transition: theme.transitions.create(['flex-grow'], 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: { + flexGrow: 0.0001, + }, + }; +}; + +function BackdropFront(props) { + const { + classes, + className: classNameProp, + disabled, + expanded, + onExpand, + children: childrenProp, + ...other + } = props; + + const className = classNames( + classes.root, + { + [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 ( + + +
+ + {children} + + ); +} + +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`, expands the panel, otherwise collapse it to a minimized view. + */ + expanded: PropTypes.bool, + /** + * Callback fired when minimized, non-disabled panel is clicked. + * + * @param {object} event The event source of the callback + */ + onExpand: PropTypes.func, +}; + +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 new file mode 100644 index 00000000000000..3d943673a62827 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/BackdropFrontContent.js @@ -0,0 +1,60 @@ +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: { + overflow: 'auto!important', + }, + content: {}, +}; + +const FADE_OUT = 150; +const EXPAND = 150; + +function BackdropFrontContent(props) { + const { classes, className: classNameProp, expanded, ...other } = props; + + const className = classNames(classes.root, classNameProp); + + const animationProps = { + className, + contentClassName: classes.content, + delay: FADE_OUT, + duration: EXPAND, + height: expanded ? 'auto' : 0, + }; + + 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, + /** + * @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 new file mode 100644 index 00000000000000..9ff0dbcbb5cc24 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/BackdropFrontSubheader.js @@ -0,0 +1,83 @@ +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 => { + const transition = { + duration: theme.transitions.duration.shortest, + delay: theme.transitions.duration.shortest, + }; + + return { + root: { + zIndex: theme.zIndex.appBar - 2, + backgroundColor: theme.palette.background.paper, + position: 'sticky', + top: 0, + flexGrow: 0, + flexShrink: 0, + flexBasis: 56, + width: '100%', + display: 'flex', + 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, expanded, ...other } = props; + const className = classNames( + classes.root, + { [classes.divided]: divided, [classes.minimized]: !expanded }, + classNameProp, + ); + + return
; +} + +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, + /** + * @ignore + * If `true`, parent panel is expanded. + */ + expanded: PropTypes.bool, +}; + +BackdropFrontSubheader.defaultProps = { + divided: true, + expanded: true, +}; + +BackdropFrontSubheader.muiName = 'BackdropFrontSubheader'; + +export default withStyles(styles, { name: 'MuiBackdropFrontSubheader' })(BackdropFrontSubheader); 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.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..df96bfa6555308 --- /dev/null +++ b/packages/material-ui-lab/src/Backdrop/index.js @@ -0,0 +1,8 @@ +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'; 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: { 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-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..21092586168f44 --- /dev/null +++ b/pages/lab/api/backdrop-back-section.md @@ -0,0 +1,39 @@ +--- +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..db6b677269cfa9 --- /dev/null +++ b/pages/lab/api/backdrop-back.md @@ -0,0 +1,37 @@ +--- +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..43852b338f5ed5 --- /dev/null +++ b/pages/lab/api/backdrop-front-content.md @@ -0,0 +1,38 @@ +--- +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` +- `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) +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..bb4ddd4dc7db7b --- /dev/null +++ b/pages/lab/api/backdrop-front-subheader.md @@ -0,0 +1,40 @@ +--- +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` +- `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) +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: `MuiBackdropFrontSubheader`. + 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..ca3872d4449863 --- /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 | +| 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)). + +## 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..3748a991a1c064 --- /dev/null +++ b/pages/lab/api/backdrop.md @@ -0,0 +1,49 @@ +--- +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..cbf10805d7319b --- /dev/null +++ b/pages/lab/api/stacked-fade.md @@ -0,0 +1,45 @@ +--- +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). + diff --git a/pages/lab/backdrop.js b/pages/lab/backdrop.js new file mode 100644 index 00000000000000..d4fb58e6a73a04 --- /dev/null +++ b/pages/lab/backdrop.js @@ -0,0 +1,30 @@ +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); diff --git a/yarn.lock b/yarn.lock index 7486fd78c00b26..937b52a92a4127 100644 --- a/yarn.lock +++ b/yarn.lock @@ -981,6 +981,12 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@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.13": version "1.5.13" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.13.tgz#81155a570bd5803a30ec31436bc2c9c0ede38f25" @@ -7872,6 +7878,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"