Merge pull request #304 from chakra-ui/fix/include-missing-style-props

feat: include style props for flex grow and native border radius props

Author: codebender828

packages/chakra-ui-core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.6.3
+
+### Patch Changes
+
+- fix: includes missing style props for border-radius and flex-grow style declarations"
+
 ## 0.6.2
 
 ### Patch Changes

packages/chakra-ui-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/vue",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Build Accessible and Responsive Vue.js websites and applications with speed ⚡️",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -22,3 +22,19 @@ storiesOf('UI | Flex', module)
       </CFlex>
     `
   }))
+  .add('Flex grow', () => ({
+    components: { CFlex, CBox, CText },
+    template: `
+      <CFlex w="600px" align="center">
+        <CBox flex-grow="2" w="10" mr="3" h="10" bg="blue.100">1</CBox>
+        <CBox rounded-top="lg" w="10" mr="3" h="10" bg="blue.100">1</CBox>
+        <CBox rounded-right="lg" w="10" mr="3" h="10" bg="blue.100">2</CBox>
+        <CBox rounded-bottom="lg" w="10" mr="3" h="10" bg="blue.100">3</CBox>
+        <CBox rounded-right="lg" w="10" mr="3" h="10" bg="blue.100">4</CBox>
+        <CBox border-top-right-radius="lg" w="10" mr="3" h="10" bg="blue.100">5</CBox>
+        <CBox border-top-left-radius="lg" w="10" mr="3" h="10" bg="blue.100">6</CBox>
+        <CBox border-bottom-right-radius="lg" w="10" mr="3" h="10" bg="blue.100">7</CBox>
+        <CBox border-bottom-left-radius="lg" w="10" h="10" bg="blue.100">8</CBox>
+      </CFlex>
+    `
+  }))

packages/chakra-ui-core/src/config/props/props.js

@@ -63,6 +63,10 @@ const baseProps = {
   borderLeft: SNA,
   borderRight: SNA,
   borderTop: SNA,
+  borderTopLeftRadius: SNA,
+  borderTopRightRadius: SNA,
+  borderBottomRightRadius: SNA,
+  borderBottomLeftRadius: SNA,
   borderBottom: SNA,
   shadow: SNA,
   backgroundColor: SNA,
@@ -158,7 +162,8 @@ const baseProps = {
   opacity: SNA,
   letterSpacing: SNA,
   flexShrink: SNA,
-  boxShadow: SNA
+  boxShadow: SNA,
+  flexGrow: SNA
 }
 
 export default baseProps