diff --git a/docs/src/pages/component-demos/lists/InteractiveList.js b/docs/src/pages/component-demos/lists/InteractiveList.js index 1b4f5200fd3ad7..606daad038c7b5 100644 --- a/docs/src/pages/component-demos/lists/InteractiveList.js +++ b/docs/src/pages/component-demos/lists/InteractiveList.js @@ -117,17 +117,11 @@ class InteractiveList extends Component { {generate(( - {dense ? ( - - - - - - ) : ( + - )} + {generate(( - {dense ? ( - - - - - - ) : ( + - )} + { return { - dense: { - height: 32, - marginRight: 8, - width: 32, + denseAvatar: { + width: 36, + height: 36, + fontSize: 18, + marginRight: 4, + }, + denseAvatarIcon: { + width: 20, + height: 20, }, }; }); @@ -26,9 +31,9 @@ export const styleSheet = createStyleSheet('MuiListItemAvatar', () => { * ``` */ export default function ListItemAvatar(props, context) { - if (!context.dense) { + if (context.dense === undefined) { warning(false, `Material-UI: is a simple wrapper to apply the dense styles - to Avatar. You do not need it.`); + to . You do not need it unless you are controlling the dense property.`); return props.children; } @@ -40,7 +45,15 @@ export default function ListItemAvatar(props, context) { const classes = context.styleManager.render(styleSheet); return React.cloneElement(children, { - className: classNames(classes.dense, classNameProp, children.props.className), + className: classNames( + { [classes.denseAvatar]: context.dense }, + classNameProp, + children.props.className, + ), + childrenClassName: classNames( + { [classes.denseAvatarIcon]: context.dense }, + children.props.childrenClassName, + ), ...other, }); } diff --git a/src/List/ListItemAvatar.spec.js b/src/List/ListItemAvatar.spec.js index 7b697db5bd00de..08cf1d5169171b 100644 --- a/src/List/ListItemAvatar.spec.js +++ b/src/List/ListItemAvatar.spec.js @@ -5,6 +5,7 @@ import React from 'react'; import { assert } from 'chai'; import { createShallow } from 'src/test-utils'; import ListItemAvatar, { styleSheet } from './ListItemAvatar'; +import Avatar from '../Avatar'; describe('', () => { let shallow; @@ -15,23 +16,23 @@ describe('', () => { classes = shallow.context.styleManager.render(styleSheet); }); - it('should render a span', () => { + it('should render an Avatar', () => { const wrapper = shallow(( - + ), { context: { dense: true, }, }); - assert.strictEqual(wrapper.is('span'), true, 'should be a span'); + assert.strictEqual(wrapper.is('Avatar'), true, 'should be an Avatar'); }); it('should render with the user and root classes', () => { const wrapper = shallow(( - + ), { context: { @@ -40,6 +41,7 @@ describe('', () => { }); assert.strictEqual(wrapper.hasClass('foo'), true, 'should have the "foo" class'); assert.strictEqual(wrapper.hasClass('bar'), true, 'should have the "bar" class'); - assert.strictEqual(wrapper.hasClass(classes.dense), true, 'should have the dense class'); + assert.strictEqual(wrapper.hasClass(classes.denseAvatar), true, + 'should have the denseAvatar class'); }); }); diff --git a/src/styles/MuiThemeProvider.js b/src/styles/MuiThemeProvider.js index 5eaf47525ae655..28cf4ea6d66204 100644 --- a/src/styles/MuiThemeProvider.js +++ b/src/styles/MuiThemeProvider.js @@ -60,6 +60,8 @@ export const MUI_SHEET_ORDER = [ 'MuiAppBar', 'MuiDrawer', + 'MuiAvatar', + 'MuiListItem', 'MuiListItemText', 'MuiListItemSecondaryAction', @@ -71,8 +73,6 @@ export const MUI_SHEET_ORDER = [ 'MuiMenu', 'MuiMenuItem', - 'MuiAvatar', - 'MuiCardContent', 'MuiCardMedia', 'MuiCardActions',