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

Author: codebender828

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

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