diff --git a/.size-limit.js b/.size-limit.js index b98ee2e3c891e0..3ba1462ac60606 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -11,7 +11,6 @@ const [main] = fs.readdirSync(dirname).reduce((result, filename) => { return result; }, []); - module.exports = [ { name: 'The initial cost paid for using one component', diff --git a/docs/src/pages/demos/dividers/InsetDividers.js b/docs/src/pages/demos/dividers/InsetDividers.js index 1fb548dca0c6c7..413268c9cacccf 100644 --- a/docs/src/pages/demos/dividers/InsetDividers.js +++ b/docs/src/pages/demos/dividers/InsetDividers.js @@ -21,32 +21,30 @@ const styles = theme => ({ function InsetDividers(props) { const { classes } = props; return ( -
- - - - - - - -
  • - -
    • - - - - - - - - - - - - - -     -
    + + + + + + + +
  • + +
    • + + + + + + + + + + + + + +     ); } diff --git a/docs/src/pages/demos/dividers/ListDividers.js b/docs/src/pages/demos/dividers/ListDividers.js index 4df901a95a9850..d170437aefcf59 100644 --- a/docs/src/pages/demos/dividers/ListDividers.js +++ b/docs/src/pages/demos/dividers/ListDividers.js @@ -17,24 +17,22 @@ const styles = theme => ({ function ListDividers(props) { const { classes } = props; return ( -
    - - - - - - - - - - - - - - - - -
    + + + + + + + + + + + + + + + + ); } diff --git a/docs/src/pages/demos/dividers/MiddleDividers.js b/docs/src/pages/demos/dividers/MiddleDividers.js index 12206c17c9a319..884bc74a8f935d 100644 --- a/docs/src/pages/demos/dividers/MiddleDividers.js +++ b/docs/src/pages/demos/dividers/MiddleDividers.js @@ -21,30 +21,28 @@ const styles = theme => ({ function MiddleDividers(props) { const { classes } = props; return ( -
    - - - - - - - - - - - - - - - - - - - - - - -
    + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.js b/docs/src/pages/demos/dividers/SubheaderDividers.js index db255ab039edeb..1b9ed4470bbf25 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.js +++ b/docs/src/pages/demos/dividers/SubheaderDividers.js @@ -5,10 +5,9 @@ import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import Avatar from '@material-ui/core/Avatar'; -import ImageIcon from '@material-ui/icons/Image'; -import WorkIcon from '@material-ui/icons/Work'; import BeachAccessIcon from '@material-ui/icons/BeachAccess'; import Divider from '@material-ui/core/Divider'; +import Typography from '@material-ui/core/Typography'; const styles = theme => ({ root: { @@ -16,35 +15,43 @@ const styles = theme => ({ maxWidth: 360, backgroundColor: theme.palette.background.paper, }, + dividerFullWidth: { + margin: `5px 0 0 ${theme.spacing.unit * 2}px`, + }, + dividerInset: { + margin: `5px 0 0 ${theme.spacing.unit * 9}px`, + }, }); function SubheaderDividers(props) { const { classes } = props; return ( -
    - - - - - - - - - - - - - - - - - - - - - - -
    + + + + + +
  • + + Divider + +
    • + + + + +
  • + + Leisure + +
    • + + + + + + +     ); } diff --git a/packages/material-ui/src/Divider/Divider.d.ts b/packages/material-ui/src/Divider/Divider.d.ts index 1802e10d644a89..96bcc30ae4d4dd 100644 --- a/packages/material-ui/src/Divider/Divider.d.ts +++ b/packages/material-ui/src/Divider/Divider.d.ts @@ -7,11 +7,10 @@ export interface DividerProps component?: React.ReactType; inset?: boolean; light?: boolean; - subheader?: string; - variant?: 'fullBleed' | 'inset' | 'middle'; + variant?: 'fullWidth' | 'inset' | 'middle'; } -export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light' | 'middle' | 'subheader'; +export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light' | 'middle'; declare const Divider: React.ComponentType; diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index f3b040f705bfe3..de2845c98d01d8 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import withStyles from '../styles/withStyles'; import { fade } from '../styles/colorManipulator'; -import Typography from '../Typography/Typography'; import chainPropTypes from '../utils/chainPropTypes'; export const styles = theme => ({ @@ -22,73 +21,54 @@ export const styles = theme => ({ left: 0, width: '100%', }, - /* Styles applied to the root element if `variant={'inset'}`. */ + /* Styles applied to the root element if `variant="inset"`. */ inset: { marginLeft: 72, - '& + $subheader': { - marginLeft: 72, - marginTop: theme.spacing.unit / 2, - }, }, /* Styles applied to the root element if `light={true}`. */ light: { backgroundColor: fade(theme.palette.divider, 0.08), }, - /* Styles applied to the root element if `variant={'middle'}`. */ + /* Styles applied to the root element if `variant="middle"`. */ middle: { marginLeft: theme.spacing.unit * 2, marginRight: theme.spacing.unit * 2, }, - /* Styles applied to the Typography element */ - subheader: { - marginLeft: theme.spacing.unit * 2, - marginTop: theme.spacing.unit / 2 + 1, - }, }); function Divider(props) { const { absolute, classes, - className: classNameProp, + className, component: Component, inset, light, - subheader, variant, ...other } = props; - const className = classNames( - classes.root, - { - [classes.absolute]: absolute, - [classes.inset]: inset || variant === 'inset', - [classes.light]: light, - [classes.middle]: variant === 'middle', - }, - classNameProp, - ); - - let subheaderComponent; - - if (subheader && variant !== 'middle') { - subheaderComponent = ( - - {subheader} - - ); - } - return ( - - - {subheaderComponent} - + ); } Divider.propTypes = { + /** + * Absolutely position the element. + */ absolute: PropTypes.bool, /** * Override or extend the styles applied to the component. @@ -113,9 +93,9 @@ Divider.propTypes = { /* istanbul ignore if */ if (props.inset) { return new Error( - 'Material-UI: You are using the deprecated `inset` property ' + + 'Material-UI: you are using the deprecated `inset` property ' + 'that will be removed in the next major release. The property `variant="inset"` ' + - 'is equivalent and should be used instead', + 'is equivalent and should be used instead.', ); } @@ -125,31 +105,17 @@ Divider.propTypes = { * If `true`, the divider will have a lighter color. */ light: PropTypes.bool, - /** - * Divider subheader text. This will not work with `variant={'middle'}` - */ - subheader: chainPropTypes(PropTypes.string, props => { - /* istanbul ignore if */ - if (props.subheader && props.variant === 'middle') { - return new Error( - 'Material-UI: you have provided the `subheader` property ' + - 'with the variant `middle`. This will have no effect.', - ); - } - - return null; - }), /** * The variant to use. */ - variant: PropTypes.oneOf(['fullBleed', 'inset', 'middle']), + variant: PropTypes.oneOf(['fullWidth', 'inset', 'middle']), }; Divider.defaultProps = { absolute: false, component: 'hr', light: false, - variant: 'fullBleed', + variant: 'fullWidth', }; export default withStyles(styles, { name: 'MuiDivider' })(Divider); diff --git a/packages/material-ui/src/Divider/Divider.test.js b/packages/material-ui/src/Divider/Divider.test.js index e681bb0c308fd7..af456f7ed4157f 100644 --- a/packages/material-ui/src/Divider/Divider.test.js +++ b/packages/material-ui/src/Divider/Divider.test.js @@ -2,8 +2,6 @@ import React from 'react'; import { assert } from 'chai'; import { createShallow, getClasses } from '@material-ui/core/test-utils'; import Divider from './Divider'; -import Typography from '../Typography'; -import consoleErrorMock from 'test/utils/consoleErrorMock'; describe('', () => { let shallow; @@ -16,110 +14,56 @@ describe('', () => { it('should render a hr', () => { const wrapper = shallow(); - const hr = wrapper.childAt(0); - assert.strictEqual(hr.name(), 'hr'); + assert.strictEqual(wrapper.name(), 'hr'); }); it('should render with the root and default class', () => { const wrapper = shallow(); - const hr = wrapper.childAt(0); - assert.strictEqual(hr.hasClass(classes.root), true); + assert.strictEqual(wrapper.hasClass(classes.root), true); }); it('should set the absolute class', () => { const wrapper = shallow(); - const hr = wrapper.childAt(0); - assert.strictEqual(hr.hasClass(classes.absolute), true); + assert.strictEqual(wrapper.hasClass(classes.absolute), true); }); it('should set the light class', () => { const wrapper = shallow(); - const hr = wrapper.childAt(0); - assert.strictEqual(hr.hasClass(classes.light), true); + assert.strictEqual(wrapper.hasClass(classes.light), true); }); describe('prop: inset', () => { - before(() => { - consoleErrorMock.spy(); - }); - - after(() => { - consoleErrorMock.reset(); - }); - it('should set the inset class', () => { const wrapper = shallow(); - const hr = wrapper.childAt(0); - assert.strictEqual(hr.hasClass(classes.inset), true); - }); - - it('should log a deprecation warning if this property is used', () => { - shallow(); - assert.match(consoleErrorMock.args()[0][0], /You are using the deprecated `inset` property/); - }); - }); - - describe('prop: subheader', () => { - it('should render a Typography component', () => { - const wrapper = shallow(); - const wrappedTypography = wrapper.find(Typography); - const typography = wrappedTypography.childAt(0); - assert.strictEqual(wrappedTypography.type(), Typography); - assert.strictEqual(wrappedTypography.hasClass(classes.subheader), true); - assert.strictEqual(typography.text(), 'test'); - }); - - it('should not render a Typography component when null or not present', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.childAt(1).exists(), false); + assert.strictEqual(wrapper.hasClass(classes.inset), true); }); }); describe('prop: variant', () => { - it('should default to variant={"fullBleed"}', () => { + it('should default to variant="fullWidth"', () => { const wrapper = shallow(); - const hr = wrapper.childAt(0); - assert.strictEqual(hr.hasClass(classes.inset), false); - assert.strictEqual(hr.hasClass(classes.middle), false); + assert.strictEqual(wrapper.hasClass(classes.inset), false); + assert.strictEqual(wrapper.hasClass(classes.middle), false); }); - describe('prop: variant={"fullBleed"} ', () => { + describe('prop: variant="fullWidth" ', () => { it('should render with the root and default class', () => { const wrapper = shallow(); - const hr = wrapper.childAt(0); - assert.strictEqual(hr.hasClass(classes.root), true); + assert.strictEqual(wrapper.hasClass(classes.root), true); }); }); - describe('prop: variant={"inset"} ', () => { + describe('prop: variant="inset" ', () => { it('should set the inset class', () => { - const wrapper = shallow(); - const hr = wrapper.childAt(0); - assert.strictEqual(hr.hasClass(classes.inset), true); + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.inset), true); }); }); - describe('prop: variant={"middle"}', () => { - before(() => { - consoleErrorMock.spy(); - }); - - after(() => { - consoleErrorMock.reset(); - }); - + describe('prop: variant="middle"', () => { it('should set the middle class', () => { - const wrapper = shallow(); - const hr = wrapper.childAt(0); - assert.strictEqual(hr.hasClass(classes.middle), true); - }); - - it('should log a warning if subheader is supplied with variant="middle"', () => { - shallow(); - assert.match( - consoleErrorMock.args()[0][0], - /`subheader` property with the variant `middle`. This will have no effect./, - ); + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.middle), true); }); }); }); diff --git a/pages/api/divider.md b/pages/api/divider.md index 0e1816b6948275..69a5ee6a79c744 100644 --- a/pages/api/divider.md +++ b/pages/api/divider.md @@ -19,13 +19,12 @@ import Divider from '@material-ui/core/Divider'; | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| absolute | bool | false | | +| absolute | bool | false | Absolutely position the element. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
     func |
     object
     | 'hr' | The component used for the root node. Either a string to use a DOM element or a component. | | inset | bool |   | If `true`, the divider will be indented. __WARNING__: `inset` is deprecated. Instead use `variant="inset"`. | | light | bool | false | If `true`, the divider will have a lighter color. | -| subheader | string |   | Divider subheader text. This will not work with `variant={'middle'}` | -| variant | enum: 'fullBleed' |
     'inset' |
     'middle'
     | 'fullBleed' | The variant to use. | +| variant | enum: 'fullWidth' |
     'inset' |
     'middle'
     | 'fullWidth' | The variant to use. | Any other properties supplied will be spread to the root element (native element). @@ -39,10 +38,9 @@ This property accepts the following keys: |:-----|:------------| | root | Styles applied to the root element. | absolute | Styles applied to the root element if `absolute={true}`. -| inset | Styles applied to the root element if `variant={'inset'}`. +| inset | Styles applied to the root element if `variant="inset"`. | light | Styles applied to the root element if `light={true}`. -| middle | Styles applied to the root element if `variant={'middle'}`. -| subheader | Styles applied to the Typography element +| middle | Styles applied to the root element if `variant="middle"`. 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/src/Divider/Divider.js)