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

Commit eb64f90

Browse files
codebender828codebender828
committed
feat: button icon
1 parent 45885ea commit eb64f90

File tree

15 files changed

+230
-57
lines changed

15 files changed

+230
-57
lines changed

‎@types/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './jsx'

‎@types/jsx.d.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { CSSObject } from '@emotion/css'
2+
import { Theme } from '@chakra-ui/vue-theme'
3+
import { DOMElements } from '@chakra-ui/vue-system'
4+
import {
5+
ResponsiveValue,
6+
SystemProps,
7+
SystemStyleObject,
8+
} from '@chakra-ui/styled-system'
9+
import { VNodeChild } from 'vue'
10+
import { HTMLAttributes } from 'vue'
11+
12+
interface StyleResolverProps extends SystemProps {
13+
__css?: SystemStyleObject
14+
sx?: SystemStyleObject
15+
css?: CSSObject
16+
noOfLines?: ResponsiveValue<number>
17+
isTruncated?: boolean
18+
layerStyle?: string
19+
textStyle?: string
20+
apply?: ResponsiveValue<string>
21+
componentName?: String
22+
label?: string
23+
baseStyle?: SystemStyleObject
24+
/**
25+
* User provided styles from component/chakra API
26+
*/
27+
styles?: SystemStyleObject
28+
}
29+
interface ChakraPropsOptions extends StyleResolverProps {
30+
truncateStyle?: CSSObject
31+
theme?: Theme
32+
as?: DOMElements
33+
}
34+
35+
export type JSXNode = VNodeChild | JSX.Element
36+
export interface SlotDirective {
37+
[name: string]: () => JSXNode
38+
}
39+
40+
type JSXComponentCustomProps = {
41+
vModel?: unknown
42+
vModels?: unknown[]
43+
vCustom?: unknown[]
44+
vShow?: boolean
45+
vHtml?: JSXNode
46+
vSlots?: SlotDirective
47+
disabled?: boolean | string
48+
type?: string
49+
dataActive?: boolean | string
50+
dataLoading?: boolean | string
51+
} & Omit<HTMLAttributes, 'innerHTML'> & {
52+
innerHTML?: JSXNode
53+
} & Omit<HTMLAttributes, 'color'> & {
54+
color?: SystemProps['color']
55+
} & ChakraPropsOptions
56+
57+
declare global {
58+
export namespace JSX {
59+
export interface IntrinsicAttributes extends JSXComponentCustomProps {}
60+
}
61+
}

‎global.d.ts

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎packages/c-button/examples/with-button-icon.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<chakra.p mt="3" font-weight="bold">Left icon</chakra.p>
3+
<c-button mr="3" left-icon="email" color-scheme="blue">
4+
Base button
5+
</c-button>
6+
<chakra.p mt="3" font-weight="bold">Right icon</chakra.p>
7+
<c-button mr="3" right-icon="star" color-scheme="blue">
8+
Base button
9+
</c-button>
10+
</template>

‎packages/c-button/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"dependencies": {
2626
"@chakra-ui/styled-system": "^1.4.1",
2727
"@chakra-ui/vue-system": "*",
28-
"@chakra-ui/vue-utils": "*"
28+
"@chakra-ui/vue-utils": "*",
29+
"@chakra-ui/c-icon": "*"
2930
}
3031
}

‎packages/c-button/src/button.tsx renamed to ‎packages/c-button/src/button.ts

