refactor(List): remove transition group

When upgrading to react-transition-group v2.5 the transitions in List &
ListItem were broken. While working on fixing them we decided to just
remove the transitions instead. This library is depracated, we're not
aware of any usages of this component and we don't really like the
transition here anyway.

Author: TattdCodeMonkey

docs/src/List/index.js

@@ -115,11 +115,7 @@ class ListExample extends React.Component {
           <ComponentExample>
             <div className="row row-flex">
               <div className="column-9">
-                <List
-                  transition={true}
-                  content={this.getComplexNestedList()}
-                  tag="ol"
-                />
+                <List content={this.getComplexNestedList()} tag="ol" />
               </div>
               <div className="column-3">
                 <button

src/List/List.js

@@ -1,37 +1,20 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { CSSTransition } from "react-transition-group";
 
 import ListItem from "./ListItem";
 import Util from "../Util/Util";
 
 class List extends React.Component {
   getListItems(list, childIndex = 0) {
-    const { props } = this;
     const items = list.map((item, parentIndex) => {
       const key = `${parentIndex}.${childIndex}`;
       childIndex++;
 
-      const htmlAttributes = Util.exclude(item, [
-        "content",
-        "transitionName",
-        "transitionEnterTimeout",
-        "transitionExitTimeout"
-      ]);
+      const htmlAttributes = Util.exclude(item, ["content"]);
 
       if (Util.isArrayLike(item.content)) {
         return (
-          <ListItem
-            {...htmlAttributes}
-            key={key}
-            tag={item.tag}
-            transition={true}
-            timeout={{
-              enter: props.transitionEnterTimeout,
-              exit: props.transitionExitTimeout
-            }}
-            classNames={props.transitionName}
-          >
+          <ListItem key={key} tag={item.tag} {...htmlAttributes}>
             {this.getListItems(item.content, childIndex)}
           </ListItem>
         );
@@ -54,22 +37,6 @@ class List extends React.Component {
     // Uses all passed properties as attributes, excluding propTypes
     const htmlAttributes = Util.exclude(props, Object.keys(List.propTypes));
 
-    if (props.transition) {
-      return (
-        <CSSTransition
-          in={true}
-          className={props.className}
-          classNames={props.transitionName}
-          timeout={{
-            exit: props.transitionExitTimeout,
-            enter: props.transitionEnterTimeout
-          }}
-        >
-          <Tag>{this.getListItems(props.content)}</Tag>
-        </CSSTransition>
-      );
-    }
-
     return (
       <Tag {...htmlAttributes} className={props.className}>
         {this.getListItems(props.content)}
@@ -80,11 +47,7 @@ class List extends React.Component {
 
 List.defaultProps = {
   className: "list",
-  tag: "ul",
-  transition: true,
-  transitionName: "list-item",
-  transitionEnterTimeout: 500,
-  transitionExitTimeout: 500
+  tag: "ul"
 };
 
 List.propTypes = {
@@ -107,12 +70,7 @@ List.propTypes = {
     PropTypes.string
   ]).isRequired,
   // Optional tag for the container of the list
-  tag: PropTypes.string,
-  transition: PropTypes.bool,
-  transitionName: PropTypes.string,
-  // Transition lengths
-  transitionEnterTimeout: PropTypes.number,
-  transitionExitTimeout: PropTypes.number
+  tag: PropTypes.string
 };
 
 module.exports = List;

src/List/ListItem.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { CSSTransition } from "react-transition-group";
 
 import Util from "../Util/Util";
 
@@ -12,14 +11,6 @@ class ListItem extends React.Component {
     // Uses all passed properties as attributes, excluding propTypes
     const htmlAttributes = Util.exclude(props, Object.keys(ListItem.propTypes));
 
-    if (props.transition) {
-      return (
-        <CSSTransition {...htmlAttributes} className={props.className}>
-          <Tag>{props.children}</Tag>
-        </CSSTransition>
-      );
-    }
-
     return (
       <Tag {...htmlAttributes} className={props.className}>
         {props.children}
@@ -36,8 +27,7 @@ ListItem.defaultProps = {
 ListItem.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  tag: PropTypes.string,
-  transition: PropTypes.bool
+  tag: PropTypes.string
 };
 
 module.exports = ListItem;