From d236321553d81f578bb359bcec5adb376876b831 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:22:48 +0800 Subject: [PATCH 01/46] refactor(pseudobox): use extend for composition --- packages/chakra-ui-core/src/Accordion/Accordion.js | 12 +++++------- packages/chakra-ui-core/src/PseudoBox/PseudoBox.js | 5 +++-- .../chakra-ui-core/src/config/props/props.aliases.js | 8 ++++---- .../chakra-ui-core/src/config/props/props.config.js | 8 ++++---- 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/packages/chakra-ui-core/src/Accordion/Accordion.js b/packages/chakra-ui-core/src/Accordion/Accordion.js index 1af0171c..95d83878 100644 --- a/packages/chakra-ui-core/src/Accordion/Accordion.js +++ b/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: { diff --git a/packages/chakra-ui-core/src/PseudoBox/PseudoBox.js b/packages/chakra-ui-core/src/PseudoBox/PseudoBox.js index 35e0003c..0fbc70ea 100644 --- a/packages/chakra-ui-core/src/PseudoBox/PseudoBox.js +++ b/packages/chakra-ui-core/src/PseudoBox/PseudoBox.js @@ -2,7 +2,7 @@ import { css } from 'emotion' import __css from '@styled-system/css' import { background, border, color, borderRadius, flexbox, grid, layout, position, shadow, space, typography, compose } from 'styled-system' import Box from '../Box' -import styleProps, { propsConfig } from '../config/props' +import { propsConfig, pseudoProps } from '../config/props' import { parsePseudoStyles } from './utils' const systemProps = compose( @@ -23,13 +23,14 @@ const systemProps = compose( const PseudoBox = { name: 'PseudoBox', inject: ['$theme'], + extends: Box, props: { as: { type: [String, Object], default: () => 'div' }, to: [String, Object], - ...styleProps + ...pseudoProps }, computed: { theme () { diff --git a/packages/chakra-ui-core/src/config/props/props.aliases.js b/packages/chakra-ui-core/src/config/props/props.aliases.js index c9c6e078..59f7df4e 100644 --- a/packages/chakra-ui-core/src/config/props/props.aliases.js +++ b/packages/chakra-ui-core/src/config/props/props.aliases.js @@ -24,10 +24,10 @@ const aliases = { flexDir: 'flexDirection', shadow: 'boxShadow', b: 'border', - bl: 'border-left', - bt: 'border-top', - br: 'border-right', - bb: 'border-bottom', + bl: 'borderLeft', + bt: 'borderTop', + br: 'borderRight', + bb: 'borderBottom', bgAttachment: 'backgroundAttachment', textDecor: 'textDecoration', listStylePos: 'listStylePosition', diff --git a/packages/chakra-ui-core/src/config/props/props.config.js b/packages/chakra-ui-core/src/config/props/props.config.js index 7ce714cd..4b5702f7 100644 --- a/packages/chakra-ui-core/src/config/props/props.config.js +++ b/packages/chakra-ui-core/src/config/props/props.config.js @@ -98,19 +98,19 @@ export const config = { scale: 'borders' }, bl: { - property: 'border-left', + property: 'borderLeft', scale: 'borders' }, bt: { - property: 'border-top', + property: 'borderTop', scale: 'borders' }, br: { - property: 'border-right', + property: 'borderRight', scale: 'borders' }, bb: { - property: 'border-bottom', + property: 'borderBottom', scale: 'borders' }, textDecoration: { From c48cddc3a05cf9078c5a3c26eceb6ec679499871 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:24:20 +0800 Subject: [PATCH 02/46] refactor(alert): use extend for composition --- packages/chakra-ui-core/src/Alert/Alert.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/chakra-ui-core/src/Alert/Alert.js b/packages/chakra-ui-core/src/Alert/Alert.js index 13138b7a..33092d23 100644 --- a/packages/chakra-ui-core/src/Alert/Alert.js +++ b/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) } From 29722d6f45bc7dc43606f9e22aaef7e653423b86 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:25:53 +0800 Subject: [PATCH 03/46] refactor(alertdialog): use extend for composition --- packages/chakra-ui-core/src/AlertDialog/AlertDialog.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/chakra-ui-core/src/AlertDialog/AlertDialog.js b/packages/chakra-ui-core/src/AlertDialog/AlertDialog.js index 0ef60fe2..f0d862f5 100644 --- a/packages/chakra-ui-core/src/AlertDialog/AlertDialog.js +++ b/packages/chakra-ui-core/src/AlertDialog/AlertDialog.js @@ -1,4 +1,3 @@ -import baseProps from '../config/props' import { forwardProps, HTMLElement } from '../utils' import { Modal, @@ -18,6 +17,7 @@ const formatIds = id => ({ const AlertDialog = { name: 'AlertDialog', + extends: Modal, props: { isOpen: { type: Boolean, @@ -27,8 +27,7 @@ const AlertDialog = { type: Function, default: () => null }, - leastDestructiveRef: [HTMLElement, Object], - ...baseProps + leastDestructiveRef: [HTMLElement, Object] }, render (h) { return h(Modal, { @@ -45,7 +44,7 @@ const AlertDialog = { const AlertDialogContent = { name: 'AlertDialogContent', - props: baseProps, + props: ModalContent, render (h) { return h(ModalContent, { props: forwardProps(this.$props), From 4359786afefedaebcdca58aeaa26d91e2db44589 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:26:31 +0800 Subject: [PATCH 04/46] refactor(aspectratiobox): use extend for composition --- packages/chakra-ui-core/src/AspectRatioBox/AspectRatioBox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/chakra-ui-core/src/AspectRatioBox/AspectRatioBox.js b/packages/chakra-ui-core/src/AspectRatioBox/AspectRatioBox.js index 1033f401..41a394e8 100644 --- a/packages/chakra-ui-core/src/AspectRatioBox/AspectRatioBox.js +++ b/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 From c173b4d59239e95ba850bc68c9e67fa35eff05b6 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:28:03 +0800 Subject: [PATCH 05/46] refactor(avatar): use extend for composition --- packages/chakra-ui-core/src/Avatar/Avatar.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/chakra-ui-core/src/Avatar/Avatar.js b/packages/chakra-ui-core/src/Avatar/Avatar.js index d0dd6650..24bedb98 100644 --- a/packages/chakra-ui-core/src/Avatar/Avatar.js +++ b/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 { From 31443fe6ea23f47fb2131aa1c02098ae48ad6164 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:39:09 +0800 Subject: [PATCH 06/46] refactor(avatargroup): useextend for composition and fix prop forwarding --- .../src/AvatarGroup/AvatarGroup.js | 20 ++++++++++--------- packages/chakra-ui-core/src/Badge/Badge.js | 5 ++--- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/chakra-ui-core/src/AvatarGroup/AvatarGroup.js b/packages/chakra-ui-core/src/AvatarGroup/AvatarGroup.js index 730670a2..43e56fc1 100644 --- a/packages/chakra-ui-core/src/AvatarGroup/AvatarGroup.js +++ b/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,7 +86,7 @@ const AvatarGroup = { if (max && index === max) { return h(MoreAvatarLabel, { props: { - size: this.groupSize, + size: this.size, ml: this.spacing, label: `+${count - max}` } @@ -95,11 +94,14 @@ const AvatarGroup = { } }) + // 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) } diff --git a/packages/chakra-ui-core/src/Badge/Badge.js b/packages/chakra-ui-core/src/Badge/Badge.js index ab9fabfe..ec415a60 100644 --- a/packages/chakra-ui-core/src/Badge/Badge.js +++ b/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 () { From 50f8e3c4278f4069960b7bde23e36ad425bed63d Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:40:44 +0800 Subject: [PATCH 07/46] refactor(breadcrumb): use extend for composition --- .../chakra-ui-core/src/Breadcrumb/Breadcrumb.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/chakra-ui-core/src/Breadcrumb/Breadcrumb.js b/packages/chakra-ui-core/src/Breadcrumb/Breadcrumb.js index 26acce14..889eae79 100644 --- a/packages/chakra-ui-core/src/Breadcrumb/Breadcrumb.js +++ b/packages/chakra-ui-core/src/Breadcrumb/Breadcrumb.js @@ -1,12 +1,11 @@ -import { baseProps } from '../config/props' import Box from '../Box' import Link from '../Link' import { forwardProps, cloneVNodeElement, cleanChildren } from '../utils' const BreadcrumbSeparator = { name: 'BreadcrumbSeparator', + extends: Box, props: { - ...baseProps, spacing: [String, Number, Array], separator: [String, Object] }, @@ -26,9 +25,7 @@ const BreadcrumbSeparator = { const Span = { name: 'Span', - props: { - ...baseProps - }, + extends: Box, render (h) { return h(Box, { props: { @@ -41,8 +38,8 @@ const Span = { const BreadcrumbLink = { name: 'BreadcrumbLink', + extends: Box, props: { - ...baseProps, isCurrentPage: Boolean }, render (h) { @@ -59,8 +56,8 @@ const BreadcrumbLink = { const BreadcrumbItem = { name: 'BreadcrumbItem', + extends: Box, props: { - ...baseProps, isCurrentPage: Boolean, isLastChild: Boolean, separator: [Object, String], @@ -110,6 +107,7 @@ const BreadcrumbItem = { const Breadcrumb = { name: 'Breadcrumb', + extends: Box, props: { spacing: { type: [String, Number, Array], @@ -122,8 +120,7 @@ const Breadcrumb = { separator: { type: [String, Object], default: '/' - }, - ...baseProps + } }, render (h) { const children = this.$slots.default From a6a04c9fa93ed3b1028b63c4528bd03a55c41165 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:45:06 +0800 Subject: [PATCH 08/46] refactor(button): use extend for composition --- packages/chakra-ui-core/src/Button/Button.js | 7 +++---- packages/chakra-ui-core/src/Button/button.props.js | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/chakra-ui-core/src/Button/Button.js b/packages/chakra-ui-core/src/Button/Button.js index 0d9b45f2..970846af 100644 --- a/packages/chakra-ui-core/src/Button/Button.js +++ b/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: { diff --git a/packages/chakra-ui-core/src/Button/button.props.js b/packages/chakra-ui-core/src/Button/button.props.js index 28a3f92d..1326344c 100644 --- a/packages/chakra-ui-core/src/Button/button.props.js +++ b/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 }, From 05a05683640e01a619b45f2541d42210b85c1429 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:46:11 +0800 Subject: [PATCH 09/46] refactor(buttongrou): use extend for composition --- packages/chakra-ui-core/src/ButtonGroup/ButtonGroup.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/chakra-ui-core/src/ButtonGroup/ButtonGroup.js b/packages/chakra-ui-core/src/ButtonGroup/ButtonGroup.js index d1b0ca39..da95ec4a 100644 --- a/packages/chakra-ui-core/src/ButtonGroup/ButtonGroup.js +++ b/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) From 0776861129273bf9975e7549831ac271e6ec3f7f Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:49:12 +0800 Subject: [PATCH 10/46] refactor(checkbox): use extend for composition --- packages/chakra-ui-core/src/Checkbox/Checkbox.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/chakra-ui-core/src/Checkbox/Checkbox.js b/packages/chakra-ui-core/src/Checkbox/Checkbox.js index b7471a1e..d54d0180 100644 --- a/packages/chakra-ui-core/src/Checkbox/Checkbox.js +++ b/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', From b7bcbe0f6860e34a7eb9551c155cf0fa93c1329d Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:50:02 +0800 Subject: [PATCH 11/46] refactor(checkboxgroup): use extend for composition --- packages/chakra-ui-core/src/CheckboxGroup/CheckboxGroup.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/chakra-ui-core/src/CheckboxGroup/CheckboxGroup.js b/packages/chakra-ui-core/src/CheckboxGroup/CheckboxGroup.js index a9aaedfc..80e246be 100644 --- a/packages/chakra-ui-core/src/CheckboxGroup/CheckboxGroup.js +++ b/packages/chakra-ui-core/src/CheckboxGroup/CheckboxGroup.js @@ -1,16 +1,15 @@ import { SNA } from '../config/props/props.types' -import { baseProps } from '../config' import Box from '../Box' import { isDef, useId, cleanChildren, cloneVNodeElement, forwardProps } from '../utils' const CheckboxGroup = { name: 'CheckboxGroup', + extends: Box, model: { prop: 'value', event: 'change' }, props: { - ...baseProps, name: String, variantColor: String, size: String, From 1b6229bf4e09e8b34e64f3a7906e88ebd3fc93e3 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:50:57 +0800 Subject: [PATCH 12/46] refactor(circularprogress): use extend for composition --- .../src/CircularProgress/CircularProgress.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/chakra-ui-core/src/CircularProgress/CircularProgress.js b/packages/chakra-ui-core/src/CircularProgress/CircularProgress.js index 6f3189b6..afaaeb57 100644 --- a/packages/chakra-ui-core/src/CircularProgress/CircularProgress.js +++ b/packages/chakra-ui-core/src/CircularProgress/CircularProgress.js @@ -1,11 +1,10 @@ import Box from '../Box' -import { baseProps } from '../config/props' import { forwardProps } from '../utils' import { getComputedProps } from './circularprogress.styles' const CircularProgressLabel = { name: 'CircularProgressLabel', - props: baseProps, + extends: Box, render (h) { return h(Box, { style: { @@ -27,6 +26,7 @@ const CircularProgressLabel = { const CircularProgress = { name: 'CircularProgress', inject: ['$colorMode'], + extends: Box, computed: { colorMode () { return this.$colorMode() @@ -67,8 +67,7 @@ const CircularProgress = { color: { type: String, default: 'blue' - }, - ...baseProps + } }, render (h) { const _trackColor = { light: `${this.trackColor}.100`, dark: 'whiteAlpha.300' } From fa945c9c28df77b3cc7528a15ac3b7363d7a88a6 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:55:00 +0800 Subject: [PATCH 13/46] refactor(closebutton): use extend for composition --- packages/chakra-ui-core/src/CloseButton/CloseButton.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/chakra-ui-core/src/CloseButton/CloseButton.js b/packages/chakra-ui-core/src/CloseButton/CloseButton.js index 95fa8474..ef3ac946 100644 --- a/packages/chakra-ui-core/src/CloseButton/CloseButton.js +++ b/packages/chakra-ui-core/src/CloseButton/CloseButton.js @@ -1,6 +1,5 @@ import Icon from '../Icon' import PseudoBox from '../PseudoBox' -import styleProps from '../config/props' import { forwardProps } from '../utils' const baseProps = { @@ -40,6 +39,7 @@ const sizes = { export default { name: 'CloseButton', inject: ['$theme', '$colorMode'], + extends: PseudoBox, props: { size: { type: String, @@ -57,8 +57,7 @@ export default { _ariaLabel: { type: String, default: 'Close' - }, - ...styleProps + } }, render (h) { // Pseudo styles @@ -71,6 +70,7 @@ export default { return h(PseudoBox, { props: { + ...forwardProps(this.$props), as: 'button', outline: 'none', h: buttonSize, @@ -79,8 +79,8 @@ export default { cursor: 'pointer', _hover: { bg: hoverColor[this.colorMode] }, _active: { bg: activeColor[this.colorMode] }, - ...baseProps, - ...forwardProps(this.$props) + _focus: { shadow: 'outline' }, + ...baseProps }, nativeOn: { click: ($e) => { From 94a622e9c1a81d24ec8d5c2e68eda4452f8a8c97 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 08:55:28 +0800 Subject: [PATCH 14/46] refactor(code): use extend for composition --- packages/chakra-ui-core/src/Code/Code.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/chakra-ui-core/src/Code/Code.js b/packages/chakra-ui-core/src/Code/Code.js index 3e47c346..3dc7e236 100644 --- a/packages/chakra-ui-core/src/Code/Code.js +++ b/packages/chakra-ui-core/src/Code/Code.js @@ -1,17 +1,16 @@ import Box from '../Box' import useBadgeStyle from '../Badge/badge.styles' import { useVariantColorWarning, forwardProps } from '../utils' -import { baseProps } from '../config/props' const Code = { name: 'Code', inject: ['$theme', '$colorMode'], + extends: Box, props: { variantColor: { type: String, default: 'gray' - }, - ...baseProps + } }, computed: { theme () { From 66c1f67e07d205211855e41ab8ec6838a4d36371 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:00:42 +0800 Subject: [PATCH 15/46] refactor(drawer): use extend for composition --- packages/chakra-ui-core/src/Divider/Divider.js | 3 +-- packages/chakra-ui-core/src/Drawer/Drawer.js | 14 ++++++-------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/chakra-ui-core/src/Divider/Divider.js b/packages/chakra-ui-core/src/Divider/Divider.js index 1e4f4130..8497f157 100644 --- a/packages/chakra-ui-core/src/Divider/Divider.js +++ b/packages/chakra-ui-core/src/Divider/Divider.js @@ -1,11 +1,10 @@ import Box from '../Box' -import { baseProps } from '../config/props' import { forwardProps } from '../utils' const Divider = { name: 'Divider', + extends: Box, props: { - ...baseProps, orientation: { type: String, default: 'horizontal' diff --git a/packages/chakra-ui-core/src/Drawer/Drawer.js b/packages/chakra-ui-core/src/Drawer/Drawer.js index c555074b..e5912ecf 100644 --- a/packages/chakra-ui-core/src/Drawer/Drawer.js +++ b/packages/chakra-ui-core/src/Drawer/Drawer.js @@ -1,9 +1,9 @@ -import styleProps, { baseProps } from '../config/props' import { Modal, ModalContent, ModalBody, ModalHeader, ModalFooter, ModalOverlay, ModalCloseButton } from '../Modal' import { forwardProps, HTMLElement } from '../utils' const Drawer = { name: 'Drawer', + extends: Modal, props: { isOpen: { type: Boolean, @@ -36,8 +36,7 @@ const Drawer = { size: { type: String, default: 'xs' - }, - ...baseProps + } }, provide () { return { @@ -108,9 +107,7 @@ const getPlacementStyles = (position, { finalWidth, finalHeight }) => { const DrawerContent = { name: 'DrawerContent', - props: { - ...baseProps - }, + extends: ModalContent, inject: ['$DrawerContext'], computed: { context () { @@ -127,6 +124,7 @@ const DrawerContent = { props: { noStyles: true, position: 'fixed', + m: 0, ...placementStyles, ...forwardProps(this.$props) } @@ -136,7 +134,7 @@ const DrawerContent = { const DrawerOverlay = { name: 'DrawerOverlay', - props: baseProps, + extends: ModalOverlay, render (h) { return h(ModalOverlay, { props: forwardProps(this.$props) @@ -146,7 +144,7 @@ const DrawerOverlay = { const DrawerCloseButton = { name: 'DrawerCloseButton', - props: styleProps, + extends: ModalCloseButton, render (h) { return h(ModalCloseButton, { props: { From e43fd508041d3e9ba6d5fe2cc56b0d9e5b836d1b Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:03:54 +0800 Subject: [PATCH 16/46] refactor(flex): use extend for composition --- packages/chakra-ui-core/src/Editable/Editable.js | 3 +++ packages/chakra-ui-core/src/Flex/Flex.js | 5 ++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/chakra-ui-core/src/Editable/Editable.js b/packages/chakra-ui-core/src/Editable/Editable.js index e7de9d03..41dec4e8 100644 --- a/packages/chakra-ui-core/src/Editable/Editable.js +++ b/packages/chakra-ui-core/src/Editable/Editable.js @@ -14,6 +14,9 @@ const sharedEditableProps = { mx: '-3px' } +/** + * Compose with extend API to reduce bundle size + */ const Editable = { name: 'Editable', props: { diff --git a/packages/chakra-ui-core/src/Flex/Flex.js b/packages/chakra-ui-core/src/Flex/Flex.js index 81e24339..90c16bc7 100644 --- a/packages/chakra-ui-core/src/Flex/Flex.js +++ b/packages/chakra-ui-core/src/Flex/Flex.js @@ -1,5 +1,4 @@ import Box from '../Box' -import { baseProps } from '../config/props' import { forwardProps } from '../utils' /** @@ -7,14 +6,14 @@ import { forwardProps } from '../utils' */ const Flex = { name: 'Flex', + extends: Box, props: { as: String, align: [String, Array], justify: [String, Array], wrap: [String, Array], direction: [String, Array], - size: [String, Array], - ...baseProps + size: [String, Array] }, render (h) { return h(Box, { From 3767222322e698c23316e2d86fb5d454f4e4e6ee Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:04:49 +0800 Subject: [PATCH 17/46] refactor(formcontrol): use extend for composition --- packages/chakra-ui-core/src/FormControl/FormControl.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/chakra-ui-core/src/FormControl/FormControl.js b/packages/chakra-ui-core/src/FormControl/FormControl.js index f1ecc26e..815a881e 100644 --- a/packages/chakra-ui-core/src/FormControl/FormControl.js +++ b/packages/chakra-ui-core/src/FormControl/FormControl.js @@ -1,14 +1,11 @@ -import { baseProps } from '../config' import Box from '../Box' import { forwardProps } from '../utils' import { formControlProps } from './formcontrol.props' const FormControl = { name: 'FormControl', - props: { - ...baseProps, - ...formControlProps - }, + extends: Box, + props: formControlProps, inject: { $FormControlContext: { default: null From 14e59faadf18f8ddd0357ee4fe918083ddbd25d3 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:06:12 +0800 Subject: [PATCH 18/46] refactor(formhelpertext): use extend for composition --- .../chakra-ui-core/src/FormErrorMessage/FormErrorMessage.js | 3 +-- packages/chakra-ui-core/src/FormHelperText/FormHelperText.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/chakra-ui-core/src/FormErrorMessage/FormErrorMessage.js b/packages/chakra-ui-core/src/FormErrorMessage/FormErrorMessage.js index 893dd860..e7f33984 100644 --- a/packages/chakra-ui-core/src/FormErrorMessage/FormErrorMessage.js +++ b/packages/chakra-ui-core/src/FormErrorMessage/FormErrorMessage.js @@ -1,4 +1,3 @@ -import { baseProps } from '../config' import { formControlProps } from '../FormControl/formcontrol.props' import Flex from '../Flex' import Icon from '../Icon' @@ -8,8 +7,8 @@ import { forwardProps } from '../utils' const FormErrorMessage = { name: 'FormErrorMessage', inject: ['$colorMode', '$useFormControl'], + extends: Flex, props: { - ...baseProps, icon: { type: String, default: 'warning' diff --git a/packages/chakra-ui-core/src/FormHelperText/FormHelperText.js b/packages/chakra-ui-core/src/FormHelperText/FormHelperText.js index 29d059f3..8ea06f19 100644 --- a/packages/chakra-ui-core/src/FormHelperText/FormHelperText.js +++ b/packages/chakra-ui-core/src/FormHelperText/FormHelperText.js @@ -1,11 +1,10 @@ import Text from '../Text' -import { baseProps } from '../config' import { forwardProps } from '../utils' const FormHelperText = { name: 'FormHelperText', inject: ['$useFormControl', '$colorMode'], - props: baseProps, + extends: Text, computed: { formControl () { return this.$useFormControl(this.$props) From e1c21f638d58aab67946996cebcafa210da40415 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:08:22 +0800 Subject: [PATCH 19/46] refactor(formlabel): use extend for composition --- packages/chakra-ui-core/src/FormLabel/FormLabel.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/chakra-ui-core/src/FormLabel/FormLabel.js b/packages/chakra-ui-core/src/FormLabel/FormLabel.js index ab3febbf..b527e22c 100644 --- a/packages/chakra-ui-core/src/FormLabel/FormLabel.js +++ b/packages/chakra-ui-core/src/FormLabel/FormLabel.js @@ -1,5 +1,4 @@ import Box from '../Box' -import { baseProps } from '../config' import { forwardProps } from '../utils' import { formControlProps } from '../FormControl/formcontrol.props' @@ -32,10 +31,8 @@ const RequiredIndicator = { const FormLabel = { name: 'FormLabel', inject: ['$useFormControl'], - props: { - ...baseProps, - ...formControlProps - }, + extends: Box, + props: formControlProps, computed: { formControlProps () { return { From 632a6ce0687aaa25113a016b34a423630e63bf7b Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:14:23 +0800 Subject: [PATCH 20/46] refactor(icon): use extend for composition --- packages/chakra-ui-core/src/Grid/Grid.js | 5 ++--- packages/chakra-ui-core/src/Heading/Heading.js | 5 ++--- packages/chakra-ui-core/src/Icon/Icon.js | 17 ++++++----------- 3 files changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/chakra-ui-core/src/Grid/Grid.js b/packages/chakra-ui-core/src/Grid/Grid.js index eab8565e..08ad903d 100644 --- a/packages/chakra-ui-core/src/Grid/Grid.js +++ b/packages/chakra-ui-core/src/Grid/Grid.js @@ -1,10 +1,10 @@ import Box from '../Box' -import { baseProps } from '../config/props' import { forwardProps } from '../utils' import { SNA } from '../config/props/props.types' const Grid = { name: 'Grid', + extends: Box, props: { gap: SNA, rowGap: SNA, @@ -17,8 +17,7 @@ const Grid = { templateAreas: SNA, area: SNA, column: SNA, - row: SNA, - ...baseProps + row: SNA }, render (h) { return h(Box, { diff --git a/packages/chakra-ui-core/src/Heading/Heading.js b/packages/chakra-ui-core/src/Heading/Heading.js index c2981f2b..19455fbf 100644 --- a/packages/chakra-ui-core/src/Heading/Heading.js +++ b/packages/chakra-ui-core/src/Heading/Heading.js @@ -1,5 +1,4 @@ import Box from '../Box' -import { baseProps } from '../config/props' import { forwardProps } from '../utils' const sizes = { @@ -16,6 +15,7 @@ const sizes = { */ const Heading = { name: 'Heading', + extends: Box, props: { size: { type: [String, Array, Object], @@ -24,8 +24,7 @@ const Heading = { as: { type: String, default: 'h1' - }, - ...baseProps + } }, render (h) { return h(Box, { diff --git a/packages/chakra-ui-core/src/Icon/Icon.js b/packages/chakra-ui-core/src/Icon/Icon.js index cdd96432..2aa875a5 100644 --- a/packages/chakra-ui-core/src/Icon/Icon.js +++ b/packages/chakra-ui-core/src/Icon/Icon.js @@ -2,17 +2,14 @@ import { css } from 'emotion' import Box from '../Box' import iconPaths from '../lib/internal-icons' import { forwardProps } from '../utils' -import { baseProps } from '../config/props' import { iconProps } from './icon.props' const fallbackIcon = iconPaths['question-outline'] const Svg = { name: 'IconSvg', - props: { - ...iconProps, - ...baseProps - }, + extends: Box, + props: iconProps, render (h) { const className = css` flex-shrink: 0; @@ -37,10 +34,8 @@ const Svg = { export default { name: 'Icon', inject: ['$theme', '$icons'], - props: { - ...iconProps, - ...baseProps - }, + extends: Svg, + props: iconProps, render (h) { let icon, viewBox if (this.name) { @@ -57,13 +52,13 @@ export default { return h(Svg, { props: { + ...forwardProps(this.$props), as: 'svg', w: this.size, h: this.size, color: this.color, d: 'inline-block', - verticalAlign: 'middle', - ...forwardProps(this.$props) + verticalAlign: 'middle' }, attrs: { viewBox, From 8aa14aad21c4a0db07dee7cd06c995e4c68fc86d Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:15:32 +0800 Subject: [PATCH 21/46] refactor(iconbutton): use extend for composition --- packages/chakra-ui-core/src/IconButton/IconButton.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/chakra-ui-core/src/IconButton/IconButton.js b/packages/chakra-ui-core/src/IconButton/IconButton.js index d323b058..c7e58a4d 100644 --- a/packages/chakra-ui-core/src/IconButton/IconButton.js +++ b/packages/chakra-ui-core/src/IconButton/IconButton.js @@ -1,9 +1,7 @@ import Button from '../Button' import Icon from '../Icon' import Box from '../Box' -import styleProps from '../config/props' import { forwardProps } from '../utils' -import { buttonProps } from '../Button/button.props' const baseStyles = { display: 'inline-flex', @@ -22,6 +20,7 @@ const baseStyles = { export default { name: 'IconButton', inject: ['$theme', '$colorMode'], + extends: Button, props: { icon: { type: [String] @@ -31,9 +30,7 @@ export default { }, _ariaLabel: { type: [String] - }, - ...buttonProps, - ...styleProps + } }, render (h) { const { isFullWidth, leftIcon, rightIcon, loadingText, ...props } = this.$props From e418e468c70be30e8272d02f7e874c57ed9b4656 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:16:18 +0800 Subject: [PATCH 22/46] refactor(image): use extend for composition --- packages/chakra-ui-core/src/Image/Image.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/chakra-ui-core/src/Image/Image.js b/packages/chakra-ui-core/src/Image/Image.js index 83328656..fb2439aa 100644 --- a/packages/chakra-ui-core/src/Image/Image.js +++ b/packages/chakra-ui-core/src/Image/Image.js @@ -1,12 +1,11 @@ -import { baseProps } from '../config/props' import Box from '../Box' import NoSsr from '../NoSsr' import { forwardProps } from '../utils' const Image = { name: 'CImage', + extends: Box, props: { - ...baseProps, src: String, fallbackSrc: String, ignoreFalback: Boolean, From dede4df6bf494aa93dce783d17dc8176134690fb Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:22:40 +0800 Subject: [PATCH 23/46] refactor(list): use extend for composition --- packages/chakra-ui-core/src/Input/Input.js | 7 ++----- packages/chakra-ui-core/src/InputGroup/InputGroup.js | 3 +-- packages/chakra-ui-core/src/Link/Link.js | 10 ++-------- 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/packages/chakra-ui-core/src/Input/Input.js b/packages/chakra-ui-core/src/Input/Input.js index dba76a1c..fb5aaace 100644 --- a/packages/chakra-ui-core/src/Input/Input.js +++ b/packages/chakra-ui-core/src/Input/Input.js @@ -1,4 +1,3 @@ -import styleProps from '../config/props' import PseudoBox from '../PseudoBox' import useInputStyle from './input.styles' import { forwardProps } from '../utils' @@ -19,14 +18,12 @@ const Input = { default: null } }, + extends: PseudoBox, model: { prop: 'value', event: 'input' }, - props: { - ...styleProps, - ...inputProps - }, + props: inputProps, computed: { colorMode () { return this.$colorMode() diff --git a/packages/chakra-ui-core/src/InputGroup/InputGroup.js b/packages/chakra-ui-core/src/InputGroup/InputGroup.js index 149953fb..1e99dbac 100644 --- a/packages/chakra-ui-core/src/InputGroup/InputGroup.js +++ b/packages/chakra-ui-core/src/InputGroup/InputGroup.js @@ -1,5 +1,4 @@ import { StringArray } from '../config/props/props.types' -import { baseProps } from '../config' import { inputSizes } from '../Input/input.styles' import Box from '../Box' import { cloneVNode, forwardProps } from '../utils' @@ -8,9 +7,9 @@ import Input from '../Input' const InputGroup = { name: 'InputGroup', + extends: Box, inject: ['$theme'], props: { - ...baseProps, size: { type: StringArray, default: 'md' diff --git a/packages/chakra-ui-core/src/Link/Link.js b/packages/chakra-ui-core/src/Link/Link.js index 9624c750..71e1a175 100644 --- a/packages/chakra-ui-core/src/Link/Link.js +++ b/packages/chakra-ui-core/src/Link/Link.js @@ -1,15 +1,10 @@ -import styleProps from '../config/props' import PseudoBox from '../PseudoBox' import { forwardProps, kebabify } from '../utils' import { SNA } from '../config/props/props.types' -/** - * Issue: - * - Text decoration on hover not working. Problem source could be with styled components internally - */ - const Link = { name: 'Link', + extends: PseudoBox, props: { as: { type: String, @@ -17,8 +12,7 @@ const Link = { }, to: SNA, isDisabled: Boolean, - isExternal: Boolean, - ...styleProps + isExternal: Boolean }, computed: { isRouterLink () { From 2af47259a5913461c4bb7afb87ab7e29ef2bf6bd Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:23:57 +0800 Subject: [PATCH 24/46] refactor(listitems): use extend for composition --- packages/chakra-ui-core/src/List/List.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/chakra-ui-core/src/List/List.js b/packages/chakra-ui-core/src/List/List.js index ea8fff8a..2cb7b467 100644 --- a/packages/chakra-ui-core/src/List/List.js +++ b/packages/chakra-ui-core/src/List/List.js @@ -1,15 +1,13 @@ -import { baseProps } from '../config' import Box from '../Box' import PseudoBox from '../PseudoBox' import Icon from '../Icon' import { cleanChildren, isDef, cloneVNodeElement, forwardProps } from '../utils' import { SNA } from '../config/props/props.types' -import styleProps from '../config/props' const List = { name: 'List', + extends: Box, props: { - ...baseProps, styleType: { type: String, default: 'none' @@ -54,8 +52,8 @@ const List = { const ListItem = { name: 'ListItem', + extends: PseudoBox, props: { - ...styleProps, spacing: SNA }, render (h) { @@ -70,8 +68,8 @@ const ListItem = { const ListIcon = { name: 'ListIcon', + extends: Box, props: { - ...baseProps, icon: String }, render (h) { From 069cb104a9793e9ab80876707c3840a1d56a8d1e Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:30:21 +0800 Subject: [PATCH 25/46] refactor(menu): use extend for composition --- packages/chakra-ui-core/src/Menu/Menu.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/packages/chakra-ui-core/src/Menu/Menu.js b/packages/chakra-ui-core/src/Menu/Menu.js index 17d9021a..eeba2a92 100644 --- a/packages/chakra-ui-core/src/Menu/Menu.js +++ b/packages/chakra-ui-core/src/Menu/Menu.js @@ -1,8 +1,6 @@ // eslint-disable-next-line import { useId, getFocusables, canUseDOM, forwardProps } from '../utils' -import styleProps, { baseProps } from '../config/props' import Button from '../Button' -import { buttonProps } from '../Button/button.props' import { useMenuListStyle, useMenuItemStyle } from './menu.styles' import { Popper } from '../Popper' import Text from '../Text' @@ -30,8 +28,7 @@ const menuProps = { default: true }, defaultActiveIndex: Number, - placement: String, - ...baseProps + placement: String } const Menu = { @@ -224,10 +221,7 @@ const Menu = { const MenuButton = { name: 'MenuButton', inject: ['$MenuContext'], - props: { - ...buttonProps, - ...styleProps - }, + extends: Button, computed: { context () { return this.$MenuContext() @@ -278,7 +272,7 @@ const MenuButton = { const MenuList = { name: 'MenuList', - props: styleProps, + extends: Popper, inject: ['$MenuContext', '$colorMode'], computed: { context () { @@ -384,8 +378,8 @@ const MenuList = { const MenuItem = { name: 'MenuItem', inject: ['$MenuContext', '$theme', '$colorMode'], + extends: PseudoBox, props: { - ...styleProps, isDisabled: Boolean, role: { type: String, @@ -476,7 +470,7 @@ const MenuItem = { const MenuDivider = { name: 'MenuDivider', - props: baseProps, + extends: Divider, render (h) { return h(Divider, { props: { @@ -490,9 +484,9 @@ const MenuDivider = { const MenuGroup = { name: 'MenuGroup', + extends: Box, props: { - title: String, - ...baseProps + title: String }, render (h) { return h(Box, { From a2adc9567748c362ac14eeee9a2a1883a404d8b0 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:32:24 +0800 Subject: [PATCH 26/46] refactor(modal): use extend for composition --- packages/chakra-ui-core/src/Modal/Modal.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/chakra-ui-core/src/Modal/Modal.js b/packages/chakra-ui-core/src/Modal/Modal.js index 03857b2b..63986dbd 100644 --- a/packages/chakra-ui-core/src/Modal/Modal.js +++ b/packages/chakra-ui-core/src/Modal/Modal.js @@ -5,9 +5,7 @@ import PseudoBox from '../PseudoBox' import { Fade } from '../Transition' import { hideOthers } from 'aria-hidden' import { FocusTrap } from 'focus-trap-vue' -import { baseProps } from '../config' import Box from '../Box' -import styleProps from '../config/props' import CloseButton from '../CloseButton' import isFunction from 'lodash-es/isFunction' @@ -234,7 +232,7 @@ const Modal = { */ const ModalOverlay = { name: 'ModalOverlay', - props: baseProps, + extends: Box, render (h) { return h(Box, { props: { @@ -255,8 +253,8 @@ const ModalContent = { name: 'ModalContent', inheritAttrs: false, inject: ['$ModalContext', '$colorMode'], + extends: Box, props: { - ...baseProps, noStyles: Boolean, zIndex: { type: String, @@ -424,7 +422,7 @@ const ModalContent = { const ModalHeader = { name: 'ModalHeader', inject: ['$ModalContext'], - props: baseProps, + extends: Box, computed: { context () { return this.$ModalContext() @@ -452,7 +450,7 @@ const ModalHeader = { const ModalFooter = { name: 'ModalFooter', - props: baseProps, + extends: Box, render (h) { return h(Box, { props: { @@ -469,7 +467,7 @@ const ModalFooter = { const ModalBody = { name: 'ModalBody', - props: baseProps, + extends: Box, inject: ['$ModalContext'], computed: { context () { @@ -501,7 +499,7 @@ const ModalBody = { const ModalCloseButton = { name: 'ModalCloseButton', - props: styleProps, + extends: CloseButton, inject: ['$ModalContext'], computed: { context () { From e8229bf2579c2e718fecbce721c3a1a4c119d775 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:36:03 +0800 Subject: [PATCH 27/46] refactor(numberinput): use extend for composition --- .../src/NumberInput/NumberInput.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/chakra-ui-core/src/NumberInput/NumberInput.js b/packages/chakra-ui-core/src/NumberInput/NumberInput.js index 46f7f5a7..68bd1054 100644 --- a/packages/chakra-ui-core/src/NumberInput/NumberInput.js +++ b/packages/chakra-ui-core/src/NumberInput/NumberInput.js @@ -1,21 +1,18 @@ -import { baseProps } from '../config' import Flex from '../Flex' -import styleProps from '../config/props' import Input from '../Input' import PseudoBox from '../PseudoBox' import Icon from '../Icon' import numberInputStyles from './numberinput.styles' import { isDef, useId, getElement, canUseDOM, wrapEvent } from '../utils' import { calculatePrecision, roundToPrecision, preventNonNumberKey } from './utils' -import { inputProps } from '../Input/input.props' /** * NumberInput component */ const NumberInput = { name: 'NumberInput', + extends: Flex, props: { - ...baseProps, value: Number, defaultValue: Number, focusInputOnChange: { @@ -451,10 +448,7 @@ const NumberInputField = { return this.$NumberInputContext() } }, - props: { - ...styleProps, - ...inputProps - }, + extends: Input, render (h) { const { size, inputId, input: { value, @@ -498,7 +492,7 @@ const NumberInputField = { */ const NumberInputStepper = { name: 'NumberInputStepper', - props: baseProps, + extends: Flex, render (h) { return h(Flex, { props: { @@ -521,7 +515,7 @@ const NumberInputStepper = { const StepperButton = { name: 'StepperButton', inject: ['$NumberInputContext', '$colorMode'], - props: styleProps, + extends: PseudoBox, computed: { context () { return this.$NumberInputContext() @@ -560,7 +554,7 @@ const NumberIncrementStepper = { return this.$NumberInputContext() } }, - props: styleProps, + extends: StepperButton, render (h) { const children = this.$slots.default || [h(Icon, { @@ -592,7 +586,7 @@ const NumberDecrementStepper = { return this.$NumberInputContext() } }, - props: styleProps, + extends: StepperButton, render (h) { const children = this.$slots.default || [h(Icon, { From 3282eeaa625974f5636712ddc1100d16c4a76948 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:39:23 +0800 Subject: [PATCH 28/46] refactor(popover): use extend for composition --- packages/chakra-ui-core/src/Popover/Popover.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/chakra-ui-core/src/Popover/Popover.js b/packages/chakra-ui-core/src/Popover/Popover.js index a37961e3..9ad522a1 100644 --- a/packages/chakra-ui-core/src/Popover/Popover.js +++ b/packages/chakra-ui-core/src/Popover/Popover.js @@ -1,7 +1,6 @@ import Fragment from '../Fragment' import { Popper, PopperArrow } from '../Popper' import { useId, cloneVNode, getElement, isVueComponent, forwardProps } from '../utils' -import styleProps, { baseProps } from '../config/props' import Box from '../Box' import CloseButton from '../CloseButton' @@ -334,8 +333,8 @@ const PopoverTrigger = { const PopoverContent = { name: 'PopoverContent', inject: ['$PopoverContext', '$colorMode'], + extends: Popper, props: { - ...styleProps, gutter: { type: [Number, String], default: 4 @@ -465,7 +464,7 @@ const PopoverContent = { const PopoverHeader = { name: 'PopoverHeader', inject: ['$PopoverContext'], - props: baseProps, + extends: Box, computed: { context () { return this.$PopoverContext() @@ -492,7 +491,7 @@ const PopoverHeader = { const PopoverBody = { name: 'PopoverBody', - props: baseProps, + extends: Box, inject: ['$PopoverContext'], computed: { context () { @@ -520,7 +519,7 @@ const PopoverBody = { const PopoverArrow = { name: 'PopoverArrow', - props: baseProps, + extends: PopperArrow, render (h) { return h(PopperArrow, { props: forwardProps(this.$props) @@ -531,7 +530,7 @@ const PopoverArrow = { const PopoverCloseButton = { name: 'PopoverCloseButton', inject: ['$PopoverContext'], - props: styleProps, + extends: CloseButton, computed: { context () { return this.$PopoverContext() @@ -560,7 +559,7 @@ const PopoverCloseButton = { const PopoverFooter = { name: 'PopoverFooter', - props: baseProps, + extends: Box, render (h) { return h(Box, { props: { From 0e041717c6f1836e8677483604ea427d18bfa73b Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:54:29 +0800 Subject: [PATCH 29/46] improvement(popover): debug close on clickaway --- packages/chakra-ui-core/src/Popper/Popper.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/chakra-ui-core/src/Popper/Popper.js b/packages/chakra-ui-core/src/Popper/Popper.js index 570c1fbc..5a4e40e4 100644 --- a/packages/chakra-ui-core/src/Popper/Popper.js +++ b/packages/chakra-ui-core/src/Popper/Popper.js @@ -7,6 +7,10 @@ import styleProps from '../config/props' import getPopperArrowStyle from './popper.styles' import Box from '../Box' +/** + * TODO: Use Vue's extends API to debug Popper closeOnClickAway + */ + /** * Flips placement if in * @param {string} placement From b105a9a19d387f5cf50cae96dbb7804576813808 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:55:35 +0800 Subject: [PATCH 30/46] refactor(progress): use extend for composition --- packages/chakra-ui-core/src/Progress/Progress.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/chakra-ui-core/src/Progress/Progress.js b/packages/chakra-ui-core/src/Progress/Progress.js index ec980677..2834a946 100644 --- a/packages/chakra-ui-core/src/Progress/Progress.js +++ b/packages/chakra-ui-core/src/Progress/Progress.js @@ -1,7 +1,6 @@ import Box from '../Box' import { generateStripe, valueToPercent, forwardProps } from '../utils' import { css, keyframes } from 'emotion' -import { baseProps } from '../config/props' const stripe = keyframes({ from: { backgroundPosition: '1rem 0' }, @@ -20,7 +19,7 @@ const progressbarSizes = { const ProgressLabel = { name: 'ProgressLabel', - props: baseProps, + extends: Box, render (h) { return h(Box, { props: { @@ -34,8 +33,8 @@ const ProgressLabel = { const ProgressTrack = { name: 'ProgressTrack', + extends: Box, props: { - ...baseProps, size: [String, Number, Array] }, render (h) { @@ -53,8 +52,8 @@ const ProgressTrack = { const ProgressIndicator = { name: 'ProgressIndicator', + extends: Box, props: { - ...baseProps, isIndeterminate: Boolean, min: Number, max: Number, @@ -86,8 +85,8 @@ const ProgressIndicator = { const Progress = { name: 'Progress', inject: ['$colorMode'], + extends: Box, props: { - ...baseProps, color: { type: String, default: 'blue' From 2c862e8902b5c4b57f93f0191b5d0ebbbf11ebef Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:56:54 +0800 Subject: [PATCH 31/46] refactor(radio): use extend for composition --- packages/chakra-ui-core/src/Radio/Radio.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/chakra-ui-core/src/Radio/Radio.js b/packages/chakra-ui-core/src/Radio/Radio.js index 154f2ccd..0e21fc31 100644 --- a/packages/chakra-ui-core/src/Radio/Radio.js +++ b/packages/chakra-ui-core/src/Radio/Radio.js @@ -1,4 +1,3 @@ -import styleProps from '../config/props' import { useVariantColorWarning, forwardProps } from '../utils' import useCheckboxStyle from '../Checkbox/checkbox.styles' import Box from '../Box' @@ -8,8 +7,8 @@ import ControlBox from '../ControlBox' const Radio = { name: 'Radio', inject: ['$colorMode', '$theme'], + extends: ControlBox, props: { - ...styleProps, id: String, name: String, value: String, From 50b5e6e2f09939b89edbac7c645a00b737029323 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:57:36 +0800 Subject: [PATCH 32/46] refactor(radiogroup): use extend for composition --- .../chakra-ui-core/src/RadioButtonGroup/RadioButtonGroup.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/chakra-ui-core/src/RadioButtonGroup/RadioButtonGroup.js b/packages/chakra-ui-core/src/RadioButtonGroup/RadioButtonGroup.js index 72962501..ae8a5663 100644 --- a/packages/chakra-ui-core/src/RadioButtonGroup/RadioButtonGroup.js +++ b/packages/chakra-ui-core/src/RadioButtonGroup/RadioButtonGroup.js @@ -1,12 +1,11 @@ import Box from '../Box' -import { baseProps } from '../config' import { StringNumber, SNA } from '../config/props/props.types' import { isDef, useId, cloneVNodeElement, forwardProps, cleanChildren } from '../utils' const RadioButtonGroup = { name: 'RadioButtonGroup', + extends: Box, props: { - ...baseProps, name: { type: String, default: `radio-${useId()}` From 6039b2c5f31e421bd8511a6221b2316b995abfa8 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 09:59:48 +0800 Subject: [PATCH 33/46] refactor(input): use extend for composition --- packages/chakra-ui-core/src/RadioGroup/RadioGroup.js | 3 +-- packages/chakra-ui-core/src/Select/Select.js | 11 +++-------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/chakra-ui-core/src/RadioGroup/RadioGroup.js b/packages/chakra-ui-core/src/RadioGroup/RadioGroup.js index 8a4dcdf6..c2c2c1f9 100644 --- a/packages/chakra-ui-core/src/RadioGroup/RadioGroup.js +++ b/packages/chakra-ui-core/src/RadioGroup/RadioGroup.js @@ -1,12 +1,11 @@ import Box from '../Box' -import { baseProps } from '../config' import { StringNumber } from '../config/props/props.types' import { useId, cloneVNodeElement, forwardProps } from '../utils' const RadioGroup = { name: 'RadioGroup', + extends: Box, props: { - ...baseProps, name: { type: String, default: `radio-${useId()}` diff --git a/packages/chakra-ui-core/src/Select/Select.js b/packages/chakra-ui-core/src/Select/Select.js index 74d40564..6049706b 100644 --- a/packages/chakra-ui-core/src/Select/Select.js +++ b/packages/chakra-ui-core/src/Select/Select.js @@ -1,7 +1,4 @@ -import { baseProps } from '../config' import Box from '../Box' -import styleProps from '../config/props' -import { inputProps } from '../Input/input.props' import Input from '../Input' import splitProps from './select.utils' import Icon from '../Icon' @@ -11,7 +8,7 @@ import Icon from '../Icon' */ const SelectIconWrapper = { name: 'SelectIconWrapper', - props: baseProps, + extends: Box, render (h) { return h(Box, { props: { @@ -34,9 +31,8 @@ const SelectIconWrapper = { const SelectInput = { name: 'SelectInput', + extends: Input, props: { - ...styleProps, - ...inputProps, placeholder: String, value: String }, @@ -74,9 +70,8 @@ const Select = { prop: 'value', event: 'change' }, + extends: Input, props: { - ...styleProps, - ...inputProps, rootProps: { type: Object, default: () => ({}) From d953dc615bd10a67d4df6ec873e3f2b2d437f192 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 10:01:27 +0800 Subject: [PATCH 34/46] refactor(slideer): use extend for composition --- packages/chakra-ui-core/src/SimpleGrid/SimpleGrid.js | 5 ++--- packages/chakra-ui-core/src/Slider/Slider.js | 10 ++++------ 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/chakra-ui-core/src/SimpleGrid/SimpleGrid.js b/packages/chakra-ui-core/src/SimpleGrid/SimpleGrid.js index 864743dd..32faaf34 100644 --- a/packages/chakra-ui-core/src/SimpleGrid/SimpleGrid.js +++ b/packages/chakra-ui-core/src/SimpleGrid/SimpleGrid.js @@ -1,16 +1,15 @@ import Grid from '../Grid' -import { baseProps } from '../config/props' import { countToColumns, widthToColumns } from './grid.styles' const SimpleGrid = { name: 'SimpleGrid', + extends: Grid, props: { columns: [String, Number, Array], spacingX: [String, Number, Array], spacingY: [String, Number, Array], spacing: [String, Number, Array], - minChildWidth: [String, Number, Array], - ...baseProps + minChildWidth: [String, Number, Array] }, computed: { templateColumns () { diff --git a/packages/chakra-ui-core/src/Slider/Slider.js b/packages/chakra-ui-core/src/Slider/Slider.js index 6268cbf4..6ce1eb9f 100644 --- a/packages/chakra-ui-core/src/Slider/Slider.js +++ b/packages/chakra-ui-core/src/Slider/Slider.js @@ -1,17 +1,15 @@ -import { baseProps } from '../config' import { isDef, valueToPercent, useId, getElById, forwardProps } from '../utils' import { clampValue, roundValueToStep } from './slider.utils' import Box from '../Box' import useSliderStyle from './slider.styles' import { percentToValue } from '../utils/transform' -import styleProps from '../config/props' import PseudoBox from '../PseudoBox' const Slider = { name: 'Slider', inject: ['$theme', '$colorMode'], + extends: Box, props: { - ...baseProps, value: Number, defaultValue: Number, isDisabled: Boolean, @@ -300,7 +298,7 @@ const Slider = { const SliderTrack = { name: 'SliderTrack', inject: ['$SliderContext', '$theme', '$colorMode'], - props: baseProps, + extends: Box, computed: { context () { return this.$SliderContext() @@ -342,7 +340,7 @@ const SliderTrack = { const SliderFilledTrack = { name: 'SliderFilledTrack', inject: ['$SliderContext', '$theme', '$colorMode'], - props: styleProps, + extends: PseudoBox, computed: { context () { return this.$SliderContext() @@ -383,7 +381,7 @@ const SliderFilledTrack = { const SliderThumb = { name: 'SliderThumb', inject: ['$SliderContext', '$theme', '$colorMode'], - props: baseProps, + extends: Box, computed: { context () { return this.$SliderContext() From 82191f98fe9002944bd49e05ea882e6fa0052c07 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 10:07:16 +0800 Subject: [PATCH 35/46] refactor(switch): use extend for composition --- packages/chakra-ui-core/src/Button/Button.stories.js | 2 +- packages/chakra-ui-core/src/Spinner/Spinner.js | 5 ++--- packages/chakra-ui-core/src/Switch/Switch.js | 3 +-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/chakra-ui-core/src/Button/Button.stories.js b/packages/chakra-ui-core/src/Button/Button.stories.js index f0018d88..5da2b786 100644 --- a/packages/chakra-ui-core/src/Button/Button.stories.js +++ b/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) } } })) diff --git a/packages/chakra-ui-core/src/Spinner/Spinner.js b/packages/chakra-ui-core/src/Spinner/Spinner.js index d29730d9..32d7bc62 100644 --- a/packages/chakra-ui-core/src/Spinner/Spinner.js +++ b/packages/chakra-ui-core/src/Spinner/Spinner.js @@ -1,5 +1,4 @@ import { keyframes } from 'emotion' -import { baseProps } from '../config/props' import { forwardProps } from '../utils' import Box from '../Box' import VisuallyHidden from '../VisuallyHidden' @@ -49,6 +48,7 @@ const setSizes = (props) => { export default { name: 'Spinner', + extends: Box, props: { size: { type: [String, Array], @@ -74,8 +74,7 @@ export default { type: [String, Array], default: 'transparent' }, - forwardRef: Object, - ...baseProps + forwardRef: Object }, render (h) { return h(Box, { diff --git a/packages/chakra-ui-core/src/Switch/Switch.js b/packages/chakra-ui-core/src/Switch/Switch.js index c6a27d80..fd3c2b09 100644 --- a/packages/chakra-ui-core/src/Switch/Switch.js +++ b/packages/chakra-ui-core/src/Switch/Switch.js @@ -1,5 +1,4 @@ import Box from '../Box' -import styleProps from '../config/props' import { forwardProps } from '../utils' import VisuallyHidden from '../VisuallyHidden' import ControlBox from '../ControlBox' @@ -21,13 +20,13 @@ const switchSizes = { const Switch = { name: 'CSwitch', + extends: Box, model: { prop: 'isChecked', event: 'change' }, inject: ['$colorMode'], props: { - ...styleProps, id: String, name: String, value: Boolean, From 9f5e2b91ccd571c30c0393c962ecd5bfaad953b8 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 10:09:28 +0800 Subject: [PATCH 36/46] refactor(tabs): use extend for composition --- packages/chakra-ui-core/src/Tabs/Tabs.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/chakra-ui-core/src/Tabs/Tabs.js b/packages/chakra-ui-core/src/Tabs/Tabs.js index d324464f..2c6bb42b 100644 --- a/packages/chakra-ui-core/src/Tabs/Tabs.js +++ b/packages/chakra-ui-core/src/Tabs/Tabs.js @@ -1,7 +1,5 @@ -import { baseProps } from '../config' import { useVariantColorWarning, isDef, useId, forwardProps, cleanChildren, cloneVNodeElement } from '../utils' import { useTabListStyle, useTabStyle } from './tabs.styles' -import styleProps from '../config/props' import Flex from '../Flex' import Box from '../Box' import PseudoBox from '../PseudoBox' @@ -9,8 +7,8 @@ import PseudoBox from '../PseudoBox' const Tabs = { name: 'Tabs', inject: ['$theme', '$colorMode'], + extends: Box, props: { - ...baseProps, index: Number, defaultIndex: Number, isManual: Boolean, @@ -170,7 +168,7 @@ const Tabs = { const TabList = { name: 'TabList', - props: baseProps, + extends: Flex, inject: ['$TabContext', '$theme', '$colorMode'], data () { return { @@ -319,8 +317,8 @@ const TabList = { const Tab = { name: 'Tab', inject: ['$theme', '$colorMode', '$TabContext'], + extends: PseudoBox, props: { - ...styleProps, isSelected: Boolean, isDisabled: Boolean, id: String @@ -373,8 +371,8 @@ const Tab = { const TabPanel = { name: 'TabPanel', + extends: Box, props: { - ...baseProps, isSelected: Boolean, selectedPanelNode: Object, id: String @@ -397,7 +395,7 @@ const TabPanel = { const TabPanels = { name: 'TabPanels', inject: ['$TabContext'], - props: baseProps, + extends: Box, computed: { context () { return this.$TabContext() From 01e70540aba99f2e56c5c5ba8653161829325f88 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 10:12:01 +0800 Subject: [PATCH 37/46] refactor(tags text): use extend for composition --- packages/chakra-ui-core/src/Tag/Tag.js | 9 ++++----- packages/chakra-ui-core/src/Text/Text.js | 1 + 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/chakra-ui-core/src/Tag/Tag.js b/packages/chakra-ui-core/src/Tag/Tag.js index fe53331e..466823d3 100644 --- a/packages/chakra-ui-core/src/Tag/Tag.js +++ b/packages/chakra-ui-core/src/Tag/Tag.js @@ -1,4 +1,3 @@ -import styleProps, { baseProps } from '../config/props' import { css } from 'emotion' import PseudoBox from '../PseudoBox' import Icon from '../Icon' @@ -28,8 +27,8 @@ const tagSizes = { const TagCloseButton = { name: 'TagCloseButton', + extends: PseudoBox, props: { - ...styleProps, isDisabled: Boolean }, render (h) { @@ -81,8 +80,8 @@ const TagCloseButton = { const TagIcon = { name: 'TagIcon', + extends: Box, props: { - ...baseProps, icon: [String, Object] }, render (h) { @@ -117,7 +116,7 @@ const TagIcon = { const TagLabel = { name: 'TagLabel', - props: baseProps, + extends: Box, render (h) { return h(Box, { ...forwardProps(this.$props), @@ -131,8 +130,8 @@ const TagLabel = { const Tag = { name: 'Tag', inject: ['$theme', '$colorMode'], + extends: PseudoBox, props: { - ...styleProps, variant: { type: String, default: 'subtle' diff --git a/packages/chakra-ui-core/src/Text/Text.js b/packages/chakra-ui-core/src/Text/Text.js index d2f3f5c6..4d89a724 100644 --- a/packages/chakra-ui-core/src/Text/Text.js +++ b/packages/chakra-ui-core/src/Text/Text.js @@ -5,6 +5,7 @@ import { baseProps } from '../config/props' export default { name: 'CText', // <-- Vue does not allow components to be registered using built-in or reserved HTML elements as component id: like "Text". So need to rename this. inject: ['$theme', '$colorMode'], + extends: Box, props: { as: { type: [String, Array], From 351d989664dc84e447bcc1264d5975d383c71337 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 10:12:40 +0800 Subject: [PATCH 38/46] refactor(textarea): use extend for composition --- packages/chakra-ui-core/src/Textarea/Textarea.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/chakra-ui-core/src/Textarea/Textarea.js b/packages/chakra-ui-core/src/Textarea/Textarea.js index 21d5d168..dfa00c56 100644 --- a/packages/chakra-ui-core/src/Textarea/Textarea.js +++ b/packages/chakra-ui-core/src/Textarea/Textarea.js @@ -1,5 +1,3 @@ -import styleProps from '../config/props' -import { inputProps } from '../Input/input.props' import Input from '../Input' import { forwardProps } from '../utils' @@ -9,9 +7,8 @@ const Textarea = { prop: 'inputValue', event: 'change' }, + extends: Input, props: { - ...styleProps, - ...inputProps, inputValue: String }, render (h) { From 98845083e1fe9665faceb23d73fdedc8c190101e Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 10:13:24 +0800 Subject: [PATCH 39/46] refactor(toast): use extend for composition --- packages/chakra-ui-core/src/Toast/Toast.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/chakra-ui-core/src/Toast/Toast.js b/packages/chakra-ui-core/src/Toast/Toast.js index 942b9726..6c4e2f0d 100644 --- a/packages/chakra-ui-core/src/Toast/Toast.js +++ b/packages/chakra-ui-core/src/Toast/Toast.js @@ -3,7 +3,6 @@ import { Alert, AlertIcon, AlertTitle, AlertDescription } from '../Alert' import Box from '../Box' import CloseButton from '../CloseButton' import ThemeProvider from '../ThemeProvider' -import { baseProps } from '../config/props' import { forwardProps } from '../utils' import ColorModeProvider from '../ColorModeProvider' import { colorModeObserver } from '../utils/color-mode-observer' @@ -16,6 +15,7 @@ const breadstick = new Breadstick() */ const Toast = { name: 'Toast', + extends: Alert, props: { status: { type: String, @@ -43,8 +43,7 @@ const Toast = { description: { type: String, default: '' - }, - ...baseProps + } }, render (h) { return h(Alert, { From ff1881e67f89b48d7b04a371bb021b30a925c884 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 10:15:01 +0800 Subject: [PATCH 40/46] refactor(tooltip): use extend for composition --- packages/chakra-ui-core/src/Tooltip/Tooltip.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/chakra-ui-core/src/Tooltip/Tooltip.js b/packages/chakra-ui-core/src/Tooltip/Tooltip.js index 28f78e7d..d048c3ed 100644 --- a/packages/chakra-ui-core/src/Tooltip/Tooltip.js +++ b/packages/chakra-ui-core/src/Tooltip/Tooltip.js @@ -2,7 +2,6 @@ import Fragment from '../Fragment' import VisuallyHidden from '../VisuallyHidden' import { Popper, PopperArrow } from '../Popper' import { cloneVNode, useId, forwardProps, wrapEvent } from '../utils' -import { baseProps } from '../config/props' import Box from '../Box' const tooltipProps = { @@ -27,14 +26,15 @@ const tooltipProps = { controlledIsOpen: Boolean, isControlled: Boolean, onOpen: Function, - onClose: Function, - ...baseProps + onClose: Function } // TODO: Add isControlled support. const Tooltip = { inject: ['$colorMode'], name: 'Tooltip', + extends: Box, + props: tooltipProps, data () { return { isOpen: this.isControlled ? this.controlledIsOpen : this.defaultIsOpen || false, @@ -84,7 +84,6 @@ const Tooltip = { this.$emit('click') } }, - props: tooltipProps, mounted () { // When component is mounted we force re-render because component // children may not yet be rendered so event listeners may not be From e6c59878ee04ba989e552dd819315d4e2d3269f4 Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 10:16:18 +0800 Subject: [PATCH 41/46] refactor(popper): use extend for composition --- packages/chakra-ui-core/src/Popper/Popper.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/chakra-ui-core/src/Popper/Popper.js b/packages/chakra-ui-core/src/Popper/Popper.js index 5a4e40e4..4fb08901 100644 --- a/packages/chakra-ui-core/src/Popper/Popper.js +++ b/packages/chakra-ui-core/src/Popper/Popper.js @@ -3,7 +3,6 @@ import PseudoBox from '../PseudoBox' import ClickOutside from '../ClickOutside' import Portal from '../Portal' import { createChainedFunction, forwardProps, isVueComponent, canUseDOM, useId, HTMLElement } from '../utils' -import styleProps from '../config/props' import getPopperArrowStyle from './popper.styles' import Box from '../Box' @@ -40,6 +39,7 @@ function flipPlacement (placement) { const Popper = { name: 'Popper', + extends: PseudoBox, props: { _id: { type: String, @@ -85,8 +85,7 @@ const Popper = { default: true }, positionFixed: Boolean, - usePortalTarget: String, - ...styleProps + usePortalTarget: String }, data () { return { From f3aaee9d995a66d72e62b1eff20f86d36d49b9ed Mon Sep 17 00:00:00 2001 From: codebender828 Date: Tue, 24 Mar 2020 11:43:35 +0800 Subject: [PATCH 42/46] test: update snapshots --- .../src/AlertDialog/AlertDialog.js | 7 ++++--- .../src/Breadcrumb/Breadcrumb.js | 15 ++++++++------ .../tests/__snapshots__/Checkbox.test.js.snap | 2 +- .../__snapshots__/CheckboxGroup.test.js.snap | 6 +++--- .../CircularProgress.test.js.snap | 4 ++-- .../__snapshots__/CloseButton.test.js.snap | 4 ++-- packages/chakra-ui-core/src/Code/Code.js | 4 ++-- packages/chakra-ui-core/src/Drawer/Drawer.js | 14 +++++++------ .../src/Drawer/Drawer.stories.js | 20 +++++++++---------- .../src/Drawer/tests/Drawer.test.js | 18 ++++++++--------- .../tests/__snapshots__/Drawer.test.js.snap | 4 ++-- .../chakra-ui-core/src/FormLabel/FormLabel.js | 4 ++-- .../tests/__snapshots__/Icon.test.js.snap | 2 +- packages/chakra-ui-core/src/Modal/Modal.js | 14 +++++++------ .../tests/__snapshots__/Modal.test.js.snap | 4 ++-- packages/chakra-ui-core/src/Radio/Radio.js | 6 ++---- .../tests/__snapshots__/Stat.test.js.snap | 4 ++-- .../Tag/tests/__snapshots__/Tag.test.js.snap | 4 ++-- 18 files changed, 71 insertions(+), 65 deletions(-) diff --git a/packages/chakra-ui-core/src/AlertDialog/AlertDialog.js b/packages/chakra-ui-core/src/AlertDialog/AlertDialog.js index f0d862f5..0ef60fe2 100644 --- a/packages/chakra-ui-core/src/AlertDialog/AlertDialog.js +++ b/packages/chakra-ui-core/src/AlertDialog/AlertDialog.js @@ -1,3 +1,4 @@ +import baseProps from '../config/props' import { forwardProps, HTMLElement } from '../utils' import { Modal, @@ -17,7 +18,6 @@ const formatIds = id => ({ const AlertDialog = { name: 'AlertDialog', - extends: Modal, props: { isOpen: { type: Boolean, @@ -27,7 +27,8 @@ const AlertDialog = { type: Function, default: () => null }, - leastDestructiveRef: [HTMLElement, Object] + leastDestructiveRef: [HTMLElement, Object], + ...baseProps }, render (h) { return h(Modal, { @@ -44,7 +45,7 @@ const AlertDialog = { const AlertDialogContent = { name: 'AlertDialogContent', - props: ModalContent, + props: baseProps, render (h) { return h(ModalContent, { props: forwardProps(this.$props), diff --git a/packages/chakra-ui-core/src/Breadcrumb/Breadcrumb.js b/packages/chakra-ui-core/src/Breadcrumb/Breadcrumb.js index 889eae79..26acce14 100644 --- a/packages/chakra-ui-core/src/Breadcrumb/Breadcrumb.js +++ b/packages/chakra-ui-core/src/Breadcrumb/Breadcrumb.js @@ -1,11 +1,12 @@ +import { baseProps } from '../config/props' import Box from '../Box' import Link from '../Link' import { forwardProps, cloneVNodeElement, cleanChildren } from '../utils' const BreadcrumbSeparator = { name: 'BreadcrumbSeparator', - extends: Box, props: { + ...baseProps, spacing: [String, Number, Array], separator: [String, Object] }, @@ -25,7 +26,9 @@ const BreadcrumbSeparator = { const Span = { name: 'Span', - extends: Box, + props: { + ...baseProps + }, render (h) { return h(Box, { props: { @@ -38,8 +41,8 @@ const Span = { const BreadcrumbLink = { name: 'BreadcrumbLink', - extends: Box, props: { + ...baseProps, isCurrentPage: Boolean }, render (h) { @@ -56,8 +59,8 @@ const BreadcrumbLink = { const BreadcrumbItem = { name: 'BreadcrumbItem', - extends: Box, props: { + ...baseProps, isCurrentPage: Boolean, isLastChild: Boolean, separator: [Object, String], @@ -107,7 +110,6 @@ const BreadcrumbItem = { const Breadcrumb = { name: 'Breadcrumb', - extends: Box, props: { spacing: { type: [String, Number, Array], @@ -120,7 +122,8 @@ const Breadcrumb = { separator: { type: [String, Object], default: '/' - } + }, + ...baseProps }, render (h) { const children = this.$slots.default diff --git a/packages/chakra-ui-core/src/Checkbox/tests/__snapshots__/Checkbox.test.js.snap b/packages/chakra-ui-core/src/Checkbox/tests/__snapshots__/Checkbox.test.js.snap index 2acf87ba..afebb2d7 100644 --- a/packages/chakra-ui-core/src/Checkbox/tests/__snapshots__/Checkbox.test.js.snap +++ b/packages/chakra-ui-core/src/Checkbox/tests/__snapshots__/Checkbox.test.js.snap @@ -17,7 +17,7 @@ exports[`should render correctly 1`] = ` class="css-1ra3zj0 css-xkdust" > diff --git a/packages/chakra-ui-core/src/CheckboxGroup/tests/__snapshots__/CheckboxGroup.test.js.snap b/packages/chakra-ui-core/src/CheckboxGroup/tests/__snapshots__/CheckboxGroup.test.js.snap index 89661248..93490894 100644 --- a/packages/chakra-ui-core/src/CheckboxGroup/tests/__snapshots__/CheckboxGroup.test.js.snap +++ b/packages/chakra-ui-core/src/CheckboxGroup/tests/__snapshots__/CheckboxGroup.test.js.snap @@ -29,7 +29,7 @@ exports[`should render correctly 1`] = ` class="css-1ra3zj0 css-hpvc67" > @@ -97,7 +97,7 @@ exports[`should render correctly 1`] = ` class="css-1ra3zj0 css-hpvc67" > @@ -164,7 +164,7 @@ exports[`should render correctly 1`] = ` class="css-1ra3zj0 css-hpvc67" > diff --git a/packages/chakra-ui-core/src/CircularProgress/tests/__snapshots__/CircularProgress.test.js.snap b/packages/chakra-ui-core/src/CircularProgress/tests/__snapshots__/CircularProgress.test.js.snap index 195b27a5..6df4a4e8 100644 --- a/packages/chakra-ui-core/src/CircularProgress/tests/__snapshots__/CircularProgress.test.js.snap +++ b/packages/chakra-ui-core/src/CircularProgress/tests/__snapshots__/CircularProgress.test.js.snap @@ -6,7 +6,7 @@ exports[`should render correctly 1`] = ` aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" - class="css-xqz7ss" + class="css-12d21aj" data-testid="CircularProgress" role="progressbar" > @@ -24,7 +24,7 @@ exports[`should render correctly 1`] = ` stroke-width="11.111111111111112" />