Dev/use extend

packages/chakra-ui-core/src/Accordion/Accordion.js

@@ -1,16 +1,14 @@
-import { baseProps } from '../config'
 import Box from '../Box'
 import { forwardProps, cloneVNodes, useId, isDef } from '../utils'
 import PseudoBox from '../PseudoBox'
-import styleProps from '../config/props'
 import Collapse from '../Collapse'
 import Icon from '../Icon'
 import { iconProps } from '../Icon/icon.props'
 
 const Accordion = {
   name: 'Accordion',
+  extends: Box,
   props: {
-    ...baseProps,
     allowMultiple: Boolean,
     allowToggle: Boolean,
     index: {
@@ -117,8 +115,8 @@ const Accordion = {
 
 const AccordionItem = {
   name: 'AccordionItem',
+  extends: PseudoBox,
   props: {
-    ...styleProps,
     isOpen: {
       type: Boolean,
       default: null
@@ -204,7 +202,7 @@ const AccordionItem = {
 const AccordionHeader = {
   name: 'AccordionHeader',
   inject: ['$AccordionContext'],
-  props: styleProps,
+  extends: PseudoBox,
   computed: {
     context () {
       return this.$AccordionContext()
@@ -248,7 +246,7 @@ const AccordionHeader = {
 const AccordionPanel = {
   name: 'AccordionPanel',
   inject: ['$AccordionContext'],
-  props: baseProps,
+  extends: Box,
   computed: {
     context () {
       return this.$AccordionContext()
@@ -279,8 +277,8 @@ const AccordionPanel = {
 const AccordionIcon = {
   name: 'AccordionIcon',
   inject: ['$AccordionContext'],
+  extends: Box,
   props: {
-    ...baseProps,
     ...iconProps
   },
   computed: {

packages/chakra-ui-core/src/Alert/Alert.js

@@ -1,6 +1,5 @@
 import Box from '../Box'
 import Icon from '../Icon'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 import useAlertStyle, { useAlertIconStyle } from './alert.styles'
 
@@ -14,6 +13,7 @@ export const statuses = {
 const Alert = {
   name: 'Alert',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   provide () {
     return {
       _status: this.status,
@@ -33,8 +33,7 @@ const Alert = {
     variant: {
       type: [String, Array],
       default: 'subtle'
-    },
-    ...baseProps
+    }
   },
   render (h) {
     const alertStyles = useAlertStyle({
@@ -60,12 +59,12 @@ const Alert = {
 const AlertIcon = {
   name: 'AlertIcon',
   inject: ['_status', '_variant', '$colorMode', '$theme'],
+  extends: Box,
   props: {
     size: {
       default: 5
     },
-    name: String,
-    ...baseProps
+    name: String
   },
   computed: {
     colorMode () {
@@ -96,9 +95,7 @@ const AlertIcon = {
 
 const AlertTitle = {
   name: 'AlertTitle',
-  props: {
-    ...baseProps
-  },
+  extends: Box,
   render (h) {
     return h(Box, {
       props: {
@@ -112,9 +109,7 @@ const AlertTitle = {
 
 const AlertDescription = {
   name: 'AlertDescription',
-  props: {
-    ...baseProps
-  },
+  extends: Box,
   render (h) {
     return h(Box, { props: forwardProps(this.$props) }, this.$slots.default)
   }

packages/chakra-ui-core/src/AspectRatioBox/AspectRatioBox.js

@@ -1,11 +1,11 @@
-import styleProps from '../config/props'
+
 import PseudoBox from '../PseudoBox'
 import { cloneVNode, forwardProps } from '../utils'
 
 const AspectRatioBox = {
   name: 'AspectRatioBox',
+  extends: PseudoBox,
   props: {
-    ...styleProps,
     ratio: {
       type: Number,
       default: 4 / 3

packages/chakra-ui-core/src/Avatar/Avatar.js

@@ -1,4 +1,3 @@
-import { baseProps } from '../config/props'
 import { forwardProps, canUseDOM } from '../utils/'
 import useAvatarStyles, { avatarSizes } from './avatar.styles'
 import Box from '../Box'
@@ -24,9 +23,9 @@ const getInitials = (name) => {
 export const AvatarBadge = {
   name: 'AvatarBadge',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   props: {
-    size: [String, Number, Array],
-    ...baseProps
+    size: [String, Number, Array]
   },
   computed: {
     theme () {
@@ -63,10 +62,10 @@ export const AvatarBadge = {
  */
 const AvatarName = {
   name: 'AvatarName',
+  extends: Box,
   props: {
     name: [String, Array],
-    size: [String, Array],
-    ...baseProps
+    size: [String, Array]
   },
   render (h) {
     return h(Box, {
@@ -90,9 +89,9 @@ const AvatarName = {
  */
 const DefaultAvatar = {
   name: 'DefaultAvatar',
+  extends: Box,
   props: {
-    size: [String, Number, Array],
-    ...baseProps
+    size: [String, Number, Array]
   },
   render (h) {
     return h(Box, {
@@ -122,6 +121,7 @@ const DefaultAvatar = {
 export const Avatar = {
   name: 'Avatar',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   computed: {
     theme () {
       return this.$theme()
@@ -141,8 +141,7 @@ export const Avatar = {
     },
     name: [String, Array],
     src: [String, Array],
-    borderColor: [String],
-    ...baseProps
+    borderColor: [String]
   },
   data () {
     return {

packages/chakra-ui-core/src/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,5 @@
 import Flex from '../Flex'
 import { avatarSizes } from '../Avatar/avatar.styles'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 
 /**
@@ -9,10 +8,10 @@ import { forwardProps } from '../utils'
 const MoreAvatarLabel = {
   name: 'MoreAvatarLabel',
   inject: ['$theme', '$colorMode'],
+  extends: Flex,
   props: {
     size: [String, Array],
-    label: String,
-    ...baseProps
+    label: String
   },
   computed: {
     theme () {
@@ -51,8 +50,9 @@ const MoreAvatarLabel = {
 
 const AvatarGroup = {
   name: 'AvatarGroup',
+  extends: Flex,
   props: {
-    groupSize: {
+    size: {
       type: [Number, String, Array],
       default: 'md'
     },
@@ -61,8 +61,7 @@ const AvatarGroup = {
     spacing: {
       type: [Number, String, Array],
       default: -3
-    },
-    ...baseProps
+    }
   },
   render (h) {
     // Get the number of slot nodes inside AvatarGroup
@@ -77,7 +76,7 @@ const AvatarGroup = {
         // Change VNode component options
         const { propsData } = node.componentOptions
         propsData['ml'] = isFirstAvatar ? 0 : this.spacing
-        propsData['size'] = this.groupSize
+        propsData['size'] = this.size
         propsData['showBorder'] = true
         propsData['borderColor'] = this.borderColor || propsData['borderColor']
         propsData['zIndex'] = count - index
@@ -87,19 +86,22 @@ const AvatarGroup = {
       if (max && index === max) {
         return h(MoreAvatarLabel, {
           props: {
-            size: this.groupSize,
+            size: this.size,
             ml: this.spacing,
             label: `+${count - max}`
           }
         })
       }
     })
 
+    // Drop size, borderColor, max, spacing props from final rendered AvatarGroup props for consistency.
+    const { size, borderColor, max: _max, spacing, ...rest } = this.$props
+
     return h(Flex, {
       props: {
         alignItems: 'center',
         zIndex: 0,
-        ...forwardProps(this.$props)
+        ...forwardProps(rest)
       }
     }, clones)
   }

packages/chakra-ui-core/src/Badge/Badge.js

@@ -1,11 +1,11 @@
 import Box from '../Box'
 import { forwardProps } from '../utils'
-import { baseProps } from '../config/props'
 import useBadgeStyles from './badge.styles'
 
 export default {
   name: 'Badge',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   props: {
     variant: {
       type: String,
@@ -14,8 +14,7 @@ export default {
     variantColor: {
       type: String,
       default: 'gray'
-    },
-    ...baseProps
+    }
   },
   computed: {
     colorMode () {

packages/chakra-ui-core/src/Button/Button.js

@@ -1,4 +1,3 @@
-import styleProps from '../config/props'
 import { buttonProps } from './button.props'
 import { forwardProps } from '../utils'
 import createButtonStyles, { setIconSizes } from './button.styles'
@@ -12,14 +11,14 @@ import Icon from '../Icon'
  */
 const ButtonIcon = {
   name: 'ButtonIcon',
+  extends: Box,
   props: {
     icon: {
       type: [String, Object]
     },
     size: {
       type: [String, Number]
-    },
-    ...styleProps
+    }
   },
   render (h) {
     if (typeof this.icon === 'string') {
@@ -54,10 +53,10 @@ const ButtonIcon = {
  */
 export default {
   name: 'Button',
+  extends: PseudoBox,
   inject: ['$theme', '$colorMode'],
   props: {
     ...buttonProps,
-    ...styleProps,
     to: [String, Object]
   },
   computed: {

packages/chakra-ui-core/src/Button/Button.stories.js

@@ -74,7 +74,7 @@ storiesOf('UI | Button', module)
           this.loading = false
           this.buttonText = 'Success'
           this.variantColor = 'green'
-        }, 1500)
+        }, 60000)
       }
     }
   }))

packages/chakra-ui-core/src/Button/button.props.js

@@ -56,7 +56,7 @@ export const buttonProps = {
     type: String,
     default: null
   },
-  rounded: {
+  isRounded: {
     type: Boolean,
     default: false
   },

packages/chakra-ui-core/src/ButtonGroup/ButtonGroup.js

@@ -1,9 +1,9 @@
 import Box from '../Box'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 
 const ButtonGroup = {
   name: 'ButtonGroup',
+  extends: Box,
   props: {
     size: [String, Array],
     variantColor: [String, Array],
@@ -12,8 +12,7 @@ const ButtonGroup = {
     spacing: {
       type: [Number, Array, String],
       default: 2
-    },
-    ...baseProps
+    }
   },
   render (h) {
     const children = this.$slots.default.filter(e => e.tag)

packages/chakra-ui-core/src/Checkbox/Checkbox.js

@@ -1,6 +1,5 @@
 import { StringNumber, StringArray } from '../config/props/props.types'
-import { baseProps } from '../config'
-import { useVariantColorWarning, useId } from '../utils'
+import { useVariantColorWarning, useId, forwardProps } from '../utils'
 import useCheckboxStyle from './checkbox.styles'
 import Box from '../Box'
 import VisuallyHidden from '../VisuallyHidden'
@@ -10,12 +9,12 @@ import Icon from '../Icon'
 const Checkbox = {
   name: 'Checkbox',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   model: {
     prop: 'isChecked',
     event: 'change'
   },
   props: {
-    ...baseProps,
     id: String,
     name: String,
     value: [String, Boolean],
@@ -77,7 +76,7 @@ const Checkbox = {
 
     return h(Box, {
       props: {
-        ...this.$props,
+        ...forwardProps(this.$props),
         as: 'label',
         display: 'inline-flex',
         verticalAlign: 'top',