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

Commit a129e53

Browse files
codebender828codebender828
committed
chore: removed redundant attrs
1 parent 6aaffc7 commit a129e53

File tree

10 files changed

+39
-83
lines changed

10 files changed

+39
-83
lines changed

‎babel.config.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,5 @@ module.exports = {
33
'@vue/app',
44
'@babel/preset-env',
55
'@vue/babel-preset-jsx'
6-
],
7-
env: {
8-
test: {
9-
// plugins: ['transform-es2015-modules-commonjs']
10-
}
11-
}
6+
]
127
}

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,6 @@ import { storiesOf } from '@storybook/vue'
22
import { CBox, CAccordion, CAccordionItem, CAccordionHeader, CAccordionPanel, CAccordionIcon } from '..'
33

44
storiesOf('UI | Accordion', module)
5-
.add('Basic TEst', () => ({
6-
components: { CBox, CAccordion, CAccordionItem, CAccordionHeader, CAccordionPanel, CAccordionIcon },
7-
template: `
8-
<CAccordion>
9-
<CAccordionItem id="ac-1">
10-
<CAccordionHeader>Section 1 title<CAccordionIcon /></CAccordionHeader>
11-
<CAccordionPanel>Section 1 text</CAccordionPanel>
12-
</CAccordionItem>
13-
</CAccordion>
14-
`
15-
}))
165
.add('Basic Usage', () => ({
176
components: { CBox, CAccordion, CAccordionItem, CAccordionHeader, CAccordionPanel, CAccordionIcon },
187
template: `

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

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -23,47 +23,41 @@ import flexProps from '../CFlex/utils/flex.props.js'
2323
*/
2424
const CMoreAvatarLabel = {
2525
name: 'CMoreAvatarLabel',
26-
inheritAttrs: false,
27-
inject: ['$chakraTheme', '$chakraColorMode'],
26+
functional: true,
27+
inject: ['$chakraColorMode', '$chakraTheme'],
2828
props: {
2929
size: [String, Array],
3030
label: String,
3131
...flexProps
3232
},
33-
computed: {
34-
theme () {
35-
return this.$chakraTheme()
36-
},
37-
colorMode () {
38-
return this.$chakraColorMode()
39-
}
40-
},
41-
render (h) {
33+
render (h, { injections, props, data, ...rest }) {
34+
const { size, label, ...avatarProps } = props
35+
const colorMode = injections.$chakraColorMode()
36+
const theme = injections.$chakraTheme()
4237
const borderColor = { light: '#fff', dark: 'gray.800' }
4338
const bg = { light: 'gray.200', dark: 'whiteAlpha.400' }
44-
const sizeKey = avatarSizes[this.size]
45-
const _size = this.theme.sizes[sizeKey]
39+
const sizeKey = avatarSizes[size]
40+
const _size = theme.sizes[sizeKey]
4641
const fontSize = `calc(${_size} / 2.75)`
4742

4843
return h(CFlex, {
49-
props: {
44+
...rest,
45+
props: forwardProps(avatarProps),
46+
attrs: {
5047
align: 'center',
5148
justify: 'center',
52-
...forwardProps(this.$props)
53-
},
54-
attrs: {
55-
w: avatarSizes[this.size],
56-
h: avatarSizes[this.size],
57-
bg: bg[this.colorMode],
49+
h: avatarSizes[size],
50+
w: avatarSizes[size],
51+
bg: bg[colorMode],
5852
color: 'inherit',
5953
rounded: 'full',
6054
border: '2px',
61-
borderColor: borderColor[this.colorMode],
55+
borderColor: borderColor[colorMode],
6256
fontSize,
63-
...this.$attrs,
57+
...data.attrs,
6458
'data-chakra-component': 'CMoreAvatarLabel'
6559
}
66-
}, this.label)
60+
}, label)
6761
}
6862
}
6963

@@ -77,6 +71,7 @@ const CMoreAvatarLabel = {
7771
*/
7872
const CAvatarGroup = {
7973
name: 'CAvatarGroup',
74+
functional: true,
8075
props: {
8176
groupSize: {
8277
type: [Number, String, Array],
@@ -90,24 +85,24 @@ const CAvatarGroup = {
9085
},
9186
...flexProps
9287
},
93-
render (h) {
88+
render (h, { slots, props, data, ...rest }) {
9489
// Get the number of slot nodes inside AvatarGroup
95-
const children = this.$slots.default.filter(e => e.tag)
90+
const children = slots().default.filter(e => e.tag)
9691
const count = children.length
97-
const max = parseInt(this.max, 10)
92+
const max = parseInt(props.max, 10)
9893

9994
// Apply styles to slot VNodes.
10095
const clones = children.map((node, index) => {
10196
const isFirstAvatar = index === 0
102-
if (!this.max || (max && index < max)) {
97+
if (!props.max || (max && index < max)) {
10398
// Change VNode component options
10499
const { attrs } = node.data
105-
attrs.ml = isFirstAvatar ? 0 : this.spacing
106-
attrs.borderColor = this.borderColor || attrs.borderColor
100+
attrs.ml = isFirstAvatar ? 0 : props.spacing
101+
attrs.borderColor = props.borderColor || attrs.borderColor
107102
attrs.zIndex = count - index
108103

109104
const propsData = node.componentOptions
110-
propsData.size = this.groupSize
105+
propsData.size = props.groupSize
111106
propsData.showBorder = true
112107

113108
node.componentOptions.propsData = {
@@ -126,23 +121,25 @@ const CAvatarGroup = {
126121
if (max && index === max) {
127122
return h(CMoreAvatarLabel, {
128123
props: {
129-
size: this.groupSize,
124+
size: props.groupSize,
130125
label: `+${count - max}`
131126
},
132127
attrs: {
133-
ml: this.spacing
128+
ml: props.spacing
134129
}
135130
})
136131
}
137132
})
138133

139134
return h(CFlex, {
135+
...rest,
140136
props: {
141137
alignItems: 'center',
142-
...forwardProps()
138+
...forwardProps(props)
143139
},
144140
attrs: {
145141
zIndex: 0,
142+
...data.attrs,
146143
'data-chakra-component': 'CAvatarGroup'
147144
}
148145
}, clones)

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,8 @@ const CBreadcrumbLink = {
9898
class: this.className,
9999
props: forwardProps(this.$props),
100100
attrs: {
101-
...this.computedAttrs,
102101
'aria-current': this.isCurrentPage ? 'page' : null,
103-
'data-chakra-component': 'CBreadcrumbLink'
102+
...this.computedAttrs
104103
}
105104
}, this.$slots.default)
106105
}
@@ -162,10 +161,7 @@ const CBreadcrumbItem = {
162161

163162
return h('li', {
164163
class: this.className,
165-
attrs: {
166-
...this.computedAttrs,
167-
'data-chakra-component': 'CBreadcrumbItem'
168-
},
164+
attrs: this.computedAttrs,
169165
on: this.computedListeners
170166
}, [
171167
...clones,

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ const CButton = {
106106
disabled: this.isDisabled || this.isLoading,
107107
'aria-disabled': this.isDisabled || this.isLoading,
108108
dataActive: this.isActive ? 'true' : undefined,
109-
'data-chakra-component': 'CButton',
110109
...this.computedAttrs
111110
},
112111
on: {

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,7 @@ const CCheckboxGroup = {
107107
class: [this.className],
108108
attrs: {
109109
...this.computedAttrs,
110-
role: 'group',
111-
'data-chakra-component': 'CCheckboxGroup'
110+
role: 'group'
112111
}
113112
}, clones)
114113
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,8 @@ it('should change orientation', () => {
2626

2727
it('should have corresponding aria-orientation attribute', () => {
2828
const inlineAttrs = 'orientation="horizontal"'
29-
const { asFragment } = renderComponent({ inlineAttrs })
29+
renderComponent({ inlineAttrs })
3030

3131
const divider = screen.getByTestId('divider')
3232
expect(divider).toHaveAttribute('aria-orientation', 'horizontal')
33-
expect(asFragment()).toMatchSnapshot()
3433
})

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,7 @@ const CDrawer = {
8989
})
9090
},
9191
on: this.computedListeners,
92-
attrs: {
93-
...this.computedAttrs,
94-
'data-chakra-component': 'CDrawer'
95-
}
92+
attrs: this.computedAttrs
9693
}, this.$slots.default)
9794
}
9895
}

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -346,8 +346,7 @@ const CSliderTrack = {
346346
...this.computedAttrs,
347347
id: trackId,
348348
'data-slider-track': '',
349-
'aria-disabled': isDisabled,
350-
'data-chakra-component': 'CSliderTrack'
349+
'aria-disabled': isDisabled
351350
},
352351
on: this.computedListeners
353352
}, this.$slots.default)
@@ -385,8 +384,7 @@ const CSliderFilledTrack = {
385384
attrs: {
386385
...this.computedAttrs,
387386
'aria-disabled': isDisabled,
388-
'data-slider-filled-track': '',
389-
'data-chakra-component': 'CSliderFilledTrack'
387+
'data-slider-filled-track': ''
390388
},
391389
on: this.computedListeners
392390
}, this.$slots.default)
@@ -461,8 +459,7 @@ const CSliderThumb = {
461459
'aria-orientation': orientation,
462460
'aria-valuenow': value,
463461
'aria-valuemax': max,
464-
'aria-labelledby': ariaLabelledBy,
465-
'data-chakra-component': 'CSliderThumb'
462+
'aria-labelledby': ariaLabelledBy
466463
},
467464
on: {
468465
...this.computedListeners,

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

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -169,16 +169,6 @@ const CTooltip = {
169169
} else {
170170
const cloned = cloneVNode(children[0], h)
171171
if (cloned.componentOptions) {
172-
/**
173-
* For now consumer's need to use `.native` modifier on events
174-
* because we're cloning vnodes and I presently do not know how
175-
* to capture those events and log them.
176-
*
177-
* In the future it will be good to implement such.
178-
* -> We'd like to be able to wrap cloned VNode events with our
179-
* internal tooltips events.
180-
*/
181-
console.log(cloned)
182172
clone = h(cloned.componentOptions.Ctor, {
183173
...cloned.data,
184174
...(cloned.componentOptions.listeners || {}),
@@ -204,8 +194,6 @@ const CTooltip = {
204194
}
205195
}
206196

207-
console.log(this.$attrs)
208-
209197
return h(CFragment, [
210198
clone,
211199
h(CPopper, {

0 commit comments

Comments
 (0)