-
+
+
,
);
});
@@ -22,17 +19,16 @@ describe('', () => {
mount.cleanUp();
});
- it('should render with the user and root classes', () => {
- const wrapper = mount(
-
-
-
-
- ,
- );
- const avatar = wrapper.find(Avatar);
- assert.strictEqual(avatar.hasClass('foo'), true);
- assert.strictEqual(avatar.hasClass('bar'), true);
- assert.strictEqual(avatar.hasClass(classes.root), true);
- });
+ describeConformance(
+
+
+ ,
+ () => ({
+ classes,
+ inheritComponent: 'div',
+ mount,
+ refInstanceof: window.HTMLDivElement,
+ skip: ['componentProp'],
+ }),
+ );
});
diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
index b16d2018bb6146..89e61d727ce5af 100644
--- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js
+++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
@@ -6,7 +6,7 @@ import withStyles from '../styles/withStyles';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
- marginRight: 16,
+ minWidth: 56,
color: theme.palette.action.active,
flexShrink: 0,
display: 'inline-flex',
@@ -17,13 +17,9 @@ export const styles = theme => ({
* A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
*/
const ListItemIcon = React.forwardRef(function ListItemIcon(props, ref) {
- const { children, classes, className: classNameProp, ...other } = props;
+ const { classes, className, ...other } = props;
- return (
-
- {children}
-
- );
+ return ;
});
ListItemIcon.propTypes = {
diff --git a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
index 05be0938c8299a..0f67a2933a7b51 100644
--- a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
+++ b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
@@ -7,7 +7,7 @@ export const styles = {
/* Styles applied to the root element. */
root: {
position: 'absolute',
- right: 4,
+ right: 16,
top: '50%',
transform: 'translateY(-50%)',
},
@@ -17,13 +17,9 @@ export const styles = {
* Must be used as the last child of ListItem to function properly.
*/
const ListItemSecondaryAction = React.forwardRef(function ListItemSecondaryAction(props, ref) {
- const { children, classes, className, ...other } = props;
+ const { classes, className, ...other } = props;
- return (
-
- {children}
-
- );
+ return ;
});
ListItemSecondaryAction.propTypes = {
diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
index 22b709eb0eb6c4..3aca24cd174a69 100644
--- a/packages/material-ui/src/ListItemText/ListItemText.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -5,109 +5,91 @@ import withStyles from '../styles/withStyles';
import Typography from '../Typography';
import ListContext from '../List/ListContext';
-export const styles = theme => ({
+export const styles = {
/* Styles applied to the root element. */
root: {
flex: '1 1 auto',
minWidth: 0,
- padding: '0 16px',
- '&:first-child': {
- paddingLeft: 0,
- },
+ marginTop: 4,
+ marginBottom: 4,
},
+ /* Styles applied to the `Typography` components if primary and secondary are set. */
+ multiline: {
+ marginTop: 6,
+ marginBottom: 6,
+ },
+ /* Styles applied to the `Typography` components if dense. */
+ dense: {},
/* Styles applied to the root element if `inset={true}`. */
inset: {
- '&:first-child': {
- paddingLeft: 56,
- },
- },
- /* Styles applied to the root element if `context.dense` is `true`. */
- dense: {
- fontSize: theme.typography.pxToRem(13),
+ paddingLeft: 56,
},
/* Styles applied to the primary `Typography` component. */
- primary: {
- '&$textDense': {
- fontSize: 'inherit',
- },
- },
+ primary: {},
/* Styles applied to the secondary `Typography` component. */
- secondary: {
- '&$textDense': {
- fontSize: 'inherit',
- },
- },
- /* Styles applied to the `Typography` components if `context.dense` is `true`. */
- textDense: {},
-});
+ secondary: {},
+};
const ListItemText = React.forwardRef(function ListItemText(props, ref) {
const {
children,
classes,
- className: classNameProp,
+ className,
disableTypography,
inset,
primary: primaryProp,
primaryTypographyProps,
secondary: secondaryProp,
secondaryTypographyProps,
- theme,
...other
} = props;
+ const { dense } = React.useContext(ListContext);
- return (
-
- {({ dense }) => {
- let primary = primaryProp != null ? primaryProp : children;
- if (primary != null && primary.type !== Typography && !disableTypography) {
- primary = (
-
- {primary}
-
- );
- }
+ let primary = primaryProp != null ? primaryProp : children;
+ if (primary != null && primary.type !== Typography && !disableTypography) {
+ primary = (
+
+ {primary}
+
+ );
+ }
- let secondary = secondaryProp;
- if (secondary != null && secondary.type !== Typography && !disableTypography) {
- secondary = (
-
- {secondary}
-
- );
- }
+ let secondary = secondaryProp;
+ if (secondary != null && secondary.type !== Typography && !disableTypography) {
+ secondary = (
+
+ {secondary}
+
+ );
+ }
- return (
-
- {primary}
- {secondary}
-
- );
- }}
-
+ return (
+
+ {primary}
+ {secondary}
+
);
});
@@ -155,10 +137,6 @@ ListItemText.propTypes = {
* (as long as disableTypography is not `true`).
*/
secondaryTypographyProps: PropTypes.object,
- /**
- * @ignore
- */
- theme: PropTypes.object.isRequired,
};
ListItemText.defaultProps = {
@@ -166,4 +144,4 @@ ListItemText.defaultProps = {
inset: false,
};
-export default withStyles(styles, { name: 'MuiListItemText', withTheme: true })(ListItemText);
+export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText);
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js
index 220a1d393f74de..f2fcd0fb2a4278 100644
--- a/packages/material-ui/src/ListSubheader/ListSubheader.js
+++ b/packages/material-ui/src/ListSubheader/ListSubheader.js
@@ -116,6 +116,4 @@ ListSubheader.defaultProps = {
inset: false,
};
-ListSubheader.muiName = 'ListSubheader';
-
export default withStyles(styles, { name: 'MuiListSubheader' })(ListSubheader);
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index cc2e2a5c2303ce..c979714ea6ff0c 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -22,6 +22,14 @@ export const styles = theme => ({
zIndex: 0, // Reset the stacking context.
verticalAlign: 'middle', // For correct alignment with the text.
},
+ /* Styles applied to the root element if `edge="start"`. */
+ edgeStart: {
+ marginLeft: -8,
+ },
+ /* Styles applied to the root element if `edge="end"`. */
+ edgeEnd: {
+ marginRight: -8,
+ },
/* Styles applied to the internal `SwitchBase` component's `root` class. */
switchBase: {
position: 'absolute',
@@ -116,11 +124,20 @@ export const styles = theme => ({
});
const Switch = React.forwardRef(function Switch(props, ref) {
- const { classes, className, color, ...other } = props;
+ const { classes, className, color, edge, ...other } = props;
const icon = ;
return (
-
+
{
@@ -21,7 +21,6 @@ describe('utils/reactHelpers.js', () => {
it('should be truthy for matching components', () => {
[
[Input, 'Input'],
- [ListItemAvatar, 'ListItemAvatar'],
[ListItemSecondaryAction, 'ListItemSecondaryAction'],
[SvgIcon, 'SvgIcon'],
].forEach(([Component, muiName]) => {
diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md
index 337bc8ccd21401..dd9bec99625311 100644
--- a/pages/api/icon-button.md
+++ b/pages/api/icon-button.md
@@ -23,7 +23,7 @@ regarding the available icon options.
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| color | enum: 'default' |
'inherit' |
'primary' |
'secondary'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. |
| disabled | bool | false | If `true`, the button will be disabled. |
-| edge | enum: 'start' |
'end' |
false
| | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). |
+| edge | enum: 'start' |
'end' |
false
| false | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). |
| size | enum: 'small' |
'medium'
| 'medium' | The size of the button. `small` is equivalent to the dense button styling. |
The `ref` is forwarded to the root element.
diff --git a/pages/api/list-item-avatar.md b/pages/api/list-item-avatar.md
index 3bfa0160c0b2e3..979d602d291dd8 100644
--- a/pages/api/list-item-avatar.md
+++ b/pages/api/list-item-avatar.md
@@ -12,8 +12,7 @@ filename: /packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
```
-This is a simple wrapper to apply the `dense`
-and `align-items="flex-start"` mode styles to `Avatar`.
+A simple wrapper to apply `List` styles to an `Avatar`.
## Props
@@ -22,7 +21,7 @@ and `align-items="flex-start"` mode styles to `Avatar`.
| children * | element | | The content of the component – normally `Avatar`. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-The component cannot hold a ref.
+The `ref` is forwarded to the root element.
Any other properties supplied will be spread to the root element (native element).
@@ -35,8 +34,7 @@ This property accepts the following keys:
| Name | Description |
|:-----|:------------|
| root | Styles applied to the root element.
-| alignItemsFlexStart | Styles applied to the root element when.
-| icon | Styles applied to the children – typically the `Avatar` component.
+| alignItemsFlexStart | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`.
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/blob/next/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js)
diff --git a/pages/api/list-item-text.md b/pages/api/list-item-text.md
index 9caddfe933c431..9555c44e0f0a48 100644
--- a/pages/api/list-item-text.md
+++ b/pages/api/list-item-text.md
@@ -40,11 +40,11 @@ This property accepts the following keys:
| Name | Description |
|:-----|:------------|
| root | Styles applied to the root element.
+| multiline | Styles applied to the `Typography` components if primary and secondary are set.
+| dense | Styles applied to the `Typography` components if dense.
| inset | Styles applied to the root element if `inset={true}`.
-| dense | Styles applied to the root element if `context.dense` is `true`.
| primary | Styles applied to the primary `Typography` component.
| secondary | Styles applied to the secondary `Typography` component.
-| textDense | Styles applied to the `Typography` components if `context.dense` is `true`.
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/blob/next/packages/material-ui/src/ListItemText/ListItemText.js)
diff --git a/pages/api/list-item.md b/pages/api/list-item.md
index 1415ddc5473423..22488cb8144f35 100644
--- a/pages/api/list-item.md
+++ b/pages/api/list-item.md
@@ -25,7 +25,7 @@ Uses an additional container component if `ListItemSecondaryAction` is the last
| component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. |
| ContainerComponent | elementType | 'li' | The container component used when a `ListItemSecondaryAction` is the last child. |
| ContainerProps | object | | Properties applied to the container component if used. |
-| dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
+| dense | bool | | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
| disabled | bool | false | If `true`, the list item will be disabled. |
| disableGutters | bool | false | If `true`, the left and right padding is removed. |
| divider | bool | false | If `true`, a 1px light border is added to the bottom of the list item. |
@@ -46,8 +46,7 @@ This property accepts the following keys:
| root | Styles applied to the (normally root) `component` element. May be wrapped by a `container`.
| container | Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`.
| focusVisible | Styles applied to the `component`'s `focusVisibleClassName` property if `button={true}`.
-| default | Legacy styles applied to the root element. Use `root` instead.
-| dense | Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`.
+| dense | Styles applied to the `component` element if dense.
| alignItemsFlexStart | Styles applied to the `component` element if `alignItems="flex-start"`.
| disabled | Styles applied to the inner `component` element if `disabled={true}`.
| divider | Styles applied to the inner `component` element if `divider={true}`.
diff --git a/pages/api/list.md b/pages/api/list.md
index 19607b35570142..b5d63ebe100365 100644
--- a/pages/api/list.md
+++ b/pages/api/list.md
@@ -39,7 +39,7 @@ This property accepts the following keys:
|:-----|:------------|
| root | Styles applied to the root element.
| padding | Styles applied to the root element if `disablePadding={false}`.
-| dense | Styles applied to the root element if `dense={true}` & `disablePadding={false}`.
+| dense | Styles applied to the root element if dense.
| subheader | Styles applied to the root element if a `subheader` is provided.
Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
diff --git a/pages/api/switch.md b/pages/api/switch.md
index 093e669edea5f9..ea3fc1931fc2fe 100644
--- a/pages/api/switch.md
+++ b/pages/api/switch.md
@@ -24,6 +24,7 @@ import Switch from '@material-ui/core/Switch';
| color | enum: 'primary' |
'secondary' |
'default'
| 'secondary' | The color of the component. It supports those theme colors that make sense for this component. |
| disabled | bool | | If `true`, the switch will be disabled. |
| disableRipple | bool | | If `true`, the ripple effect will be disabled. |
+| edge | enum: 'start' |
'end' |
false
| false | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). |
| icon | node | | The icon to display when the component is unchecked. |
| id | string | | The id of the `input` element. |
| inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. |
@@ -45,6 +46,8 @@ This property accepts the following keys:
| Name | Description |
|:-----|:------------|
| root | Styles applied to the root element.
+| edgeStart | Styles applied to the root element if `edge="start"`.
+| edgeEnd | Styles applied to the root element if `edge="end"`.
| switchBase | Styles applied to the internal `SwitchBase` component's `root` class.
| colorPrimary | Styles applied to the internal SwitchBase component's root element if `color="primary"`.
| colorSecondary | Styles applied to the internal SwitchBase component's root element if `color="secondary"`.
diff --git a/test/regressions/tests/List/AvatarListItem.js b/test/regressions/tests/List/AvatarListItem.js
deleted file mode 100644
index f319ca0c270955..00000000000000
--- a/test/regressions/tests/List/AvatarListItem.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Avatar from '@material-ui/core/Avatar';
-import Icon from '@material-ui/core/Icon';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-
-export default function AvatarListItem() {
- return (
-
-
-
- folder
-
-
-
-
-
- folder
-
-
-
-
-
-
- folder
-
-
-
-
-
- folder
-
-
-
-
-
-
-
-
-
-
-
- comment
-
-
-
-
-
-
-
-
- comment
-
-
-
-
-
-
-
-
- comment
-
-
-
-
-
- );
-}