Merge pull request #330 from chakra-ui/develop

chore: @chakra-ui/[email protected] and @chakra-ui/[email protected] 🎉

Author: codebender828

.all-contributorsrc

@@ -162,7 +162,8 @@
       "avatar_url": "https://avatars3.githubusercontent.com/u/15808?v=4",
       "profile": "https://github.com/freality",
       "contributions": [
-        "code"
+        "code",
+        "test"
       ]
     },
     {
@@ -173,6 +174,26 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "be-codified",
+      "name": "Žiga Vukčevič",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/10107183?v=4",
+      "profile": "http://www.be-codified.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "carwack",
+      "name": "Sybren W",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/16015740?v=4",
+      "profile": "https://github.com/carwack",
+      "contributions": [
+        "doc",
+        "content",
+        "example"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.storybook/components/Canvas.vue

@@ -48,6 +48,7 @@ import {
   CBox,
   CIconButton,
   CColorModeProvider } from '../../packages/chakra-ui-core/src'
+
 export default {
   name: 'Canvas',
   components: {

.storybook/config.js

@@ -2,9 +2,8 @@ import { configure, addDecorator, addParameters } from '@storybook/vue';
 import Vue from 'vue'
 import VueLive from 'vue-live'
 import Lorem from 'vue-lorem-ipsum'
-import Chakra, { CThemeProvider, CColorModeProvider, CReset } from '../packages/chakra-ui-core/src'
+import Chakra from '../packages/chakra-ui-core/src'
 import Canvas from './components/Canvas.vue'
-import theme from '../packages/chakra-ui-core/src/lib/theme'
 import storyBookTheme from './theme'
 
 import {
@@ -75,16 +74,11 @@ addParameters({
 
 addDecorator(() => ({
   template: `
-    <Canvas :theme="theme">
+    <Canvas>
       <story/>
     </Canvas>
   `,
-  data() {
-    return {
-      theme,
-    }
-  },
-  components: { CThemeProvider, CColorModeProvider, CReset, Canvas }
+  components: { Canvas }
 }));
 
 // For playground

README.md

@@ -211,8 +211,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   <tr>
     <td align="center"><a href="https://github.com/Anmol270900"><img src="https://avatars2.githubusercontent.com/u/43845658?v=4" width="50px;" alt=""/><br /><sub><b>Anmol</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=Anmol270900" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/vishnumohanrk"><img src="https://avatars3.githubusercontent.com/u/51525368?v=4" width="50px;" alt=""/><br /><sub><b>Vishnumohan R K</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=vishnumohanrk" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/freality"><img src="https://avatars3.githubusercontent.com/u/15808?v=4" width="50px;" alt=""/><br /><sub><b>Ken Love</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/freality"><img src="https://avatars3.githubusercontent.com/u/15808?v=4" width="50px;" alt=""/><br /><sub><b>Ken Love</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Tests">⚠️</a></td>
     <td align="center"><a href="http://www.linkedin.com/in/schalch"><img src="https://avatars3.githubusercontent.com/u/13435327?v=4" width="50px;" alt=""/><br /><sub><b>Guilherme Schalch</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=gbschalch" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.be-codified.com"><img src="https://avatars1.githubusercontent.com/u/10107183?v=4" width="50px;" alt=""/><br /><sub><b>Žiga Vukčevič</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=be-codified" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/carwack"><img src="https://avatars3.githubusercontent.com/u/16015740?v=4" width="50px;" alt=""/><br /><sub><b>Sybren W</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Documentation">📖</a> <a href="#content-carwack" title="Content">🖋</a> <a href="#example-carwack" title="Examples">💡</a></td>
   </tr>
 </table>
 

package.json

@@ -93,6 +93,7 @@
     "babelrc-rollup": "^3.0.0",
     "breadstick": "^0.2.14",
     "can-use-dom": "^0.1.0",
+    "chakra-loader": "latest",
     "color": "^3.1.2",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.4",

packages/chakra-ui-core/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 0.6.6
+
+### Patch Changes
+
+**🌟 New features**
+- feat: include all known css properties #319
+- feat(CStack): allow stack html elements #324
+
+**🛠 Bug fixes**
+- fix(creset): include font-family to global styles #323
+- fix(inputgroup): default inputgroup z-index to containing element zindex #325
+- Documentation fixes #329, #328, #321
+
 ## 0.6.5
 
 ### Patch Changes

packages/chakra-ui-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/vue",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "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/CInputGroup/CInputGroup.js

@@ -87,6 +87,7 @@ const CInputGroup = {
       attrs: {
         display: 'flex',
         position: 'relative',
+        zIndex: 0,
         ...data.attrs,
         'data-chakra-component': 'CInputGroup'
       }

packages/chakra-ui-core/src/CInputGroup/tests/CInputGroup.test.js

@@ -0,0 +1,23 @@
+import { CInputGroup, CInputLeftElement, CInputRightElement, CInput, CIcon } from '../..'
+import { render } from '@/tests/test-utils'
+
+const renderComponent = (props) => {
+  const base = {
+    data: () => ({ text: 'hello' }),
+    components: { CInputGroup, CInputLeftElement, CInputRightElement, CInput, CIcon },
+    template: `
+      <c-input-group>
+        <c-input-left-element color="gray.300" fontSize="1.2em">¥</c-input-left-element>
+        <c-input placeholder="Enter amount" />
+        <c-input-right-element><c-icon name="check" color="green.500" /></c-input-right-element>
+      </c-input-group>
+    `,
+    ...props
+  }
+  return render(base)
+}
+
+test('should render correctly', () => {
+  const { asFragment } = renderComponent()
+  expect(asFragment()).toMatchSnapshot()
+})

packages/chakra-ui-core/src/CInputGroup/tests/__snapshots__/CInputGroup.test.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-15frdhg"
+    data-chakra-component="CInputGroup"
+  >
+    <div
+      class="css-rbouvx"
+      color="gray.300"
+      data-chakra-component="CInputLeftElement"
+      fontsize="1.2em"
+    >
+      ¥
+    </div>
+    <input
+      class="css-lr9hjy"
+      data-chakra-component="CInput"
+      placeholder="Enter amount"
+    />
+    <div
+      class="css-wqp70x"
+      data-chakra-component="CInputRightElement"
+    >
+      <svg
+        class="css-12j51pv css-3vopgu css-7w9hf9"
+        data-chakra-component="CIcon"
+        role="presentation"
+        viewBox="0 0 14 14"
+      >
+        
+      
+        <g
+          fill="currentColor"
+        >
+          
+        
+          <polygon
+            points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+          />
+          
+      
+        </g>
+        
+    
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -15,13 +15,15 @@ const defaultConfig = theme => ({
     color: theme.colors.gray[800],
     bg: undefined,
     borderColor: theme.colors.gray[200],
-    placeholderColor: theme.colors.gray[400]
+    placeholderColor: theme.colors.gray[400],
+    fontFamily: theme.fonts.body
   },
   dark: {
     color: theme.colors.whiteAlpha[900],
     bg: theme.colors.gray[800],
     borderColor: theme.colors.whiteAlpha[300],
-    placeholderColor: theme.colors.whiteAlpha[400]
+    placeholderColor: theme.colors.whiteAlpha[400],
+    fontFamily: theme.fonts.body
   }
 })
 
@@ -51,16 +53,22 @@ const CReset = {
     }
   },
   props: {
-    config: Function
+    config: {
+      type: Function,
+      validator (value) {
+        return typeof value === 'function'
+      }
+    }
   },
   created () {
-    const { color, bg, borderColor, placeholderColor } = this.styleConfig[this.colorMode]
+    const { color, bg, borderColor, placeholderColor, fontFamily } = this.styleConfig[this.colorMode]
     useTailwindPreflight(this.theme)
     injectGlobal({
       html: {
         lineHeight: 1.5,
         color,
-        backgroundColor: bg
+        backgroundColor: bg,
+        fontFamily
       },
 
       '*, *::before, *::after': {

packages/chakra-ui-core/src/CReset/tests/CReset.test.js

@@ -0,0 +1,40 @@
+import CReset from '../'
+import { render } from '@/tests/test-utils'
+
+const renderComponent = (props) => {
+  const inlineAttrs = (props && props.inlineAttrs) || ''
+  const base = {
+    components: { CReset },
+    template: `<CReset data-testid="reset" ${inlineAttrs} />`,
+    ...props
+  }
+  return render(base)
+}
+
+describe('CReset.vue', () => {
+  it('should render correctly', () => {
+    const { asFragment } = renderComponent()
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('should inject global styles', () => {
+    renderComponent()
+
+    expect(document.head).toMatchSnapshot()
+  })
+
+  it('should accept config prop', () => {
+    const inlineAttrs = ':config="cssResetConfig"'
+    const cssResetConfig = (_, defaults) => {
+      const { light } = defaults
+      return {
+        ...defaults, light: { ...light, bg: 'pink', color: 'indigo', fontFamily: "'Comic Sans MS'" }
+      }
+    }
+
+    renderComponent({ inlineAttrs, methods: { cssResetConfig } })
+
+    expect(document.head).toMatchSnapshot()
+  })
+})