fix(List): ignore falsy children

See this for more details: 
facebook/react#2956 (comment)

Test plan:
* Try to render:
<List>
 {someFalsyCondition &&
   <ListItem>List item 1</ListItem>
 }
 {anotherFalsyCondition
    ? <ListItem>List item 2</ListItem>
    : null
 }
 <ListItem>List item 3</ListItem>
</List>
* it should not blow up

Change-Id: Ib854a7fc207067ab24baf387496c954a9a6b5874
Reviewed-on: https://gerrit.instructure.com/136263
Tested-by: Jenkins
Reviewed-by: Jennifer Stern <[email protected]>
Product-Review: Jennifer Stern <[email protected]>
QA-Review: Ryan Shaw <[email protected]>

Author: ryankshaw

packages/ui-core/src/components/List/__tests__/List.test.js

@@ -18,6 +18,23 @@ describe('<List />', () => {
     expect(subject.find('li').length).to.equal(4)
   })
 
+  it('should filter out falsy/null children', () => {
+    const testbed = new Testbed(
+      <List>
+        {null &&
+          <ListItem>List item 1</ListItem>
+        }
+        {false &&
+          <ListItem>List item 2</ListItem>
+        }
+        <ListItem>List item 3</ListItem>
+        <ListItem>List item 4</ListItem>
+      </List>
+    )
+    const subject = testbed.render()
+    expect(subject.find('li').length).to.equal(2)
+  })
+
   it('should render an ordered list', () => {
     const subject = testbed.render({as: 'ol'})
     expect(subject.find('ol').length).to.equal(1)

packages/ui-core/src/components/List/index.js

@@ -49,6 +49,8 @@ export default class List extends Component {
 
   renderChildren () {
     return Children.map(this.props.children, (child) => {
+      if (!child) return // ignore null, falsy children
+
       return safeCloneElement(child, {
         variant: this.props.variant,
         delimiter: this.props.delimiter,