[ListItem] Fix ContainerProps.className propagation (#10488)

Author: oliviertassinari

src/ExpansionPanel/ExpansionPanel.d.ts

@@ -5,7 +5,7 @@ import { PaperProps, PaperClassKey } from '../Paper';
 
 export interface ExpansionPanelProps
   extends StandardProps<PaperProps, ExpansionPanelClassKey, 'onChange'> {
-  CollapseProps?: React.ComponentType<CollapseProps>;
+  CollapseProps?: Partial<CollapseProps>;
   defaultExpanded?: boolean;
   disabled?: boolean;
   expanded?: boolean;

src/List/ListItem.d.ts

@@ -10,6 +10,8 @@ export interface ListItemProps
     > {
   button?: boolean;
   component?: React.ReactType<ListItemProps>;
+  ContainerComponent?: React.ReactType<React.HTMLAttributes<HTMLDivElement>>;
+  ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
   dense?: boolean;
   disabled?: boolean;
   disableGutters?: boolean;

src/List/ListItem.js

@@ -73,7 +73,7 @@ class ListItem extends React.Component {
       className: classNameProp,
       component: componentProp,
       ContainerComponent,
-      ContainerProps,
+      ContainerProps: { className: ContainerClassName, ...ContainerProps } = {},
       dense,
       disabled,
       disableGutters,
@@ -123,7 +123,10 @@ class ListItem extends React.Component {
       }
 
       return (
-        <ContainerComponent className={classes.container} {...ContainerProps}>
+        <ContainerComponent
+          className={classNames(classes.container, ContainerClassName)}
+          {...ContainerProps}
+        >
           <Component {...componentProps}>{children}</Component>
           {children.pop()}
         </ContainerComponent>

src/List/ListItem.spec.js

@@ -111,40 +111,51 @@ describe('<ListItem />', () => {
       assert.strictEqual(wrapper.childAt(0).type(), 'div');
     });
 
-    it('should accept a ContainerComponent property', () => {
+    it('should accept a component property', () => {
       const wrapper = shallow(
-        <ListItem ContainerComponent="div">
+        <ListItem component="span">
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
       assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'div');
-      assert.strictEqual(wrapper.childAt(0).type(), 'div');
+      assert.strictEqual(wrapper.type(), 'li');
+      assert.strictEqual(wrapper.childAt(0).type(), 'span');
     });
 
-    it('should accept a component property', () => {
+    it('should accet a button property', () => {
       const wrapper = shallow(
-        <ListItem component="span">
+        <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(), 'span');
+      assert.strictEqual(wrapper.childAt(0).type(), ButtonBase);
     });
 
-    it('should accet a button property', () => {
+    it('should accept a ContainerComponent property', () => {
       const wrapper = shallow(
-        <ListItem button>
+        <ListItem ContainerComponent="div">
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
       assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'li');
-      assert.strictEqual(wrapper.childAt(0).type(), ButtonBase);
+      assert.strictEqual(wrapper.type(), 'div');
+      assert.strictEqual(wrapper.childAt(0).type(), 'div');
+    });
+
+    it('should allow customization of the wrapper', () => {
+      const wrapper = shallow(
+        <ListItem ContainerProps={{ className: 'bubu' }}>
+          <ListItemText primary="primary" />
+          <ListItemSecondaryAction />
+        </ListItem>,
+      );
+      assert.strictEqual(wrapper.hasClass(classes.container), true);
+      assert.strictEqual(wrapper.hasClass('bubu'), true);
     });
   });
 });

test/typescript/components.spec.tsx

@@ -389,6 +389,9 @@ const ListTest = () => (
         </ListItemSecondaryAction>
       </ListItem>
     ))}
+    <ListItem ContainerComponent="div" ContainerProps={{ className: 'demo' }}>
+      an item
+    </ListItem>
   </List>
 );