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

Commit 83a8054

Browse files
codebender828codebender828
committed
refactor: progress, radio, radiogroup and radiobuttongroup components
1 parent 3edb2ba commit 83a8054

File tree

10 files changed

+320
-81
lines changed

10 files changed

+320
-81
lines changed

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
*/
1212

1313
import { SNA } from '../config/props/props.types'
14-
import { baseProps } from '../config'
15-
import { isDef, useId, cleanChildren, cloneVNodeElement, forwardProps } from '../utils'
14+
import { isDef, useId, cleanChildren, cloneVNodeElement, createStyledAttrsMixin } from '../utils'
1615

1716
import CBox from '../CBox'
1817

@@ -25,13 +24,12 @@ import CBox from '../CBox'
2524
* @see Docs https://vue.chakra-ui.com/button
2625
*/
2726
const CCheckboxGroup = {
28-
name: 'CCheckboxGroup',
27+
mixins: [createStyledAttrsMixin('CCheckboxGroup')],
2928
model: {
3029
prop: 'value',
3130
event: 'change'
3231
},
3332
props: {
34-
...baseProps,
3533
name: String,
3634
variantColor: String,
3735
size: String,
@@ -98,16 +96,17 @@ const CCheckboxGroup = {
9896
}, h)
9997

10098
return h(CBox, {
101-
props: {
99+
attrs: {
102100
display: this.isInline ? 'inline-block' : 'block',
103101
...(!isLastCheckbox && spacingProps)
104102
}
105103
}, [el])
106104
})
107105

