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

Commit 595513e

Browse files
codebender828codebender828
authored
Merge pull request #462 from chakra-ui/develop
chore: release candidate `@chakra-ui/[email protected]` 🎉
2 parents 093aacc + 1044542 commit 595513e

File tree

9 files changed

+161
-80
lines changed

9 files changed

+161
-80
lines changed

‎.changeset/dull-rats-sort.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@chakra-ui/vue": patch
3+
---
4+
5+
fix: add an unstyled variant to the c-button validators

‎.changeset/silly-lemons-draw.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@chakra-ui/vue": patch
3+
---
4+
5+
Pass all listeners to render function in CFlex, Stack

‎packages/chakra-ui-core/src/CButton/utils/button.props.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const buttonProps = {
1212
type: String,
1313
default: 'solid',
1414
validator: value =>
15-
value.match(/^(solid|outline|ghost|flat|link)$/)
15+
value.match(/^(solid|outline|ghost|flat|link|unstyled)$/)
1616
},
1717
variantColor: {
1818
type: [String, Array],

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ const CFlex = {
3838
render (h) {
3939
return h(this.as, {
4040
class: this.className,
41-
attrs: this.computedAttrs
41+
attrs: this.computedAttrs,
42+
on: this.computedListeners
4243
}, this.$slots.default)
4344
}
4445
}

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

+49-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import CFlex from '..'
2-
import { render, screen } from '@/tests/test-utils'
2+
import { render, screen, userEvent } from '@/tests/test-utils'
33

44
const renderComponent = (props) => {
55
const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -11,21 +11,56 @@ const renderComponent = (props) => {
1111
return render(base)
1212
}
1313

14-
it('should render correctly', () => {
15-
const { asFragment } = renderComponent()
14+
describe('CFlex', () => {
15+
it('should render correctly', () => {
16+
const { asFragment } = renderComponent()
1617

17-
expect(asFragment()).toMatchSnapshot()
18-
})
18+
expect(asFragment()).toMatchSnapshot()
19+
})
20+
21+
it('should change styles', () => {
22+
const inlineAttrs = 'align="center" justify="center" direction="column"'
23+
const { asFragment } = renderComponent({ inlineAttrs })
24+
25+
expect(asFragment()).toMatchSnapshot()
26+
27+
const flex = screen.getByTestId('flex')
28+
expect(flex).toHaveStyle('display: flex')
29+
expect(flex).toHaveStyle('align-items: center')
30+
expect(flex).toHaveStyle('justify-content: center')
31+
expect(flex).toHaveStyle('flex-direction: column')
32+
})
33+
34+
it('should preserve inherited event listeners', async () => {
35+
const handleClick = jest.fn()
36+
renderComponent({
37+
inlineAttrs: '@click="handleClick"',
38+
methods: {
39+
handleClick
40+
}
41+
})
1942

20-
it('should change styles', () => {
21-
const inlineAttrs = 'align="center" justify="center" direction="column"'
22-
const { asFragment } = renderComponent({ inlineAttrs })
43+
await userEvent.click(screen.getByTestId('flex'))
44+
expect(handleClick).toHaveBeenCalledTimes(1)
45+
})
2346

24-
expect(asFragment()).toMatchSnapshot()
47+
it('should preserve inherited event listeners with custom `as` component', async () => {
48+
const handleSubmit = jest.fn((event) => {
49+
expect(event.target).toBe(screen.getByTestId('flex-as-form'))
50+
})
51+
renderComponent({
52+
template: `
53+
<CFlex as="form" @submit.prevent="handleSubmit" data-testid="flex-as-form">
54+
<input value="some-value" name="some-key" />
55+
<button type="submit" value="submit" data-testid="form-submit-btn" />
56+
</CFlex>
57+
`,
58+
methods: {
59+
handleSubmit
60+
}
61+
})
2562

26-
const flex = screen.getByTestId('flex')
27-
expect(flex).toHaveStyle('display: flex')
28-
expect(flex).toHaveStyle('align-items: center')
29-
expect(flex).toHaveStyle('justify-content: center')
30-
expect(flex).toHaveStyle('flex-direction: column')
63+
await userEvent.click(screen.getByTestId('form-submit-btn'))
64+
expect(handleSubmit).toHaveBeenCalledTimes(1)
65+
})
3166
})

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`should change styles 1`] = `
3+
exports[`CFlex should change styles 1`] = `
44
<DocumentFragment>
55
<div
66
class="css-u6v8er"
@@ -12,7 +12,7 @@ exports[`should change styles 1`] = `
1212
</DocumentFragment>
1313
`;
1414

15-
exports[`should render correctly 1`] = `
15+
exports[`CFlex should render correctly 1`] = `
1616
<DocumentFragment>
1717
<div
1818
class="css-k008qs"

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,8 @@ const CStack = {
131131
justify: this.justify,
132132
direction: this._direction
133133
},
134-
attrs: this.computedAttrs
134+
attrs: this.computedAttrs,
135+
on: this.computedListeners
135136
}, stackables)
136137
}
137138
}

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

