style(List): update typings and remove propTypes (#1270)

src/elements/Icon/index.d.ts

@@ -3,7 +3,7 @@ import {SemanticCOLORS, SemanticROTATION} from '../..';
 
 type ICON_SIZES = 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive';
 
-interface IconProps {
+export interface IconProps {
   [key: string]: any;
 
   /** An element type to render as (string or function). */

src/elements/List/List.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -21,7 +21,7 @@ import ListItem from './ListItem'
 import ListList from './ListList'
 
 /**
- * A list groups related content
+ * A list groups related content.
  */
 function List(props) {
   const {
@@ -38,8 +38,8 @@ function List(props) {
     link,
     ordered,
     relaxed,
-    size,
     selection,
+    size,
     verticalAlign,
   } = props
 
@@ -78,12 +78,6 @@ function List(props) {
 List._meta = {
   name: 'List',
   type: META.TYPES.ELEMENT,
-  props: {
-    floated: SUI.FLOATS,
-    relaxed: ['very'],
-    size: SUI.SIZES,
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 List.propTypes = {
@@ -109,7 +103,7 @@ List.propTypes = {
   divided: PropTypes.bool,
 
   /** An list can be floated left or right. */
-  floated: PropTypes.oneOf(List._meta.props.floated),
+  floated: PropTypes.oneOf(SUI.FLOATS),
 
   /** A list can be formatted to have items appear horizontally. */
   horizontal: PropTypes.bool,
@@ -129,17 +123,17 @@ List.propTypes = {
   /** A list can relax its padding to provide more negative space. */
   relaxed: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(List._meta.props.relaxed),
+    PropTypes.oneOf(['very']),
   ]),
 
   /** A selection list formats list items as possible choices. */
   selection: PropTypes.bool,
 
   /** A list can vary in size. */
-  size: PropTypes.oneOf(List._meta.props.size),
+  size: PropTypes.oneOf(SUI.SIZES),
 
   /** An element inside a list can be vertically aligned. */
-  verticalAlign: PropTypes.oneOf(List._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 }
 
 List.Content = ListContent

src/elements/List/ListContent.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -12,10 +12,12 @@ import {
   useValueAndKey,
   useVerticalAlignProp,
 } from '../../lib'
-
 import ListDescription from './ListDescription'
 import ListHeader from './ListHeader'
 
+/**
+ * A list item can contain a content.
+ */
 function ListContent(props) {
   const {
     children,
@@ -53,10 +55,6 @@ ListContent._meta = {
   name: 'ListContent',
   parent: 'List',
   type: META.TYPES.ELEMENT,
-  props: {
-    floated: SUI.FLOATS,
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 ListContent.propTypes = {
@@ -76,13 +74,13 @@ ListContent.propTypes = {
   description: customPropTypes.itemShorthand,
 
   /** An list content can be floated left or right. */
-  floated: PropTypes.oneOf(ListContent._meta.props.floated),
+  floated: PropTypes.oneOf(SUI.FLOATS),
 
   /** Shorthand for ListHeader. */
   header: customPropTypes.itemShorthand,
 
   /** An element inside a list can be vertically aligned. */
-  verticalAlign: PropTypes.oneOf(ListContent._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 }
 
 ListContent.create = createShorthandFactory(ListContent, content => ({ content }))

src/elements/List/ListDescription.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,13 +10,20 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A list item can contain a description.
+ */
 function ListDescription(props) {
   const { children, className, content } = props
   const classes = cx(className, 'description')
   const rest = getUnhandledProps(ListDescription, props)
   const ElementType = getElementType(ListDescription, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ListDescription._meta = {

src/elements/List/ListHeader.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,13 +10,20 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A list item can contain a header.
+ */
 function ListHeader(props) {
   const { children, className, content } = props
-  const classes = cx(className, 'header')
+  const classes = cx('header', className)
   const rest = getUnhandledProps(ListHeader, props)
   const ElementType = getElementType(ListHeader, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ListHeader._meta = {

src/elements/List/ListIcon.js

@@ -10,6 +10,9 @@ import {
 } from '../../lib'
 import Icon from '../Icon/Icon'
 
+/**
+ * A list item can contain an icon.
+ */
 function ListIcon(props) {
   const { className, verticalAlign } = props
   const classes = cx(
@@ -25,17 +28,14 @@ ListIcon._meta = {
   name: 'ListIcon',
   parent: 'List',
   type: META.TYPES.ELEMENT,
-  props: {
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 ListIcon.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
   /** An element inside a list can be vertically aligned. */
-  verticalAlign: PropTypes.oneOf(ListIcon._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 }
 
 ListIcon.create = createShorthandFactory(ListIcon, name => ({ name }))

src/elements/List/ListItem.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { isValidElement, PropTypes } from 'react'
 
 import {
@@ -17,6 +17,9 @@ import ListDescription from './ListDescription'
 import ListHeader from './ListHeader'
 import ListIcon from './ListIcon'
 
+/**
+ * A list item can contain a set of items.
+ */
 function ListItem(props) {
   const {
     active,
@@ -42,7 +45,7 @@ function ListItem(props) {
   const valueProp = ElementType === 'li' ? { value } : { 'data-value': value }
 
   if (!_.isNil(children)) {
-    return <ElementType {...rest} role='listitem' className={classes} {...valueProp}>{children}</ElementType>
+    return <ElementType {...rest} {...valueProp} role='listitem' className={classes}>{children}</ElementType>
   }
 
   const iconElement = ListIcon.create(icon)
@@ -51,7 +54,7 @@ function ListItem(props) {
   // See description of `content` prop for explanation about why this is necessary.
   if (!isValidElement(content) && _.isPlainObject(content)) {
     return (
-      <ElementType {...rest} role='listitem' className={classes} {...valueProp}>
+      <ElementType {...rest} {...valueProp} role='listitem' className={classes}>
         {iconElement || imageElement}
         {ListContent.create(content, { header, description })}
       </ElementType>
@@ -63,7 +66,7 @@ function ListItem(props) {
 
   if (iconElement || imageElement) {
     return (
-      <ElementType {...rest} role='listitem' className={classes} {...valueProp}>
+      <ElementType {...rest} {...valueProp} role='listitem' className={classes}>
         {iconElement || imageElement}
         {(content || headerElement || descriptionElement) && (
           <ListContent>
@@ -77,7 +80,7 @@ function ListItem(props) {
   }
 
   return (
-    <ElementType {...rest} role='listitem' className={classes} {...valueProp}>
+    <ElementType {...rest} {...valueProp} role='listitem' className={classes}>
       {headerElement}
       {descriptionElement}
       {content}

src/elements/List/ListList.js

@@ -9,6 +9,9 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * A list can contain a sub list.
+ */
 function ListList(props) {
   const { children, className } = props