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

Commit 88cd297

Browse files
codebender828codebender828
authored
Merge branch 'develop' into master
2 parents 7a2ad87 + 960efd2 commit 88cd297

File tree

9 files changed

+172
-54
lines changed

9 files changed

+172
-54
lines changed

‎.changeset/great-kiwis-beg.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@chakra-ui/vue': minor
3+
'@chakra-ui/nuxt': minor
4+
'@chakra-ui/theme-vue': minor
5+
---
6+
7+
Fix `CTextarea` component and fix nuxtjs/emotion dependency

‎.storybook/components/Canvas.vue

+36-50
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,41 @@
66
:bg="colorMode === 'light' ? 'white' : 'gray.800'"
77
:color="colorMode === 'light' ? 'gray.800' : 'gray.50'"
88
class="root"
9+
width="100vw"
10+
height="100vh"
11+
transition="all 0.2s ease-in-out"
912
>
10-
<CHeading mb="50px" pos="absolute" top="3" left="50%" transform="translateX(-50%)" as="h4">@chakra-ui/vue</CHeading>
11-
<CReset />
12-
<CButton
13-
as="a"
14-
target="_blank"
15-
href="https://github.com/chakra-ui/chakra-ui-vue"
16-
position="fixed"
17-
top="3"
18-
left="3"
19-
shadow="sm"
20-
left-icon="github"
13+
<CFlex justify-content="space-between" padding="4">
14+
<CHeading mb="50px" as="h4">@chakra-ui/vue</CHeading>
15+
<CReset />
16+
<CButton
17+
as="a"
18+
target="_blank"
19+
href="https://github.com/chakra-ui/chakra-ui-vue"
20+
shadow="sm"
21+
left-icon="github"
22+
order="-1"
23+
>
24+
Github
25+
</CButton>
26+
<CIconButton
27+
:aria-label="
28+
`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`
29+
"
30+
variant="solid"
31+
:icon="colorMode === 'light' ? 'sun' : 'moon'"
32+
@click="toggleColorMode"
33+
>
34+
</CIconButton>
35+
</CFlex>
36+
<CFlex
37+
class="wrapper"
38+
flex-direction="column"
39+
justify-content="center"
40+
align-items="center"
2141
>
22-
Github
23-
</CButton>
24-
<CIconButton
25-
position="fixed"
26-
top="3"
27-
right="3"
28-
:aria-label="`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`"
29-
variant="ghost"
30-
:icon="colorMode === 'light' ? 'sun' : 'moon'"
31-
@click="toggleColorMode"
32-
>
33-
</CIconButton>
34-
<div class="wrapper">
3542
<slot />
36-
</div>
43+
</CFlex>
3744
</CBox>
3845
</CColorModeProvider>
3946
</CThemeProvider>
@@ -46,8 +53,10 @@ import {
4653
CReset,
4754
CButton,
4855
CBox,
56+
CFlex,
4957
CIconButton,
50-
CColorModeProvider } from '../../packages/chakra-ui-core/src'
58+
CColorModeProvider
59+
} from '../../packages/chakra-ui-core/src'
5160
5261
export default {
5362
name: 'Canvas',
@@ -57,32 +66,9 @@ export default {
5766
CReset,
5867
CButton,
5968
CBox,
69+
CFlex,
6070
CIconButton,
6171
CColorModeProvider
6272
}
6373
}
6474
</script>
65-
66-
<style lang="scss" scoped>
67-
html,
68-
body {
69-
margin: 0
70-
}
71-
.root {
72-
height: 100vh;
73-
width: 100vw;
74-
display: flex;
75-
flex-direction: column;
76-
justify-content: center;
77-
align-items: center;
78-
transition: all 0.2s ease-in-out;
79-
.wrapper {
80-
display: flex;
81-
flex-direction: column;
82-
justify-content: center;
83-
align-items: center;
84-
width: 100%;
85-
height: 100%
86-
}
87-
}
88-
</style>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const CAlertDialog = {
5555
type: Function,
5656
default: () => null
5757
},
58-
leastDestructiveRef: [HTMLElement, Object]
58+
leastDestructiveRef: [HTMLElement, Object, String, Function]
5959
},
6060
render (h, { slots, props, data }) {
6161
return h(CModal, {

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

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ const CMenu = {
9393
focusAtIndex: this.focusAtIndex,
9494
focusOnLastItem: this.focusOnLastItem,
9595
focusOnFirstItem: this.focusOnFirstItem,
96+
openMenu: this.openMenu,
9697
closeMenu: this.closeMenu,
9798
autoSelect: this.autoSelect,
9899
closeOnSelect: this.closeOnSelect,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const CTextarea = {
2626
name: 'CTextarea',
2727
functional: true,
2828
model: {
29-
prop: 'inputValue',
29+
prop: 'value',
3030
event: 'change'
3131
},
3232
props: {

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { CTextarea } from '../..'
2+
import { render, screen, userEvent } from '@/tests/test-utils'
3+
4+
const renderComponent = (props) => {
5+
const inlineAttrs = (props && props.inlineAttrs) || ''
6+
const base = {
7+
data: () => ({ text: 'hello' }),
8+
components: { CTextarea },
9+
template: `<CTextarea data-testid="textarea" placeholder="textarea placeholder" v-model="text" ${inlineAttrs}/>`,
10+
...props
11+
}
12+
return render(base)
13+
}
14+
15+
test('should render correctly', () => {
16+
const { asFragment } = renderComponent()
17+
expect(asFragment()).toMatchSnapshot()
18+
})
19+
20+
test('v-model works', () => {
21+
renderComponent()
22+
const textarea = screen.getByTestId('textarea')
23+
24+
userEvent.type(textarea, ' world')
25+
expect(textarea).toHaveValue('hello world')
26+
})
27+
28+
test('readonly textarea renders correctly', () => {
29+
renderComponent({ inlineAttrs: 'isReadOnly' })
30+
const textarea = screen.getByTestId('textarea')
31+
32+
expect(textarea).toHaveAttribute('readonly')
33+
})
34+
35+
test('disabled textarea renders correctly', () => {
36+
renderComponent({ inlineAttrs: 'isDisabled' })
37+
const textarea = screen.getByTestId('textarea')
38+
39+
expect(textarea).toHaveAttribute('disabled')
40+
})

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

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`should render correctly 1`] = `
4+
<DocumentFragment>
5+
.emotion-0 {
6+
width: 100%;
7+
display: -webkit-box;
8+
display: -webkit-flex;
9+
display: -ms-flexbox;
10+
display: flex;
11+
-webkit-align-items: center;
12+
-webkit-box-align: center;
13+
-ms-flex-align: center;
14+
align-items: center;
15+
position: relative;
16+
-webkit-transition: all 0.2s;
17+
transition: all 0.2s;
18+
outline: 2px solid transparent;
19+
outline-offset: 2px;
20+
-webkit-appearance: none;
21+
-moz-appearance: none;
22+
-ms-appearance: none;
23+
appearance: none;
24+
font-size: var(--chakra-fontSizes-md);
25+
-webkit-padding-start: var(--chakra-space-4);
26+
padding-inline-start: var(--chakra-space-4);
27+
-webkit-padding-end: var(--chakra-space-4);
28+
padding-inline-end: var(--chakra-space-4);
29+
height: var(--chakra-sizes-10);
30+
line-height: var(--chakra-lineHeights-shorter);
31+
border-radius: var(--chakra-radii-md);
32+
border-width: 1px;
33+
border-color: inherit;
34+
background: var(--chakra-colors-white);
35+
font-family: var(--chakra-fonts-body);
36+
padding-top: 8px;
37+
padding-bottom: 8px;
38+
min-height: 80px;
39+
}
40+
41+
.emotion-0[aria-readonly=true],
42+
.emotion-0[readonly],
43+
.emotion-0[data-readonly] {
44+
background: var(--chakra-colors-transparent);
45+
box-shadow: none!important;
46+
-webkit-user-select: all;
47+
-moz-user-select: all;
48+
-ms-user-select: all;
49+
user-select: all;
50+
}
51+
52+
.emotion-0:hover,
53+
.emotion-0[data-hover] {
54+
border-color: var(--chakra-colors-gray-300);
55+
}
56+
57+
.emotion-0[disabled],
58+
.emotion-0[aria-disabled=true],
59+
.emotion-0[data-disabled] {
60+
opacity: 0.4;
61+
cursor: not-allowed;
62+
}
63+
64+
.emotion-0:focus,
65+
.emotion-0[data-focus] {
66+
z-index: 1;
67+
border-color: #7db1ff;
68+
box-shadow: 0 0 0 1px #7db1ff;
69+
}
70+
71+
.emotion-0[aria-invalid=true],
72+
.emotion-0[data-invalid] {
73+
border-color: #e66673;
74+
box-shadow: 0 0 0 1px #e66673;
75+
}
76+
77+
<textarea
78+
class="emotion-0"
79+
data-chakra-component="CTextarea"
80+
data-testid="textarea"
81+
placeholder="textarea placeholder"
82+
/>
83+
</DocumentFragment>
84+
`;

‎packages/chakra-ui-nuxt/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"chakra-loader": "latest"
2626
},
2727
"peerDependencies": {
28-
"@nuxtjs/emotion": "^0.1.0",
28+
"@nuxtjs/emotion": "0.1.0",
2929
"defu": ">=6.0.0"
3030
},
3131
"devDependencies": {

‎website/pages/alertdialog.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,4 +120,4 @@ exception is that it requires a `leastDestructiveRef` which is similar to the
120120

121121
| Name | Type | Default | Description |
122122
| ------------------------------ | --------------------------------- | ------- | ------------------------------------------------------------- |
123-
| leastDestructiveRef (required) | `ref`, `selector` `Function: ref` | | The least destructive action to get focus when dialog is open |
123+
| leastDestructiveRef (required) | `vm.$ref`, `() => vm.ref` or `CSS selector` | | The least destructive action to get focus when dialog is open |

0 commit comments

Comments
 (0)