Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit db2ae44

Browse files
codebender828codebender828
authored
Merge pull request #438 from chakra-ui/develop
chore: release candidate for v0.9.0 🎉
2 parents 547fbfe + 8a1569d commit db2ae44

File tree

13 files changed

+252
-27
lines changed

13 files changed

+252
-27
lines changed

‎.changeset/small-bikes-wink.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@chakra-ui/vue': minor
3+
'chakra-ui-docs': minor
4+
---
5+
6+
- This changeset adds a srcset support to the CImage component.
7+
- Fixes merging of Popper.js modifiers
8+
- Adds CGridItems components to the core 👏🏾

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

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { storiesOf } from '@storybook/vue'
2-
import { CBox } from '..'
2+
import CBox from '../CBox'
33

44
storiesOf('UI | Box', module)
55
.add('Box', () => ({
@@ -28,13 +28,26 @@ storiesOf('UI | Box', module)
2828
template: `
2929
<div>
3030
<CBox
31+
position="relative"
3132
w="300px"
3233
h="200px"
33-
font-family="body"
34-
objectFit="contain"
35-
bgImg="url(https://lh3.googleusercontent.com/proxy/vG0O53R9-vPA2WpuC5lXWCHIVuIQiQ1R7bpQ1UcDsHnHVlz2BJMeSeJx1I1n4huq_SeB39iegxgQl1zXcnNqpq2IJfCgQwwWXpdRG9pNdA)"
34+
overflow="hidden"
35+
rounded="20px"
3636
>
37-
<CBox h="full" bg="red.200" :w="1/2" />
37+
<CBox
38+
as="img"
39+
font-family="body"
40+
objectFit="contain"
41+
src="https://images.unsplash.com/photo-1600002415506-dd06090d3480?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
42+
/>
43+
<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%">
44+
<CBox as="h1" font-size="xl" font-weight="bold">
45+
Tempations
46+
</CBox>
47+
<CBox as="p" font-size="md">
48+
Spacial cakes for special moments.
49+
</CBox>
50+
</CBox>
3851
</CBox>
3952
</div>
4053
`

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

Lines changed: 71 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,65 @@
1010
*/
1111

1212
import { createStyledAttrsMixin } from '../utils'
13-
import { SNA } from '../config/props/props.types'
13+
import { SNA, StringArray } from '../config/props/props.types'
14+
15+
/**
16+
* @description Map "span" values to accommodate breakpoint values
17+
* @param {Array} value
18+
* @returns {(String|Array)} String or Array of breakpoint values
19+
*/
20+
const spanFn = (value) => {
21+
if (Array.isArray(value)) {
22+
return value.map(v =>
23+
v === 'auto' ? 'auto' : `span ${v}/span ${v}`
24+
)
25+
} else {
26+
return value === 'auto' ? 'auto' : `span ${value}/span ${value}`
27+
}
28+
}
29+
30+
/**
31+
* CGridItem component
32+
*
33+
* A primitive component useful for grid layouts.
34+
*
35+
* @extends CBox
36+
* @see Docs https://vue.chakra-ui.com/grid
37+
*/
38+
39+
const CGridItem = {
40+
name: 'CGridItem',
41+
mixins: [createStyledAttrsMixin('CGridItem')],
42+
props: {
43+
colSpan: { type: StringArray },
44+
rowSpan: { type: StringArray },
45+
colStart: { type: StringArray },
46+
colEnd: { type: StringArray },
47+
rowStart: { type: StringArray },
48+
rowEnd: { type: StringArray }
49+
},
50+
computed: {
51+
componentStyles () {
52+
return {
53+
gridColumn: this.colSpan ? spanFn(this.colSpan) : null,
54+
gridRow: this.rowSpan ? spanFn(this.rowSpan) : null,
55+
gridColumnStart: this.colStart,
56+
gridColumnEnd: this.colEnd,
57+
gridRowStart: this.rowStart,
58+
gridRowEnd: this.rowEnd
59+
}
60+
}
61+
},
62+
render (h) {
63+
return h('div',
64+
{
65+
class: this.className,
66+
attrs: this.computedAttrs
67+
},
68+
this.$slots.default
69+
)
70+
}
71+
}
1472

1573
/**
1674
* CGrid component
@@ -61,11 +119,18 @@ const CGrid = {
61119
}
62120
},
63121
render (h) {
64-
return h(this.as, {
65-
class: this.className,
66-
attrs: this.computedAttrs
67-
}, this.$slots.default)
122+
return h(
123+
this.as,
124+
{
125+
class: this.className,
126+
attrs: this.computedAttrs
127+
},
128+
this.$slots.default
129+
)
68130
}
69131
}
70132

71-
export default CGrid
133+
export {
134+
CGrid,
135+
CGridItem
136+
}

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { storiesOf } from '@storybook/vue'
2-
import { CReset, CGrid, CBox } from '..'
2+
import { CReset, CGrid, CGridItem, CBox } from '..'
33

44
storiesOf('UI | Grid', module)
55
.add('Default Grid', () => ({
@@ -17,3 +17,17 @@ storiesOf('UI | Grid', module)
1717
</div>
1818
`
1919
}))
20+
21+
storiesOf('UI | Grid', module)
22+
.add('Grid Items', () => ({
23+
components: { CReset, CGrid, CGridItem },
24+
template: `
25+
<div>
26+
<CReset />
27+
<CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
28+
<CGridItem col-span="2" h="10" bg="blue.500" />
29+
<CGridItem col-start="4" col-end="6" h="10" bg="red.500" />
30+
</CGrid>
31+
</div>
32+
`
33+
}))

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
import CGrid from './CGrid'
2-
export default CGrid
1+
export * from './CGrid'

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import CGrid from '..'
1+
import { CGrid, CGridItem } from '..'
22
import { render } from '@/tests/test-utils'
33

44
const renderComponent = (props) => {
55
const inlineAttrs = (props && props.inlineAttrs) || ''
66
const base = {
7-
components: { CGrid },
7+
components: { CGrid, CGridItem },
88
template: `<CGrid ${inlineAttrs}>Grid Me</CGrid>`,
99
...props
1010
}
@@ -23,3 +23,25 @@ it('should change gap', () => {
2323

2424
expect(asFragment()).toMatchSnapshot()
2525
})
26+
27+
it('should offset columns', () => {
28+
const inlineAttrs = 'col-start="4" col-end="6"'
29+
const { asFragment } = renderComponent({
30+
template: `
31+
<CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
32+
<CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
33+
</CGrid>`
34+
})
35+
expect(asFragment()).toMatchSnapshot()
36+
})
37+
38+
it('should span columns', () => {
39+
const inlineAttrs = 'col-span="2"'
40+
const { asFragment } = renderComponent({
41+
template: `
42+
<CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
43+
<CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
44+
</CGrid>`
45+
})
46+
expect(asFragment()).toMatchSnapshot()
47+
})

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,22 @@ exports[`should change gap 1`] = `
1111
</DocumentFragment>
1212
`;
1313

14+
exports[`should offset columns 1`] = `
15+
<DocumentFragment>
16+
<div
17+
class="css-12kxrxg"
18+
data-chakra-component="CGrid"
19+
>
20+
<div
21+
class="css-1i8ejg0"
22+
data-chakra-component="CGridItem"
23+
>
24+
I'm in a grid item
25+
</div>
26+
</div>
27+
</DocumentFragment>
28+
`;
29+
1430
exports[`should render correctly 1`] = `
1531
<DocumentFragment>
1632
<div
@@ -21,3 +37,19 @@ exports[`should render correctly 1`] = `
2137
</div>
2238
</DocumentFragment>
2339
`;
40+
41+
exports[`should span columns 1`] = `
42+
<DocumentFragment>
43+
<div
44+
class="css-12kxrxg"
45+
data-chakra-component="CGrid"
46+
>
47+
<div
48+
class="css-tuh9u2"
49+
data-chakra-component="CGridItem"
50+
>
51+
I'm in a grid item
52+
</div>
53+
</div>
54+
</DocumentFragment>
55+
`;

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const CImage = {
2525
mixins: [createStyledAttrsMixin('CImage')],
2626
props: {
2727
src: String,
28+
srcset: String,
2829
fallbackSrc: String,
2930
ignoreFalback: Boolean,
3031
htmlWidth: String,
@@ -48,12 +49,13 @@ const CImage = {
4849
created () {
4950
// Should only invoke window.Image in the browser.
5051
if (process.browser) {
51-
this.loadImage(this.src)
52+
this.loadImage(this.src, this.srcset)
5253
}
5354
},
5455
methods: {
55-
loadImage (src) {
56+
loadImage (src, srcset) {
5657
const image = new window.Image()
58+
image.srcset = srcset
5759
image.src = src
5860

5961
image.onload = (event) => {
@@ -70,9 +72,9 @@ const CImage = {
7072
render (h) {
7173
let imageProps
7274
if (this.ignoreFallback) {
73-
imageProps = { src: this.src }
75+
imageProps = { src: this.src, srcset: this.srcset }
7476
} else {
75-
imageProps = { src: this.hasLoaded ? this.src : this.fallbackSrc }
77+
imageProps = { src: this.hasLoaded ? this.src : this.fallbackSrc, srcset: this.srcset }
7678
}
7779
return h(CNoSsr, [
7880
h('img', {

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,10 @@ it('fallback src works', async () => {
4545
expect(screen.getByAltText(/Mesut Koca/i)).toHaveAttribute('src', 'LOAD_FALLBACK_SRC')
4646
})
4747
})
48+
49+
it('srcset works', async () => {
50+
renderComponent({ template: '<CImage alt="My Image Description" src="LOAD_SUCCESS_SRC" srcset="LOAD_SUCCESS_SRC 400w" />' })
51+
await wait(() => {
52+
expect(screen.getByAltText(/My Image Description/i)).toHaveAttribute('srcset', 'LOAD_SUCCESS_SRC 400w')
53+
})
54+
})

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,27 @@ function flipPlacement (placement) {
4242
}
4343
}
4444

45+
/**
46+
* Call _.merge() for each item of `object` array with the corresponding
47+
* item of `source` array
48+
* @param {*} object The destination Modifiers array.
49+
* @param {*} source The source array.
50+
* @returns Returns merged `array`
51+
*/
52+
function mergeModifiers (object, source) {
53+
if (!Array.isArray(object)) throw new Error('`object` must be an array')
54+
55+
const _source = Array.isArray(source) ? source : [source]
56+
57+
object.forEach((o) => {
58+
const { name } = o
59+
const _s = _source.find(s => s.name === name)
60+
if (_s) merge(o, _s)
61+
})
62+
63+
return object
64+
}
65+
4566
/**
4667
* CPopper component
4768
*
@@ -153,7 +174,7 @@ const CPopper = {
153174
return ref
154175
},
155176
computedModifiers () {
156-
return merge([
177+
return mergeModifiers([
157178
this.usePortal && {
158179
name: 'preventOverflow',
159180
options: {

0 commit comments

Comments
 (0)