fix(core-unordered-list): allowed conditional render of children

telus · Apr 8, 2019 · 50ac94b · 50ac94b
1 parent ecf510d
commit 50ac94b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/packages/UnorderedList/UnorderedList.jsx b/packages/UnorderedList/UnorderedList.jsx
@@ -16,9 +16,10 @@ const injectListStyle = (child, listStyle, size) => React.cloneElement(child, {
  * @version ./package.json
  */
 const UnorderedList = ({ listStyle, size, children, ...rest }) => {
+  const filteredChildren = children.filter(child => child)
   return (
     <Box {...safeRest(rest)} tag="ul" between={2} dangerouslyAddClassName={styles.base}>
-      {React.Children.map(children, child => injectListStyle(child, listStyle, size))}
+      {React.Children.map(filteredChildren, child => injectListStyle(child, listStyle, size))}
     </Box>
   )
 }

diff --git a/packages/UnorderedList/UnorderedList.md b/packages/UnorderedList/UnorderedList.md
@@ -18,8 +18,14 @@
 ```jsx
 <UnorderedList listStyle="checkmark">
   <UnorderedList.Item>30-day satisfaction guaranteed with no-hassle returns</UnorderedList.Item>
-  <UnorderedList.Item>Free shipping anywhere in Canada with any phone purchase</UnorderedList.Item>
+  {false && <UnorderedList.Item>$10 off for limited time only</UnorderedList.Item>}
+  {true && (
+    <UnorderedList.Item>
+      Free shipping anywhere in Canada with any phone purchase
+    </UnorderedList.Item>
+  )}
   <UnorderedList.Item>1-year limited manufacturer’s warranty</UnorderedList.Item>
+  {false && <UnorderedList.Item>$40 off for a limited time only</UnorderedList.Item>}
 </UnorderedList>
 ```
 

diff --git a/packages/UnorderedList/__tests__/UnorderedList.spec.jsx b/packages/UnorderedList/__tests__/UnorderedList.spec.jsx
@@ -8,6 +8,7 @@ describe('<UnorderedList />', () => {
     render(
       <UnorderedList {...overrides}>
         <UnorderedList.Item>Lorem ipsum</UnorderedList.Item>
+        {false && <UnorderedList.Item>Lorem ipsum</UnorderedList.Item>}
         <UnorderedList.Item>Dolor sit amet</UnorderedList.Item>
       </UnorderedList>
     )
@@ -16,6 +17,7 @@ describe('<UnorderedList />', () => {
     shallow(
       <UnorderedList {...overrides}>
         <UnorderedList.Item>Lorem ipsum</UnorderedList.Item>
+        {false && <UnorderedList.Item>Lorem ipsum</UnorderedList.Item>}
         <UnorderedList.Item>Dolor sit amet</UnorderedList.Item>
       </UnorderedList>
     )