Support null as a child element for ListItem

[gugu]

Last few years React supports null as a valid child (it just ignores this element). Used mostly for conditional statements. This pull request makes ListItem support nulls

[codecov-io]

Codecov Report

Merging #584 into rc0.9.0 will increase coverage by 0.07%.
The diff coverage is 100%.

@@             Coverage Diff             @@
##           rc0.9.0     #584      +/-   ##
===========================================
+ Coverage    94.36%   94.44%   +0.07%     
===========================================
  Files           61       61              
  Lines         2575     2575              
  Branches       376      376              
===========================================
+ Hits          2430     2432       +2     
+ Misses          51       50       -1     
+ Partials        94       93       -1

Impacted Files	Coverage Δ
packages/list/ListItem.tsx	97.87% <100%> (+4.25%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1f09bcf...0d56bb2. Read the comment docs.

[moog16]

@gugu could you please provide your use case? I see what you're saying, but there might be a better way of doing what you're trying to do.

Also this change requires a unit test. Thanks!

[gugu]

Here is an example:

return <AppListItem key={domain.id}>
    <DomainNameText primaryText={ domain.hostname } />
    { this.props.editPermission ? <DomainListActions>
        <AppIconButton onClick={this.handleDomainEdit(domain)} type="button"><MaterialIcon icon="edit" /></AppIconButton>
        <AppIconButton onClick={this.handleDeleteDomain(domain)} type="button"><MaterialIcon icon="delete" /></AppIconButton>
    </DomainListActions> : null} 
</AppListItem>;})

Here is how I solved the problem (creates unnecessary DOM node):

return <AppListItem key={domain.id}>
    <DomainNameText primaryText={ domain.hostname } />
    { this.props.editPermission ? <DomainListActions>
        <AppIconButton onClick={this.handleDomainEdit(domain)} type="button"><MaterialIcon icon="edit" /></AppIconButton>
        <AppIconButton onClick={this.handleDeleteDomain(domain)} type="button"><MaterialIcon icon="delete" /></AppIconButton>
    </DomainListActions> : <div />} 
</AppListItem>;})

[moog16]

I see...ya that seems to be the easiest way. I was thought the best way to render list items were iterating over an array...which you could use .filter to hide a ListItem. But in the case you have one list item this makes the most sense.

Can you add a unit test for this case? I will approve it then. Thanks for providing the example.

[gugu]

Done

[moog16]

@gugu thanks! I'm reviewing right now. Could you also sign the PR?

[moog16]

Tests are passing. Once signed we can merge it in :)

[gugu]

One moment, I slightly screwed up your merge with git push -f, so I did it by myself

[moog16]

Ah thanks...Although I just need you to comment "I signed it" por favor

[gugu]

I signed it