Skip to content

Commit 3ec677e

Browse files
[ListItem] Fix ContainerProps.className propagation (#10488)
1 parent 2e781cc commit 3ec677e

File tree

5 files changed

+33
-14
lines changed

5 files changed

+33
-14
lines changed

src/ExpansionPanel/ExpansionPanel.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { PaperProps, PaperClassKey } from '../Paper';
55

66
export interface ExpansionPanelProps
77
extends StandardProps<PaperProps, ExpansionPanelClassKey, 'onChange'> {
8-
CollapseProps?: React.ComponentType<CollapseProps>;
8+
CollapseProps?: Partial<CollapseProps>;
99
defaultExpanded?: boolean;
1010
disabled?: boolean;
1111
expanded?: boolean;

src/List/ListItem.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ export interface ListItemProps
1010
> {
1111
button?: boolean;
1212
component?: React.ReactType<ListItemProps>;
13+
ContainerComponent?: React.ReactType<React.HTMLAttributes<HTMLDivElement>>;
14+
ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
1315
dense?: boolean;
1416
disabled?: boolean;
1517
disableGutters?: boolean;

src/List/ListItem.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ class ListItem extends React.Component {
7373
className: classNameProp,
7474
component: componentProp,
7575
ContainerComponent,
76-
ContainerProps,
76+
ContainerProps: { className: ContainerClassName, ...ContainerProps } = {},
7777
dense,
7878
disabled,
7979
disableGutters,
@@ -123,7 +123,10 @@ class ListItem extends React.Component {
123123
}
124124

125125
return (
126-
<ContainerComponent className={classes.container} {...ContainerProps}>
126+
<ContainerComponent
127+
className={classNames(classes.container, ContainerClassName)}
128+
{...ContainerProps}
129+
>
127130
<Component {...componentProps}>{children}</Component>
128131
{children.pop()}
129132
</ContainerComponent>

src/List/ListItem.spec.js

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -111,40 +111,51 @@ describe('<ListItem />', () => {
111111
assert.strictEqual(wrapper.childAt(0).type(), 'div');
112112
});
113113

114-
it('should accept a ContainerComponent property', () => {
114+
it('should accept a component property', () => {
115115
const wrapper = shallow(
116-
<ListItem ContainerComponent="div">
116+
<ListItem component="span">
117117
<ListItemText primary="primary" />
118118
<ListItemSecondaryAction />
119119
</ListItem>,
120120
);
121121
assert.strictEqual(wrapper.hasClass(classes.container), true);
122-
assert.strictEqual(wrapper.type(), 'div');
123-
assert.strictEqual(wrapper.childAt(0).type(), 'div');
122+
assert.strictEqual(wrapper.type(), 'li');
123+
assert.strictEqual(wrapper.childAt(0).type(), 'span');
124124
});
125125

126-
it('should accept a component property', () => {
126+
it('should accet a button property', () => {
127127
const wrapper = shallow(
128-
<ListItem component="span">
128+
<ListItem button>
129129
<ListItemText primary="primary" />
130130
<ListItemSecondaryAction />
131131
</ListItem>,
132132
);
133133
assert.strictEqual(wrapper.hasClass(classes.container), true);
134134
assert.strictEqual(wrapper.type(), 'li');
135-
assert.strictEqual(wrapper.childAt(0).type(), 'span');
135+
assert.strictEqual(wrapper.childAt(0).type(), ButtonBase);
136136
});
137137

138-
it('should accet a button property', () => {
138+
it('should accept a ContainerComponent property', () => {
139139
const wrapper = shallow(
140-
<ListItem button>
140+
<ListItem ContainerComponent="div">
141141
<ListItemText primary="primary" />
142142
<ListItemSecondaryAction />
143143
</ListItem>,
144144
);
145145
assert.strictEqual(wrapper.hasClass(classes.container), true);
146-
assert.strictEqual(wrapper.type(), 'li');
147-
assert.strictEqual(wrapper.childAt(0).type(), ButtonBase);
146+
assert.strictEqual(wrapper.type(), 'div');
147+
assert.strictEqual(wrapper.childAt(0).type(), 'div');
148+
});
149+
150+
it('should allow customization of the wrapper', () => {
151+
const wrapper = shallow(
152+
<ListItem ContainerProps={{ className: 'bubu' }}>
153+
<ListItemText primary="primary" />
154+
<ListItemSecondaryAction />
155+
</ListItem>,
156+
);
157+
assert.strictEqual(wrapper.hasClass(classes.container), true);
158+
assert.strictEqual(wrapper.hasClass('bubu'), true);
148159
});
149160
});
150161
});

test/typescript/components.spec.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,9 @@ const ListTest = () => (
389389
</ListItemSecondaryAction>
390390
</ListItem>
391391
))}
392+
<ListItem ContainerComponent="div" ContainerProps={{ className: 'demo' }}>
393+
an item
394+
</ListItem>
392395
</List>
393396
);
394397

0 commit comments

Comments
 (0)