Merge pull request #438 from chakra-ui/develop

chore: release candidate for v0.9.0 🎉

Author: codebender828

.changeset/small-bikes-wink.md

@@ -0,0 +1,8 @@
+---
+'@chakra-ui/vue': minor
+'chakra-ui-docs': minor
+---
+
+- This changeset adds a srcset support to the CImage component.
+- Fixes merging of Popper.js modifiers
+- Adds CGridItems components to the core 👏🏾

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

@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/vue'
-import { CBox } from '..'
+import CBox from '../CBox'
 
 storiesOf('UI | Box', module)
   .add('Box', () => ({
@@ -28,13 +28,26 @@ storiesOf('UI | Box', module)
     template: `
       <div>
         <CBox
+          position="relative"
           w="300px"
           h="200px"
-          font-family="body"
-          objectFit="contain"
-          bgImg="url(https://lh3.googleusercontent.com/proxy/vG0O53R9-vPA2WpuC5lXWCHIVuIQiQ1R7bpQ1UcDsHnHVlz2BJMeSeJx1I1n4huq_SeB39iegxgQl1zXcnNqpq2IJfCgQwwWXpdRG9pNdA)"
+          overflow="hidden"
+          rounded="20px"
         >
-          <CBox h="full" bg="red.200" :w="1/2" />
+          <CBox
+            as="img"
+            font-family="body"
+            objectFit="contain"
+            src="https://images.unsplash.com/photo-1600002415506-dd06090d3480?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
+          />
+          <CBox px="5" display="flex" flex-direction="column" justify-content="center" py="3" h="full" pos="absolute" top="0" left="0" bg="pink.200" w="50%">
+            <CBox as="h1" font-size="xl" font-weight="bold">
+              Tempations
+            </CBox>
+            <CBox as="p" font-size="md">
+              Spacial cakes for special moments.
+            </CBox>
+          </CBox>
         </CBox>
       </div>
     `

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

@@ -10,7 +10,65 @@
  */
 
 import { createStyledAttrsMixin } from '../utils'
-import { SNA } from '../config/props/props.types'
+import { SNA, StringArray } from '../config/props/props.types'
+
+/**
+ * @description Map "span" values to accommodate breakpoint values
+ * @param {Array} value
+ * @returns {(String|Array)} String or Array of breakpoint values
+ */
+const spanFn = (value) => {
+  if (Array.isArray(value)) {
+    return value.map(v =>
+      v === 'auto' ? 'auto' : `span ${v}/span ${v}`
+    )
+  } else {
+    return value === 'auto' ? 'auto' : `span ${value}/span ${value}`
+  }
+}
+
+/**
+ * CGridItem component
+ *
+ * A primitive component useful for grid layouts.
+ *
+ * @extends CBox
+ * @see Docs https://vue.chakra-ui.com/grid
+ */
+
+const CGridItem = {
+  name: 'CGridItem',
+  mixins: [createStyledAttrsMixin('CGridItem')],
+  props: {
+    colSpan: { type: StringArray },
+    rowSpan: { type: StringArray },
+    colStart: { type: StringArray },
+    colEnd: { type: StringArray },
+    rowStart: { type: StringArray },
+    rowEnd: { type: StringArray }
+  },
+  computed: {
+    componentStyles () {
+      return {
+        gridColumn: this.colSpan ? spanFn(this.colSpan) : null,
+        gridRow: this.rowSpan ? spanFn(this.rowSpan) : null,
+        gridColumnStart: this.colStart,
+        gridColumnEnd: this.colEnd,
+        gridRowStart: this.rowStart,
+        gridRowEnd: this.rowEnd
+      }
+    }
+  },
+  render (h) {
+    return h('div',
+      {
+        class: this.className,
+        attrs: this.computedAttrs
+      },
+      this.$slots.default
+    )
+  }
+}
 
 /**
  * CGrid component
@@ -61,11 +119,18 @@ const CGrid = {
     }
   },
   render (h) {
-    return h(this.as, {
-      class: this.className,
-      attrs: this.computedAttrs
-    }, this.$slots.default)
+    return h(
+      this.as,
+      {
+        class: this.className,
+        attrs: this.computedAttrs
+      },
+      this.$slots.default
+    )
   }
 }
 
-export default CGrid
+export {
+  CGrid,
+  CGridItem
+}

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

@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/vue'
-import { CReset, CGrid, CBox } from '..'
+import { CReset, CGrid, CGridItem, CBox } from '..'
 
 storiesOf('UI | Grid', module)
   .add('Default Grid', () => ({
@@ -17,3 +17,17 @@ storiesOf('UI | Grid', module)
       </div>
     `
   }))
+
+storiesOf('UI | Grid', module)
+  .add('Grid Items', () => ({
+    components: { CReset, CGrid, CGridItem },
+    template: `
+      <div>
+        <CReset />
+        <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+          <CGridItem col-span="2" h="10" bg="blue.500" />
+          <CGridItem col-start="4" col-end="6" h="10" bg="red.500" />
+        </CGrid>
+      </div>
+    `
+  }))

packages/chakra-ui-core/src/CGrid/index.js

@@ -1,2 +1 @@
-import CGrid from './CGrid'
-export default CGrid
+export * from './CGrid'

packages/chakra-ui-core/src/CGrid/test/CGrid.test.js

@@ -1,10 +1,10 @@
-import CGrid from '..'
+import { CGrid, CGridItem } from '..'
 import { render } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
   const base = {
-    components: { CGrid },
+    components: { CGrid, CGridItem },
     template: `<CGrid ${inlineAttrs}>Grid Me</CGrid>`,
     ...props
   }
@@ -23,3 +23,25 @@ it('should change gap', () => {
 
   expect(asFragment()).toMatchSnapshot()
 })
+
+it('should offset columns', () => {
+  const inlineAttrs = 'col-start="4" col-end="6"'
+  const { asFragment } = renderComponent({
+    template: `
+      <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+        <CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
+      </CGrid>`
+  })
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('should span columns', () => {
+  const inlineAttrs = 'col-span="2"'
+  const { asFragment } = renderComponent({
+    template: `
+      <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+        <CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
+      </CGrid>`
+  })
+  expect(asFragment()).toMatchSnapshot()
+})

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

@@ -11,6 +11,22 @@ exports[`should change gap 1`] = `
 </DocumentFragment>
 `;
 
+exports[`should offset columns 1`] = `
+<DocumentFragment>
+  <div
+    class="css-12kxrxg"
+    data-chakra-component="CGrid"
+  >
+    <div
+      class="css-1i8ejg0"
+      data-chakra-component="CGridItem"
+    >
+      I'm in a grid item
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
@@ -21,3 +37,19 @@ exports[`should render correctly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`should span columns 1`] = `
+<DocumentFragment>
+  <div
+    class="css-12kxrxg"
+    data-chakra-component="CGrid"
+  >
+    <div
+      class="css-tuh9u2"
+      data-chakra-component="CGridItem"
+    >
+      I'm in a grid item
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -25,6 +25,7 @@ const CImage = {
   mixins: [createStyledAttrsMixin('CImage')],
   props: {
     src: String,
+    srcset: String,
     fallbackSrc: String,
     ignoreFalback: Boolean,
     htmlWidth: String,
@@ -48,12 +49,13 @@ const CImage = {
   created () {
     // Should only invoke window.Image in the browser.
     if (process.browser) {
-      this.loadImage(this.src)
+      this.loadImage(this.src, this.srcset)
     }
   },
   methods: {
-    loadImage (src) {
+    loadImage (src, srcset) {
       const image = new window.Image()
+      image.srcset = srcset
       image.src = src
 
       image.onload = (event) => {
@@ -70,9 +72,9 @@ const CImage = {
   render (h) {
     let imageProps
     if (this.ignoreFallback) {
-      imageProps = { src: this.src }
+      imageProps = { src: this.src, srcset: this.srcset }
     } else {
-      imageProps = { src: this.hasLoaded ? this.src : this.fallbackSrc }
+      imageProps = { src: this.hasLoaded ? this.src : this.fallbackSrc, srcset: this.srcset }
     }
     return h(CNoSsr, [
       h('img', {

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

@@ -45,3 +45,10 @@ it('fallback src works', async () => {
     expect(screen.getByAltText(/Mesut Koca/i)).toHaveAttribute('src', 'LOAD_FALLBACK_SRC')
   })
 })
+
+it('srcset works', async () => {
+  renderComponent({ template: '<CImage alt="My Image Description" src="LOAD_SUCCESS_SRC" srcset="LOAD_SUCCESS_SRC 400w" />' })
+  await wait(() => {
+    expect(screen.getByAltText(/My Image Description/i)).toHaveAttribute('srcset', 'LOAD_SUCCESS_SRC 400w')
+  })
+})

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

@@ -42,6 +42,27 @@ function flipPlacement (placement) {
   }
 }
 
+/**
+ * Call _.merge() for each item of `object` array with the corresponding
+ * item of `source` array
+ * @param {*} object The destination Modifiers array.
+ * @param {*} source The source array.
+ * @returns Returns merged `array`
+ */
+function mergeModifiers (object, source) {
+  if (!Array.isArray(object)) throw new Error('`object` must be an array')
+
+  const _source = Array.isArray(source) ? source : [source]
+
+  object.forEach((o) => {
+    const { name } = o
+    const _s = _source.find(s => s.name === name)
+    if (_s) merge(o, _s)
+  })
+
+  return object
+}
+
 /**
  * CPopper component
  *
@@ -153,7 +174,7 @@ const CPopper = {
       return ref
     },
     computedModifiers () {
-      return merge([
+      return mergeModifiers([
         this.usePortal && {
           name: 'preventOverflow',
           options: {

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

@@ -8,7 +8,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
  */
 
-import CGrid from '../CGrid'
+import { CGrid } from '../CGrid'
 import { SNA } from '../config/props/props.types'
 import { createStyledAttrsMixin } from '../utils'
 import { countToColumns, widthToColumns } from './utils/grid.styles'

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

@@ -55,7 +55,7 @@ export { default as CFormHelperText } from './CFormHelperText'
 export { default as CFragment } from './CFragment'
 
 // G
-export { default as CGrid } from './CGrid'
+export * from './CGrid'
 
 // H
 export { default as CHeading } from './CHeading'