♻️ Extend defaultProps

Author: exah

src/flex-grid.js

@@ -79,8 +79,8 @@ const FlexGridItem = styled(FlexGridItemBase)(
 
 FlexGrid.Item = FlexGridItem
 FlexGrid.Item.displayName = 'FlexGrid.Item'
-FlexGrid.Item.propTypes = { ...getPropTypes(flexGridItem), ...Box.propTypes }
-FlexGrid.Item.defaultProps = { flex: '0 1 auto', minWidth: 0 }
+FlexGrid.Item.propTypes = { ...getPropTypes(flexGridItem), ...FlexGridItemBase.propTypes }
+FlexGrid.Item.defaultProps = { ...FlexGridItemBase.defaultProps, flex: '0 1 auto', minWidth: 0 }
 
 export {
   FlexGrid

src/flex.js

@@ -25,7 +25,7 @@ const Flex = styled(Box)(
 
 Flex.displayName = 'Flex'
 Flex.propTypes = { ...styles.propTypes, ...Box.propTypes }
-Flex.defaultProps = { display: 'flex' }
+Flex.defaultProps = { ...Box.defaultProps, display: 'flex' }
 
 export {
   Flex

src/grid.js

@@ -34,7 +34,7 @@ const Grid = styled(Box)(
 
 Grid.displayName = 'Grid'
 Grid.propTypes = { ...getPropTypes(styles), ...Box.propTypes }
-Grid.defaultProps = { display: 'grid' }
+Grid.defaultProps = { ...Box.defaultProps, display: 'grid' }
 
 const BaseGridItem = base({
   use: Box,

src/image.js

@@ -13,6 +13,7 @@ Image.propTypes = {
 }
 
 Image.defaultProps = {
+  ...Box.defaultProps,
   as: 'img',
   display: 'block',
   maxWidth: '100%',

src/layout.js

@@ -12,13 +12,13 @@ const LayoutSide = styled(Box)()
 
 LayoutSide.displayName = 'Layout.Side'
 LayoutSide.propTypes = { ...Box.propTypes }
-LayoutSide.defaultProps = { flex: '0 0 auto', minWidth: 0 }
+LayoutSide.defaultProps = { ...Box.defaultProps, flex: '0 0 auto', minWidth: 0 }
 
 const LayoutContent = styled(Box)()
 
 LayoutContent.displayName = 'Layout.Content'
 LayoutContent.propTypes = { ...Box.propTypes }
-LayoutContent.defaultProps = { flex: '1 1 auto', minWidth: 0 }
+LayoutContent.defaultProps = { ...Box.defaultProps, flex: '1 1 auto', minWidth: 0 }
 
 Layout.Side = LayoutSide
 Layout.Content = LayoutContent

src/link.js

@@ -8,7 +8,7 @@ const Link = styled(Text)(
 
 Link.displayName = 'Link'
 Link.propTypes = { ...Text.propTypes }
-Link.defaultProps = { as: 'a' }
+Link.defaultProps = { ...Text.defaultProps, as: 'a' }
 
 export {
   Link

src/list.js

@@ -17,16 +17,16 @@ const List = styled(BaseList)(
 )
 
 List.displayName = 'List'
-List.propTypes = { ...listStyle.propTypes, ...Box.propTypes }
-List.defaultProps = { listStyle: 'none', as: 'ul' }
+List.propTypes = { ...listStyle.propTypes, ...BaseList.propTypes }
+List.defaultProps = { ...BaseList.defaultProps, listStyle: 'none', as: 'ul' }
 
 List.Item = styled(Box)(
   listStyle
 )
 
 List.Item.displayName = 'List.Item'
 List.Item.propTypes = { ...listStyle.propTypes, ...Box.propTypes }
-List.Item.defaultProps = { as: 'li' }
+List.Item.defaultProps = { ...Box.defaultProps, as: 'li' }
 
 export {
   List

src/text.js

@@ -24,7 +24,7 @@ Text.displayName = 'Text'
 
 Text.propTypes = {
   ...getPropTypes(styles),
-  ...Box.propTypes
+  ...BaseText.propTypes
 }
 
 export {

src/utils.js

@@ -22,7 +22,7 @@ export function base ({
   const Base = React.forwardRef((props, ref) => {
     const {
       as: Element = defaultElement,
-      base: Comp = (BaseComp || Element),
+      base: Comp = Element,
       className,
       ...rest
     } = props
@@ -48,10 +48,19 @@ export function base ({
   })
 
   Base.displayName = name ? `Base(${name})` : 'Base'
+
   Base.propTypes = {
     className: PropTypes.string,
     as: PropTypes.elementType,
-    base: PropTypes.elementType
+    ...BaseComp !== undefined && {
+      base: PropTypes.elementType,
+      ...BaseComp.propTypes
+    }
+  }
+
+  Base.defaultProps = {
+    as: defaultElement,
+    base: BaseComp
   }
 
   return Base