Fix yarn docs:api

docs/src/pages/demos/lists/CheckboxListSecondary.js

@@ -42,9 +42,9 @@ class CheckboxListSecondary extends React.Component {
 
     return (
       <div className={classes.root}>
-        <List>
+        <List dense>
           {[0, 1, 2, 3].map(value => (
-            <ListItem key={value} dense button>
+            <ListItem key={value} button>
               <Avatar alt="Remy Sharp" src="/static/images/remy.jpg" />
               <ListItemText primary={`Line item ${value + 1}`} />
               <ListItemSecondaryAction>

packages/material-ui/src/List/List.js

@@ -32,25 +32,27 @@ function List(props) {
   const {
     children,
     classes,
-    className: classNameProp,
+    className,
     component: Component,
     dense,
     disablePadding,
     subheader,
     ...other
   } = props;
-  const className = classNames(
-    classes.root,
-    {
-      [classes.dense]: dense && !disablePadding,
-      [classes.padding]: !disablePadding,
-      [classes.subheader]: subheader,
-    },
-    classNameProp,
-  );
 
   return (
-    <Component className={className} {...other}>
+    <Component
+      className={classNames(
+        classes.root,
+        {
+          [classes.dense]: dense && !disablePadding,
+          [classes.padding]: !disablePadding,
+          [classes.subheader]: subheader,
+        },
+        className,
+      )}
+      {...other}
+    >
       <ListContext.Provider value={{ dense }}>
         {subheader}
         {children}

packages/material-ui/src/List/ListContext.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+/**
+ * @ignore - internal component.
+ */
 const ListContext = React.createContext({});
 
 export default ListContext;

packages/material-ui/src/List/index.d.ts

@@ -1,3 +1,2 @@
 export { default } from './List';
 export * from './List';
-export { default as ListContext } from './ListContext';

packages/material-ui/src/List/index.js

@@ -1,2 +1 @@
 export { default } from './List';
-export { default as ListContext } from './ListContext';

packages/material-ui/src/ListItem/ListItem.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
 import { isMuiElement } from '../utils/reactHelpers';
-import MergeWithListContext from './MergeWithListContext';
+import MergeListContext from './MergeListContext';
 
 export const styles = theme => ({
   /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
@@ -83,7 +83,7 @@ function ListItem(props) {
     component: componentProp,
     ContainerComponent,
     ContainerProps: { className: ContainerClassName, ...ContainerProps } = {},
-    dense,
+    dense: denseProp,
     disabled,
     disableGutters,
     divider,
@@ -93,8 +93,8 @@ function ListItem(props) {
   } = props;
 
   return (
-    <MergeWithListContext dense={dense}>
-      {({ dense: isDense }) => {
+    <MergeListContext dense={denseProp}>
+      {({ dense }) => {
         const children = React.Children.toArray(childrenProp);
         const hasAvatar = children.some(value => isMuiElement(value, ['ListItemAvatar']));
         const hasSecondaryAction =
@@ -105,7 +105,7 @@ function ListItem(props) {
           classes.root,
           classes.default,
           {
-            [classes.dense]: isDense || hasAvatar,
+            [classes.dense]: dense || hasAvatar,
             [classes.gutters]: !disableGutters,
             [classes.divider]: divider,
             [classes.disabled]: disabled,
@@ -154,7 +154,7 @@ function ListItem(props) {
 
         return <Component {...componentProps}>{children}</Component>;
       }}
-    </MergeWithListContext>
+    </MergeListContext>
   );
 }
 

packages/material-ui/src/ListItem/ListItem.test.js

@@ -1,175 +1,188 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
+import { getClasses, createMount } from '../test-utils';
 import ListItemText from '../ListItemText';
 import ListItemSecondaryAction from '../ListItemSecondaryAction';
 import ListItem from './ListItem';
 import ListItemAvatar from '../ListItemAvatar';
 import Avatar from '../Avatar';
 import ButtonBase from '../ButtonBase';
+import ListContext from '../List/ListContext';
+import MergeListContext from './MergeListContext';
 
 describe('<ListItem />', () => {
-  let shallow;
+  let mount;
   let classes;
 
   before(() => {
-    shallow = createShallow({ dive: true });
     classes = getClasses(<ListItem />);
+    mount = createMount();
+  });
+
+  after(() => {
+    mount.cleanUp();
   });
 
   it('should render a div', () => {
-    const wrapper = shallow(<ListItem component="div" />);
-    assert.strictEqual(wrapper.name(), 'div');
+    const wrapper = mount(<ListItem component="div" />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.name(), 'div');
   });
 
   it('should render a li', () => {
-    const wrapper = shallow(<ListItem />);
-    assert.strictEqual(wrapper.name(), 'li');
+    const wrapper = mount(<ListItem />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.name(), 'li');
   });
 
   it('should render with the user, root and gutters classes', () => {
-    const wrapper = shallow(<ListItem className="woofListItem" />);
-    assert.strictEqual(wrapper.hasClass('woofListItem'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.gutters), true);
+    const wrapper = mount(<ListItem className="woofListItem" />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.hasClass('woofListItem'), true);
+    assert.strictEqual(listItem.hasClass(classes.root), true);
+    assert.strictEqual(listItem.hasClass(classes.gutters), true);
   });
 
   it('should render with the selected class', () => {
-    const wrapper = shallow(<ListItem selected />);
-    assert.strictEqual(wrapper.hasClass(classes.selected), true);
+    const wrapper = mount(<ListItem selected />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.hasClass(classes.selected), true);
   });
 
   it('should disable the gutters', () => {
-    const wrapper = shallow(<ListItem disableGutters />);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(
-      wrapper.hasClass(classes.gutters),
-      false,
-      'should not have the gutters class',
-    );
+    const wrapper = mount(<ListItem disableGutters />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.hasClass(classes.root), true);
+    assert.strictEqual(listItem.hasClass(classes.gutters), false);
   });
 
   it('should use dense class when ListItemAvatar is present', () => {
-    const wrapper = shallow(
-      <ListItem>
-        <ListItemAvatar>
-          <Avatar />
-        </ListItemAvatar>
-      </ListItem>,
-      {
-        context: {
-          dense: false,
-        },
-      },
+    const wrapper = mount(
+      <ListContext.Provider value={{ dense: false }}>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar />
+          </ListItemAvatar>
+        </ListItem>
+      </ListContext.Provider>,
     );
-
-    assert.strictEqual(wrapper.hasClass(classes.dense), true);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.hasClass(classes.dense), true);
   });
 
   describe('prop: button', () => {
     it('should render a div', () => {
-      const wrapper = shallow(<ListItem button />);
-      assert.strictEqual(wrapper.props().component, 'div');
+      const wrapper = mount(<ListItem button />);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.props().component, 'div');
     });
   });
 
   describe('prop: component', () => {
     it('should change the component', () => {
-      const wrapper = shallow(<ListItem button component="a" />);
-      assert.strictEqual(wrapper.props().component, 'a');
+      const wrapper = mount(<ListItem button component="a" />);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.props().component, 'a');
     });
 
     it('should change the component', () => {
-      const wrapper = shallow(<ListItem button component="li" />);
-      assert.strictEqual(wrapper.props().component, 'li');
+      const wrapper = mount(<ListItem button component="li" />);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.props().component, 'li');
     });
   });
 
   describe('context: dense', () => {
     it('should forward the context', () => {
-      const wrapper = shallow(<ListItem />);
-      assert.strictEqual(
-        wrapper.instance().getChildContext().dense,
-        false,
-        'dense should be false by default',
+      let context = null;
+      const wrapper = mount(
+        <ListItem>
+          <ListContext.Consumer>
+            {options => {
+              context = options;
+            }}
+          </ListContext.Consumer>
+        </ListItem>,
       );
-
+      assert.strictEqual(context.dense, false);
       wrapper.setProps({ dense: true });
-      assert.strictEqual(
-        wrapper.instance().getChildContext().dense,
-        true,
-        'dense should be true when set',
-      );
+      assert.strictEqual(context.dense, true);
     });
   });
 
   describe('secondary action', () => {
     it('should wrap with a container', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem>
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'li');
-      assert.strictEqual(wrapper.childAt(0).type(), 'div');
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.type(), 'li');
+      assert.strictEqual(listItem.childAt(0).type(), 'div');
     });
 
     it('should accept a component property', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem component="span">
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'li');
-      assert.strictEqual(wrapper.childAt(0).type(), 'span');
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.type(), 'li');
+      assert.strictEqual(listItem.childAt(0).type(), 'span');
     });
 
     it('should accet a button property', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem button>
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'li');
-      assert.strictEqual(wrapper.childAt(0).type(), ButtonBase);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.type(), 'li');
+      assert.strictEqual(listItem.childAt(0).type(), ButtonBase);
     });
 
     it('should accept a ContainerComponent property', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem ContainerComponent="div">
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'div');
-      assert.strictEqual(wrapper.childAt(0).type(), 'div');
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.type(), 'div');
+      assert.strictEqual(listItem.childAt(0).type(), 'div');
     });
 
     it('should allow customization of the wrapper', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem ContainerProps={{ className: 'bubu' }}>
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.hasClass('bubu'), true);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.hasClass('bubu'), true);
     });
   });
 
   describe('prop: focusVisibleClassName', () => {
     it('should merge the class names', () => {
-      const wrapper = shallow(<ListItem button focusVisibleClassName="focusVisibleClassName" />);
-      assert.strictEqual(wrapper.props().component, 'div');
+      const wrapper = mount(<ListItem button focusVisibleClassName="focusVisibleClassName" />);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.props().component, 'div');
       assert.strictEqual(
-        wrapper.props().focusVisibleClassName,
+        listItem.props().focusVisibleClassName,
         `${classes.focusVisible} focusVisibleClassName`,
       );
     });