fix undefined props merging and list styles (#959)

src/lib/remove-undefined.js

@@ -0,0 +1,14 @@
+/**
+ * Cleans an object of undefined values
+ */
+export default function removeUndefined(input = {}) {
+ const obj = { ...input }
+
+ Object.keys(obj).forEach(key => {
+ if (obj[key] === undefined) {
+ delete obj[key]
+ }
+ })
+
+ return obj
+}

src/typography/src/ListItem.js

@@ -1,17 +1,18 @@
 import PropTypes from 'prop-types'
 import React, { forwardRef, memo } from 'react'
 import { IconWrapper } from '../../icons/src/IconWrapper'
+import { minorScale } from '../../scales'
 import Text from './Text'
 
 const ListItem = memo(
  forwardRef(function ListItem(props, ref) {
  const { children, size, icon, iconColor, ...rest } = props
 
  let paddingLeft
- if (size === 300) paddingLeft = 4
- if (size === 400) paddingLeft = 8
- if (size === 500) paddingLeft = 8
- if (size === 600) paddingLeft = 12
+ if (size === 300) paddingLeft = minorScale(1)
+ if (size === 400) paddingLeft = minorScale(2)
+ if (size === 500) paddingLeft = minorScale(2)
+ if (size === 600) paddingLeft = minorScale(3)
 
  let iconTop
  if (size === 300) iconTop = 1

src/typography/src/UnorderedList.js

@@ -1,13 +1,7 @@
 import React, { memo, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'
-
-const styles = {
- margin: 0,
- marginLeft: '1.1em',
- padding: 0,
- listStyle: 'disc'
-}
+import removeUndefined from '../../lib/remove-undefined'
 
 const UnorderedList = memo(
  forwardRef(function UnorderedList(props, ref) {
@@ -18,17 +12,34 @@ const UnorderedList = memo(
  return child
  }
 
- return React.cloneElement(child, {
- icon,
- size,
- iconColor,
- // Prefer more granularly defined props if present
- ...child.props
- })
+ return React.cloneElement(
+ child,
+ removeUndefined({
+ icon,
+ size,
+ iconColor,
+ // Prefer more granularly defined props if present
+ ...child.props
+ })
+ )
  })
 
+ let marginLeft
+ if (size === 300) marginLeft = 16
+ if (size === 400) marginLeft = 18
+ if (size === 500) marginLeft = 18
+ if (size === 600) marginLeft = 20
+
  return (
- <Box is="ul" {...styles} {...rest} ref={ref}>
+ <Box
+ is="ul"
+ listStyle="disc"
+ padding={0}
+ margin={0}
+ marginLeft={marginLeft}
+ {...rest}
+ ref={ref}
+ >
  {enrichedChildren}
  </Box>
  )