+90-56
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CStack, CBox, CHeading, CText } from '../..'
2-
import { render, getTagName, screen } from '@/tests/test-utils'
2+
import { render, getTagName, screen, userEvent } from '@/tests/test-utils'
33

44
const renderComponent = (props) => {
55
const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -21,68 +21,102 @@ const renderComponent = (props) => {
2121
return render(base)
2222
}
2323

24-
it('should render correctly', () => {
25-
const { asFragment } = renderComponent()
26-
expect(asFragment()).toMatchSnapshot()
27-
})
24+
describe('CStack', () => {
25+
it('should render correctly', () => {
26+
const { asFragment } = renderComponent()
27+
expect(asFragment()).toMatchSnapshot()
28+
})
2829

29-
it('should render empty children correctly', () => {
30-
const { asFragment } = renderComponent({
31-
template: '<c-stack></c-stack>'
30+
it('should render empty children correctly', () => {
31+
const { asFragment } = renderComponent({
32+
template: '<c-stack></c-stack>'
33+
})
34+
expect(asFragment()).toMatchSnapshot()
3235
})
33-
expect(asFragment()).toMatchSnapshot()
34-
})
3536

36-
it('should default to vertical stack', () => {
37-
renderComponent()
38-
const stack = screen.getByTestId('stack')
39-
expect(stack).toHaveStyle('display: flex')
40-
expect(stack).toHaveStyle('flex-direction: column')
41-
})
37+
it('should default to vertical stack', () => {
38+
renderComponent()
39+
const stack = screen.getByTestId('stack')
40+
expect(stack).toHaveStyle('display: flex')
41+
expect(stack).toHaveStyle('flex-direction: column')
42+
})
4243

43-
it('should not space last child', () => {
44-
renderComponent()
45-
const stack = screen.getByTestId('stack')
46-
expect(stack).not.toHaveStyle('margin-bottom: 0.5rem')
47-
})
44+
it('should not space last child', () => {
45+
renderComponent()
46+
const stack = screen.getByTestId('stack')
47+
expect(stack).not.toHaveStyle('margin-bottom: 0.5rem')
48+
})
4849

49-
it('should should stack horizontally if isInline', () => {
50-
const inlineAttrs = 'is-inline'
51-
renderComponent({ inlineAttrs })
52-
const stack = screen.getByTestId('stack')
53-
expect(stack).toHaveStyle('display: flex')
54-
expect(stack).toHaveStyle('flex-direction: row')
55-
})
50+
it('should should stack horizontally if isInline', () => {
51+
const inlineAttrs = 'is-inline'
52+
renderComponent({ inlineAttrs })
53+
const stack = screen.getByTestId('stack')
54+
expect(stack).toHaveStyle('display: flex')
55+
expect(stack).toHaveStyle('flex-direction: row')
56+
})
5657

57-
it('should should stack native html elements', () => {
58-
const { asFragment } = renderComponent({
59-
template: `
60-
<CStack data-testid="stack">
61-
<CText mt="4">The future can be even brighter but a goal without a plan is just a wish</CText>
62-
<p data-testid="stacked-p">I am a happy paragraph element</p>
63-
<h3 data-testid="stacked-h3">I am a jolly heading element</h3>
64-
<CText mt="4">You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process</CText>
65-
</CStack>
66-
`
58+
it('should should stack native html elements', () => {
59+
const { asFragment } = renderComponent({
60+
template: `
61+
<CStack data-testid="stack">
62+
<CText mt="4">The future can be even brighter but a goal without a plan is just a wish</CText>
63+
<p data-testid="stacked-p">I am a happy paragraph element</p>
64+
<h3 data-testid="stacked-h3">I am a jolly heading element</h3>
65+
<CText mt="4">You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process</CText>
66+
</CStack>
67+
`
68+
})
69+
70+
expect(asFragment()).toMatchSnapshot()
6771
})
6872

69-
expect(asFragment()).toMatchSnapshot()
70-
})
73+
// Cannot use `it.each` because it cannot accept
74+
// component as interpolated variable
75+
it.each`
76+
as
77+
${'section'}
78+
${'nav'}}
79+
`(
80+
'should render CStack with element as $as',
81+
({ as }) => {
82+
const inlineAttrs = `as="${as}"`
83+
const { asFragment } = renderComponent({ inlineAttrs })
84+
const stack = screen.getByTestId('stack')
85+
expect(getTagName(stack)).toEqual(as)
86+
expect(asFragment()).toMatchSnapshot()
87+
}
88+
)
7189

72-
// Cannot use `it.each` because it cannot accept
73-
// component as interpolated variable
90+
it('should preserve inherited event listeners', async () => {
91+
const handleClick = jest.fn()
92+
renderComponent({
93+
inlineAttrs: '@click="handleClick"',
94+
methods: {
95+
handleClick
96+
}
97+
})
7498

75-
it.each`
76-
as
77-
${'section'}
78-
${'nav'}}
79-
`(
80-
'should render CStack with element as $as',
81-
({ as }) => {
82-
const inlineAttrs = `as="${as}"`
83-
const { asFragment } = renderComponent({ inlineAttrs })
84-
const stack = screen.getByTestId('stack')
85-
expect(getTagName(stack)).toEqual(as)
86-
expect(asFragment()).toMatchSnapshot()
87-
}
88-
)
99+
await userEvent.click(screen.getByTestId('stack'))
100+
expect(handleClick).toHaveBeenCalledTimes(1)
101+
})
102+
103+
it('should preserve inherited event listeners with custom `as` component', async () => {
104+
const handleSubmit = jest.fn((event) => {
105+
expect(event.target).toBe(screen.getByTestId('stack-as-form'))
106+
})
107+
renderComponent({
108+
template: `
109+
<CStack as="form" @submit.prevent="handleSubmit" data-testid="stack-as-form">
110+
<input value="some-value" name="some-key" />
111+
<button type="submit" value="submit" data-testid="form-submit-btn" />
112+
</CStack>
113+
`,
114+
methods: {
115+
handleSubmit
116+
}
117+
})
118+
119+
await userEvent.click(screen.getByTestId('form-submit-btn'))
120+
expect(handleSubmit).toHaveBeenCalledTimes(1)
121+
})
122+
})

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`should render CStack with element as nav 1`] = `
3+
exports[`CStack should render CStack with element as nav 1`] = `
44
<DocumentFragment>
55
<nav
66
class="css-j7qwjs css-0"
@@ -49,7 +49,7 @@ exports[`should render CStack with element as nav 1`] = `
4949
</DocumentFragment>
5050
`;
5151

52-
exports[`should render CStack with element as section 1`] = `
52+
exports[`CStack should render CStack with element as section 1`] = `
5353
<DocumentFragment>
5454
<section
5555
class="css-j7qwjs css-0"
@@ -98,7 +98,7 @@ exports[`should render CStack with element as section 1`] = `
9898
</DocumentFragment>
9999
`;
100100

101-
exports[`should render correctly 1`] = `
101+
exports[`CStack should render correctly 1`] = `
102102
<DocumentFragment>
103103
<div
104104
class="css-j7qwjs css-0"
@@ -147,7 +147,7 @@ exports[`should render correctly 1`] = `
147147
</DocumentFragment>
148148
`;
149149

150-
exports[`should render empty children correctly 1`] = `
150+
exports[`CStack should render empty children correctly 1`] = `
151151
<DocumentFragment>
152152
<div
153153
class="css-j7qwjs css-0"
@@ -156,7 +156,7 @@ exports[`should render empty children correctly 1`] = `
156156
</DocumentFragment>
157157
`;
158158

159-
exports[`should should stack native html elements 1`] = `
159+
exports[`CStack should should stack native html elements 1`] = `
160160
<DocumentFragment>
161161
<div
162162
class="css-j7qwjs css-0"

0 commit comments

Comments
 (0)