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

Commit 15a27c1

Browse files
codebender828codebender828
authored
Merge pull request #324 from chakra-ui/feature/stack-html-elements
feat(CStack): allow stack html elements
2 parents 84714ca + cb216f9 commit 15a27c1

File tree

6 files changed

+127
-25
lines changed

6 files changed

+127
-25
lines changed

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,12 @@ const CStack = {
8383
? { [this._isReversed ? 'ml' : 'mr']: isLastChild ? null : this.spacing }
8484
: { [this._isReversed ? 'mt' : 'mb']: isLastChild ? null : this.spacing }
8585

86-
const clone = cloneVNode(node, h)
86+
let clone = cloneVNode(node, h)
87+
88+
if (!clone.componentOptions) {
89+
clone = h(CBox, [clone])
90+
}
91+
8792
const { propsData } = clone.componentOptions
8893
const { attrs } = clone.data
8994

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,28 @@ storiesOf('UI | Stack', module)
5353
</div>
5454
`
5555
}))
56+
.add('with HTML elements', () => ({
57+
components: { CHeading, CText, CStack, CBox, CFlex, CIcon },
58+
template: `
59+
<div>
60+
<c-stack spacing="5" align="flex-end" direction="column">
61+
<c-flex align-items="center">
62+
<c-icon mr="3" name="moon" />
63+
<c-text>Wakanda, 🌍 Africa</c-text>
64+
</c-flex>
65+
<p>I am a happy paragraph element</p>
66+
<h3>I am a jolly heading element</h3>
67+
<c-flex align-items="center">
68+
<c-icon mr="3" name="sun" />
69+
<c-text>Kitchener, ON, Canada</c-text>
70+
</c-flex>
71+
<button>O nankana ani?</button>
72+
<div>Raw div element</div>
73+
<c-flex align-items="center">
74+
<c-icon mr="3" name="sun" />
75+
<c-text>Kitchener, ON, Canada</c-text>
76+
</c-flex>
77+
</c-stack>
78+
</div>
79+
`
80+
}))

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,21 @@ it('should should stack horizontally if isInline', () => {
4747
expect(stack).toHaveStyle('flex-direction: row')
4848
})
4949

50+
it('should should stack native html elements', () => {
51+
const { asFragment } = renderComponent({
52+
template: `
53+
<CStack data-testid="stack">
54+
<CText mt="4">The future can be even brighter but a goal without a plan is just a wish</CText>
55+
<p data-testid="stacked-p">I am a happy paragraph element</p>
56+
<h3 data-testid="stacked-h3">I am a jolly heading element</h3>
57+
<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>
58+
</CStack>
59+
`
60+
})
61+
62+
expect(asFragment()).toMatchSnapshot()
63+
})
64+
5065
// Cannot use `it.each` because it cannot accept
5166
// component as interpolated variable
5267

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,3 +146,46 @@ exports[`should render correctly 1`] = `
146146
</div>
147147
</DocumentFragment>
148148
`;
149+
150+
exports[`should should stack native html elements 1`] = `
151+
<DocumentFragment>
152+
<div
153+
class="css-j7qwjs css-0"
154+
data-chakra-component="CStack"
155+
data-testid="stack"
156+
>
157+
<p
158+
class="css-16ec2e8"
159+
data-chakra-component="CText"
160+
>
161+
The future can be even brighter but a goal without a plan is just a wish
162+
</p>
163+
<div
164+
class="css-cet0rr"
165+
data-chakra-component="CBox"
166+
>
167+
<p
168+
data-testid="stacked-p"
169+
>
170+
I am a happy paragraph element
171+
</p>
172+
</div>
173+
<div
174+
class="css-cet0rr"
175+
data-chakra-component="CBox"
176+
>
177+
<h3
178+
data-testid="stacked-h3"
179+
>
180+
I am a jolly heading element
181+
</h3>
182+
</div>
183+
<p
184+
class="css-18iq2bq"
185+
data-chakra-component="CText"
186+
>
187+
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
188+
</p>
189+
</div>
190+
</DocumentFragment>
191+
`;

‎tests/test-utils/test-utils.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'
44

55
import icons from '@/packages/chakra-ui-core/src/lib/internal-icons'
66
import theme from '@/packages/chakra-ui-core/src/lib/theme'
7+
78
const defaultProviders = options => ({
89
$chakraTheme: () => theme,
910
$chakraColorMode: () => 'light',

‎website/pages/stack.mdx

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@ By default, each item is stacked vertically. Stack clones it's children and pass
2121

2222
```vue live=true
2323
<c-stack :spacing="5">
24-
<c-box :p="5" shadow="md" border-width="1px">
25-
<c-heading>See the Vue</c-heading>
26-
<c-text :mt="4">Vue makes front-end development a breeze.</c-text>
27-
</c-box>
28-
<c-box :p="5" shadow="md" border-width="1px">
29-
<c-heading>Go Nuxt!</c-heading>
30-
<c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
31-
</c-box>
24+
<c-box :p="5" shadow="md" border-width="1px">
25+
<c-heading>See the Vue</c-heading>
26+
<c-text :mt="4">Vue makes front-end development a breeze.</c-text>
27+
</c-box>
28+
<c-box :p="5" shadow="md" border-width="1px">
29+
<c-heading>Go Nuxt!</c-heading>
30+
<c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
31+
</c-box>
3232
</c-stack>
3333
```
3434

@@ -40,14 +40,14 @@ Optionally, you can use align and justify to adjust the alignment and distributi
4040

4141
```vue live=true
4242
<c-stack :spacing="5" is-inline>
43-
<c-box :p="5" shadow="md" border-width="1px">
44-
<c-heading>See the Vue</c-heading>
45-
<c-text :mt="4">Vue makes front-end development a breeze.</c-text>
46-
</c-box>
47-
<c-box :p="5" shadow="md" border-width="1px">
48-
<c-heading>Go Nuxt!</c-heading>
49-
<c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
50-
</c-box>
43+
<c-box :p="5" shadow="md" border-width="1px">
44+
<c-heading>See the Vue</c-heading>
45+
<c-text :mt="4">Vue makes front-end development a breeze.</c-text>
46+
</c-box>
47+
<c-box :p="5" shadow="md" border-width="1px">
48+
<c-heading>Go Nuxt!</c-heading>
49+
<c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
50+
</c-box>
5151
</c-stack>
5252
```
5353

@@ -57,14 +57,27 @@ Pass the `isReversed` prop or set `direction` to `row-reverse` or `column-revers
5757

5858
```vue live=true
5959
<c-stack :spacing="5" is-reversed>
60-
<c-box :p="5" shadow="md" border-width="1px">
61-
<c-heading>See the Vue</c-heading>
62-
<c-text :mt="4">Vue makes front-end development a breeze.</c-text>
63-
</c-box>
64-
<c-box :p="5" shadow="md" border-width="1px">
65-
<c-heading>Go Nuxt!</c-heading>
66-
<c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
67-
</c-box>
60+
<c-box :p="5" shadow="md" border-width="1px">
61+
<c-heading>See the Vue</c-heading>
62+
<c-text :mt="4">Vue makes front-end development a breeze.</c-text>
63+
</c-box>
64+
<c-box :p="5" shadow="md" border-width="1px">
65+
<c-heading>Go Nuxt!</c-heading>
66+
<c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
67+
</c-box>
68+
</c-stack>
69+
```
70+
71+
## Stacking HTML elements
72+
The `CStack` element is able also to stack HTML elements. Internally it wraps HTML elements inside a `CBox` primitive
73+
component and spaces it like it would any other Chakra component.
74+
75+
```vue live=true
76+
<c-stack :spacing="4">
77+
<c-text>Chakra component 1</c-text>
78+
<p>HTML paragraph element</p>
79+
<h3>HTML heading element</h3>
80+
<c-text>Chakra component 2</c-text>
6881
</c-stack>
6982
```
7083

0 commit comments

Comments
 (0)