108-
return h(CBox, {
109-
props: forwardProps(this.$props),
106+
return h('div', {
107+
class: [this.className],
110108
attrs: {
109+
...this.computedAttrs,
111110
role: 'group',
112111
'data-chakra-component': 'CCheckboxGroup'
113112
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const CProgressLabel = {
4343
return h(CBox, {
4444
...rest,
4545
props: {
46-
as: data.attrs.as
46+
as: (data.attrs && data.attrs.as) || 'div'
4747
},
4848
attrs: {
4949
textAlign: 'center',
@@ -77,8 +77,8 @@ const CProgressTrack = {
7777
height: progressbarSizes[props.size || 'md'],
7878
overflow: 'hidden',
7979
w: '100%',
80-
...data.attrs,
81-
'data-chakra-component': 'CProgressTrack'
80+
'data-chakra-component': 'CProgressTrack',
81+
...data.attrs
8282
}
8383
}, slots().default)
8484
}

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

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,34 @@
22

33
exports[`should render correctly 1`] = `
44
<DocumentFragment>
5-
<div
6-
class="css-w3ffhx"
5+
.emotion-1 {
6+
position: relative;
7+
height: 0.5rem;
8+
overflow: hidden;
9+
width: 100%;
10+
background-color: #EDF2F7;
11+
border-radius: 0.125rem;
12+
}
13+
14+
.emotion-0 {
15+
height: 100%;
16+
-webkit-transition: all 0.3s;
17+
transition: all 0.3s;
18+
width: 40%;
19+
background-color: #3ea76a;
20+
border-radius: 0.125rem;
21+
}
22+
23+
<div
24+
class="emotion-1"
725
data-chakra-component="CProgress"
826
data-testid="progress"
927
>
1028
<div
1129
aria-valuemax="100"
1230
aria-valuemin="0"
1331
aria-valuenow="40"
14-
class="css-1dfb4kd"
32+
class="emotion-0"
1533
data-chakra-component="CProgressIndicator"
1634
role="progressbar"
1735
/>

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

Lines changed: 24 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88
* @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CRadio/CRadio.js
99
*/
1010

11-
import styleProps from '../config/props'
12-
import { useVariantColorWarning, forwardProps } from '../utils'
11+
import { useVariantColorWarning, createStyledAttrsMixin, useId } from '../utils'
1312
import useCheckboxStyle from '../CCheckbox/utils/checkbox.styles'
1413
import CBox from '../CBox'
1514
import CVisuallyHidden from '../CVisuallyHidden'
@@ -24,14 +23,12 @@ import CControlBox from '../CControlBox'
2423
* @see Docs https://vue.chakra-ui.com/radio
2524
*/
2625
const CRadio = {
27-
name: 'CRadio',
26+
mixins: [createStyledAttrsMixin('CRadio')],
2827
model: {
2928
prop: 'isChecked',
3029
event: 'checked'
3130
},
32-
inject: ['$chakraColorMode', '$chakraTheme'],
3331
props: {
34-
...styleProps,
3532
id: String,
3633
name: String,
3734
value: String,
@@ -52,12 +49,6 @@ const CRadio = {
5249
isInvalid: Boolean
5350
},
5451
computed: {
55-
colorMode () {
56-
return this.$chakraColorMode()
57-
},
58-
theme () {
59-
return this.$chakraTheme()
60-
},
6152
radioStyles () {
6253
useVariantColorWarning(this.theme, 'Radio', this.variantColor)
6354
return useCheckboxStyle({
@@ -66,6 +57,18 @@ const CRadio = {
6657
colorMode: this.colorMode,
6758
type: 'radio'
6859
})
60+
},
61+
componentStyles () {
62+
return {
63+
display: 'inline-flex',
64+
verticalAlign: 'top',
65+
alignItems: 'center',
66+
width: this.isFullWidth ? 'full' : undefined,
67+
cursor: this.isDisabled ? 'not-allowed' : 'pointer'
68+
}
69+
},
70+
_id () {
71+
return this.id || `radio-${useId(4)}`
6972
}
7073
},
7174
mounted () {
@@ -75,22 +78,11 @@ const CRadio = {
7578
},
7679
render (h) {
7780
const children = this.$slots.default
78-
79-
return h(CBox, {
80-
props: {
81-
as: 'label',
82-
display: 'inline-flex',
83-
verticalAlign: 'top',
84-
alignItems: 'center',
85-
width: this.isFullWidth ? 'full' : undefined,
86-
cursor: this.isDisabled ? 'not-allowed' : 'pointer',
87-
...forwardProps(this.$props)
88-
},
81+
return h('label', {
82+
class: [this.className],
8983
attrs: {
90-
'data-chakra-component': 'CRadio'
91-
},
92-
domProps: {
93-
for: this.id
84+
for: this.id,
85+
...this.computedAttrs
9486
}
9587
}, [
9688
h(CVisuallyHidden, {
@@ -102,7 +94,6 @@ const CRadio = {
10294
value: this.value
10395
},
10496
attrs: {
105-
...this.$attrs,
10697
type: 'radio',
10798
'aria-label': this.ariaLabel,
10899
'aria-labelledby': this.ariaLabelledBy,
@@ -120,18 +111,17 @@ const CRadio = {
120111
}
121112
}),
122113
h(CControlBox, {
123-
props: {
124-
...forwardProps(this.$props),
125-
...this.radioStyles,
126-
rounded: 'full'
127-
},
128114
attrs: {
115+
...this.radioStyles,
116+
rounded: 'full',
129117
type: 'radio'
130118
}
131119
}, [
132120
h(CBox, {
133121
props: {
134-
as: 'span',
122+
as: 'span'
123+
},
124+
attrs: {
135125
bg: 'currentColor',
136126
rounded: 'full',
137127
w: '50%',
@@ -140,7 +130,7 @@ const CRadio = {
140130
})
141131
]),
142132
children && h(CBox, {
143-
props: {
133+
attrs: {
144134
ml: 2,
145135
fontSize: this.size,
146136
fontFamily: 'body',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ storiesOf('UI | Radio', module)
4444
.add('default is checked', () => ({
4545
components: { CFragment, CRadioGroup, CRadio, CStack },
4646
template: `
47-
<c-stack spacing="10">
47+
<c-stack spacing="10" is-inline>
4848
<c-radio-group :spacing="4" v-model="vertical">
4949
<c-radio size="sm" value="sm" name="1" variant-color="red">
5050
Radio

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

Lines changed: 115 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,137 @@
22

33
exports[`should render correctly 1`] = `
44
<DocumentFragment>
5-
<label
6-
class="css-109vd24"
5+
.emotion-5 {
6+
display: -webkit-inline-box;
7+
display: -webkit-inline-flex;
8+
display: -ms-inline-flexbox;
9+
display: inline-flex;
10+
vertical-align: top;
11+
-webkit-align-items: center;
12+
-webkit-box-align: center;
13+
-ms-flex-align: center;
14+
align-items: center;
15+
cursor: pointer;
16+
}
17+
18+
.emotion-0 {
19+
border: 0px;
20+
-webkit-clip: rect(0px,0px,0px,0px);
21+
clip: rect(0px,0px,0px,0px);
22+
height: 1px;
23+
width: 1px;
24+
margin: -1px;
25+
padding: 0px;
26+
overflow: hidden;
27+
white-space: nowrap;
28+
position: absolute;
29+
}
30+
31+
input[type=radio]:focus + .emotion-3 {
32+
box-shadow: 0 0 0 3px rgba(66,153,225,0.6);
33+
}
34+
35+
input[type=radio]:disabled + .emotion-3 {
36+
background-color: #EDF2F7;
37+
border-color: #EDF2F7;
38+
}
39+
40+
input[type=radio][aria-invalid=true] + .emotion-3 {
41+
border-color: #c42231;
42+
}
43+
44+
input[type=radio]:checked:disabled + .emotion-3,
45+
input[type=radio][aria-checked=mixed]:disabled + .emotion-3 {
46+
border-color: #E2E8F0;
47+
background-color: #E2E8F0;
48+
color: #718096;
49+
}
50+
51+
.emotion-3 > * {
52+
opacity: 0;
53+
}
54+
55+
input[type=radio]:checked + .emotion-3,
56+
input[type=radio][aria-checked=mixed] + .emotion-3 {
57+
background-color: #0058e6;
58+
border-color: #0058e6;
59+
}
60+
61+
input[type=radio]:checked + .emotion-3 > *,
62+
input[type=radio][aria-checked=mixed] + .emotion-3 > * {
63+
opacity: 1;
64+
}
65+
66+
.emotion-2 {
67+
display: -webkit-inline-box;
68+
display: -webkit-inline-flex;
69+
display: -ms-inline-flexbox;
70+
display: inline-flex;
71+
-webkit-align-items: center;
72+
-webkit-box-align: center;
73+
-ms-flex-align: center;
74+
align-items: center;
75+
-webkit-box-pack: center;
76+
-webkit-justify-content: center;
77+
-ms-flex-pack: center;
78+
justify-content: center;
79+
-webkit-transition: background-color 120ms,box-shadow 250ms;
80+
transition: background-color 120ms,box-shadow 250ms;
81+
-webkit-flex-shrink: 0;
82+
-ms-flex-negative: 0;
83+
flex-shrink: 0;
84+
width: 1rem;
85+
height: 1rem;
86+
-webkit-user-select: none;
87+
-moz-user-select: none;
88+
-ms-user-select: none;
89+
user-select: none;
90+
border: 2px solid;
91+
border-radius: 9999px;
92+
border-color: inherit;
93+
color: #fff;
94+
}
95+
96+
.emotion-1 {
97+
background-color: currentColor;
98+
border-radius: 9999px;
99+
width: 50%;
100+
height: 50%;
101+
}
102+
103+
.emotion-4 {
104+
margin-left: 0.5rem;
105+
font-size: 1rem;
106+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
107+
-webkit-user-select: none;
108+
-moz-user-select: none;
109+
-ms-user-select: none;
110+
user-select: none;
111+
opacity: 1;
112+
}
113+
114+
<label
115+
class="emotion-5"
7116
data-chakra-component="CRadio"
8117
>
9118
<input
10-
class="css-fzcsno css-f8n5zr"
119+
class="emotion-0"
11120
data-chakra-component="CVisuallyHidden"
12121
type="radio"
13122
value=""
14123
/>
15124
<div
16125
aria-hidden="true"
17-
class="css-1ht8nam css-aufuif"
126+
class="emotion-2 emotion-3"
18127
data-chakra-component="CControlBox"
19128
>
20129
<span
21-
class="css-1luw7uj"
130+
class="emotion-1"
22131
data-chakra-component="CBox"
23132
/>
24133
</div>
25134
<div
26-
class="css-np4rym"
135+
class="emotion-4"
27136
data-chakra-component="CBox"
28137
>
29138
radio

0 commit comments

Comments
 (0)