Lines changed: 55 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { h, defineComponent, PropType, computed, cloneVNode } from 'vue'
1+
import { defineComponent, PropType, computed, cloneVNode, h } from 'vue'
22
import {
33
chakra,
44
DOMElements,
@@ -12,6 +12,7 @@ import {
1212
import { ComponentThemeConfig } from '@chakra-ui/vue-theme'
1313
import { dataAttr, mergeWith } from '@chakra-ui/vue-utils'
1414
import { useButtonGroup } from './button-group'
15+
import { CIcon } from '@chakra-ui/c-icon'
1516

1617
type ButtonTypes = 'button' | 'reset' | 'submit'
1718

@@ -50,7 +51,7 @@ const props = {
5051

5152
/**
5253
* CButton
53-
*
54+
*
5455
* The Button component is used to trigger an action or event,
5556
* such as submitting a form, opening a dialog, canceling
5657
* an action, or performing a delete operation.
@@ -87,21 +88,35 @@ const CButton = defineComponent({
8788
...(!!group && { _focus }),
8889
}
8990

90-
return () => (
91-
<chakra.button
92-
// @ts-ignore JSX props error
93-
as={props.as}
94-
label="button"
95-
disabled={props.isDisabled || props.isLoading}
96-
type={props.as === 'button' ? undefined : props.type}
97-
dataActive={dataAttr(props.isActive)}
98-
dataLoading={dataAttr(props.isLoading)}
99-
{...buttonStyles}
100-
{...attrs}
101-
>
102-
{slots}
103-
</chakra.button>
104-
)
91+
return () =>
92+
h(
93+
chakra('button'),
94+
{
95+
as: props.as,
96+
label: 'button',
97+
disabled: props.isDisabled || props.isLoading,
98+
type: props.as === 'button' ? undefined : props.type,
99+
dataActive: dataAttr(props.isActive),
100+
dataLoading: dataAttr(props.isLoading),
101+
...buttonStyles,
102+
...attrs,
103+
},
104+
[
105+
props.leftIcon && !props.isLoading
106+
? h(CButtonIcon, {
107+
icon: props.leftIcon,
108+
marginEnd: props.iconSpacing,
109+
})
110+
: null,
111+
slots?.default?.({}),
112+
props.rightIcon && !props.isLoading
113+
? h(CButtonIcon, {
114+
icon: props.rightIcon,
115+
marginStart: props.iconSpacing,
116+
})
117+
: null,
118+
]
119+
)
105120
},
106121
})
107122

@@ -115,44 +130,43 @@ const CButtonSpinner = defineComponent({
115130
__css: Object as PropType<SystemStyleObject>,
116131
},
117132
setup(props, { attrs, slots }) {
118-
119133
const spinnerStyles: SystemStyleObject = {
120-
display: "flex",
121-
alignItems: "center",
122-
position: props.label ? "relative" : "absolute",
134+
display: 'flex',
135+
alignItems: 'center',
136+
position: props.label ? 'relative' : 'absolute',
123137
marginEnd: props.label ? props.spacing : 0,
124138
...props.__css,
125139
}
126-
return () => (
127-
// @ts-ignore JSX props error
128-
<chakra.div label="button__spinner" baseStyle={{}} {...attrs} __css={spinnerStyles}>
129-
{slots ?? slots}
130-
</chakra.div>
131-
)
140+
return () =>
141+
h(
142+
chakra.div,
143+
{
144+
label: 'button__spinner',
145+
__css: spinnerStyles,
146+
},
147+
slots ?? slots
148+
)
132149
},
133150
})
134151

135152
/**
136153
* CButtonIcon
137-
*
154+
*
138155
* Button icon component
139156
*/
140157
const CButtonIcon = defineComponent({
141158
name: 'CButtonIcon',
142-
setup(_, { slots, attrs }) {
143-
const children = slots?.default?.()
144-
const _children = children
145-
? cloneVNode(children?.[0], {
146-
'aria-hidden': true,
147-
focusable: false,
148-
})
149-
: children?.[0]
150-
159+
inheritAttrs: false,
160+
props: {
161+
icon: String as PropType<string>,
162+
},
163+
setup(props, { attrs }) {
151164
return () =>
152-
// @ts-ignore JSX props error
153-
<chakra.span as="button__icon" {...attrs}>
154-
{_children}
155-
</chakra.span>
165+
h(CIcon, {
166+
label: 'button__icon',
167+
name: props.icon,
168+
...attrs,
169+
})
156170
},
157171
})
158172

‎packages/c-button/tests/__snapshots__/c-button-group.test.ts.snap

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`should render properly 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="chakra-button__group css-p4lcqj"
7+
role="group"
8+
>
9+
<button
10+
as="button"
11+
class="css-kb8k9p"
12+
>
13+
<!---->
14+
Save
15+
<!---->
16+
</button>
17+
<button
18+
as="button"
19+
class="css-1vxhs68"
20+
>
21+
<!---->
22+
Cancel
23+
<!---->
24+
</button>
25+
</div>
26+
</DocumentFragment>
27+
`;

‎packages/c-button/tests/__snapshots__/c-button.test.ts.snap

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`should render properly 1`] = `
4+
<DocumentFragment>
5+
<button
6+
as="button"
7+
class="css-myeq6i"
8+
>
9+
<!---->
10+
Happy button
11+
<!---->
12+
</button>
13+
</DocumentFragment>
14+
`;

‎packages/c-button/tests/c-button-group.test.skip.ts renamed to ‎packages/c-button/tests/c-button-group.test.ts

File renamed without changes.

‎packages/c-button/tests/c-button.test.tsx renamed to ‎packages/c-button/tests/c-button.test.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { CButton } from '../src'
22
import { render, userEvent } from '../../test-utils/src'
3+
import { chakra } from '@chakra-ui/vue-system'
34

45
const renderComponent = (props?: any) => {
56
const base = {

0 commit comments

Comments
 (0)