Reduce list unneeded markup

components/list/ListItem.jsx

@@ -52,14 +52,14 @@ class ListItem extends React.Component {
   }
 
   render () {
-    const {onMouseDown, to, onClick, ripple, ...other} = this.props; //eslint-disable-line no-unused-vars
+    const {className, onMouseDown, to, onClick, ripple, ...other} = this.props; //eslint-disable-line no-unused-vars
     const children = this.groupChildren();
     const content = <ListItemLayout {...children} {...other}/>;
-    let className = style.listItem;
-    if (this.props.className) className += ` ${this.props.className}`;
+    let finalClassName = style.listItem;
+    if (className) finalClassName += ` ${className}`;
 
     return (
-      <li className={className} onClick={this.handleClick} onMouseDown={onMouseDown}>
+      <li className={finalClassName} onClick={this.handleClick} onMouseDown={onMouseDown}>
         {to ? <a href={this.props.to}>{content}</a> : content}
         {children.ignored}
       </li>

components/list/ListItemContent.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import style from './style';
+import classnames from 'classnames';
 import ListItemText from './ListItemText';
 
 const types = ['auto', 'normal', 'large'];
@@ -24,16 +25,15 @@ class ListItemContent extends React.Component {
 
   render () {
     const {children, caption, legend} = this.props;
-
-    const className = `${style.itemContentRoot} ${style[this.getType()]}`;
+    const className = classnames(style.itemContentRoot, {
+      [style[this.getType()]]: style[this.getType()]
+    });
 
     return (
       <span className={className}>
-        <span className={style.itemContent}>
-          {caption && <ListItemText primary>{caption}</ListItemText>}
-          {legend && <ListItemText>{legend}</ListItemText>}
-          {children}
-        </span>
+        {caption && <ListItemText primary>{caption}</ListItemText>}
+        {legend && <ListItemText>{legend}</ListItemText>}
+        {children}
       </span>
     );
   }

components/list/ListItemLayout.jsx

@@ -22,12 +22,13 @@ const ListItemLayout = (props) => {
     ...props.rightActions
   ];
   const content = props.itemContent || <ListItemContent caption={props.caption} legend={props.legend} />;
+  const emptyActions = (item) => !item[0] && !item[1];
 
   return (
     <span className={className}>
-      <ListItemActions type='left'>{leftActions}</ListItemActions>
+      {!emptyActions(leftActions) > 0 && <ListItemActions type='left'>{leftActions}</ListItemActions>}
       {content}
-      <ListItemActions type='right'>{rightActions}</ListItemActions>
+      {!emptyActions(leftActions) > 0 && <ListItemActions type='right'>{rightActions}</ListItemActions>}
     </span>
   );
 };

components/list/ListItemText.jsx

@@ -6,7 +6,7 @@ const ListItemText = ({className, primary, children, ...other}) => {
   const _className = ClassNames(style.itemText, {[style.primary]: primary}, className);
 
   return (
-    <span className={_className} {...other}>
+    <span data-react-toolbox="list-item-text" className={_className} {...other}>
       {children}
     </span>
   );

components/list/style.scss

@@ -114,13 +114,9 @@
   flex-grow: 1;
   &.large {
     height: $list-item-min-height-legend;
-
-    .itemContent {
-      display: block;
-      position: relative;
-      top: 50%;
-      transform: translateY(-50%)
-    }
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 }