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

Commit 075f0f2

Browse files
codebender828codebender828
committed
feat(button-group): add button group
1 parent 6f8e1c1 commit 075f0f2

File tree

9 files changed

+106
-20
lines changed

9 files changed

+106
-20
lines changed

‎packages/c-button/examples/with-attached-buttons.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<c-button-group variant="outline" is-attached>
3+
<c-button color-scheme="blue">Save</c-button>
4+
<c-button>Cancel</c-button>
5+
</c-button-group>
6+
</template>
7+
8+
<script lang="ts">
9+
import { CButton, CButtonGroup } from '@chakra-ui/c-button/src'
10+
import { defineComponent } from 'vue'
11+
12+
export default defineComponent({
13+
components: { CButton, CButtonGroup },
14+
})
15+
</script>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<c-button-group variant="outline">
3+
<c-button color-scheme="blue">Save</c-button>
4+
<c-button>Cancel</c-button>
5+
</c-button-group>
6+
</template>
7+
8+
<script lang="ts">
9+
import { CButton, CButtonGroup } from '@chakra-ui/c-button/src'
10+
import { defineComponent } from 'vue'
11+
12+
export default defineComponent({
13+
components: { CButton, CButtonGroup },
14+
})
15+
</script>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<c-button mr="3" variant="solid" color-scheme="teal"> Solid </c-button>
3+
<c-button mr="3" variant="outline" color-scheme="teal"> Outline </c-button>
4+
<c-button mr="3" variant="ghost" color-scheme="teal"> Ghost </c-button>
5+
<c-button mr="3" variant="link" color-scheme="teal"> Link </c-button>
6+
</template>
7+
8+
<script lang="ts">
9+
import { CButton } from '@chakra-ui/c-button/src'
10+
import { defineComponent } from 'vue'
11+
12+
export default defineComponent({
13+
components: { CButton },
14+
})
15+
</script>

‎packages/c-button/src/button-group.ts

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ export interface ButtonGroupProps extends ThemingProps {
2828
const props = {
2929
isAttached: Boolean as PropType<ButtonGroupProps['isAttached']>,
3030
isDisabled: Boolean as PropType<ButtonGroupProps['isDisabled']>,
31-
spacing: [String, Number, Array] as PropType<ButtonGroupProps['spacing']>,
31+
spacing: {
32+
type: [String, Number, Array] as PropType<ButtonGroupProps['spacing']>,
33+
default: 3,
34+
},
3235
variant: {
3336
type: String as PropType<string>,
3437
default: 'solid',
@@ -52,10 +55,10 @@ const [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(
5255
}
5356
)
5457

55-
export const CButtonGroup = defineComponent({
58+
const CButtonGroup = defineComponent({
5659
name: 'CButtonGroup',
5760
props,
58-
setup(props, { slots }) {
61+
setup(props, { attrs, slots }) {
5962
ButtonGroupProvider({
6063
size: props.size,
6164
colorScheme: props.colorScheme,
@@ -85,6 +88,18 @@ export const CButtonGroup = defineComponent({
8588
return groupStyles
8689
})
8790

88-
return () => h(chakra.div)
91+
return () =>
92+
h(
93+
chakra('div', { label: 'button__group' }),
94+
{
95+
__css: styles.value,
96+
role: 'group',
97+
...attrs,
98+
},
99+
slots
100+
)
89101
},
90102
})
103+
104+
export default CButtonGroup
105+
export { useButtonGroup }

‎packages/c-button/src/button.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import {
1010
SystemStyleObject,
1111
} from '@chakra-ui/styled-system'
1212
import { ComponentThemeConfig } from '@chakra-ui/vue-theme'
13-
import { dataAttr } from '@chakra-ui/vue-utils'
13+
import { dataAttr, mergeWith } from '@chakra-ui/vue-utils'
14+
import { useButtonGroup } from './button-group'
1415

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

@@ -60,7 +61,10 @@ const CButton = defineComponent({
6061
styleConfig: props.styleConfig,
6162
}))
6263

63-
const styles = useStyleConfig('Button', themingProps.value)
64+
const group = useButtonGroup()
65+
const styles = useStyleConfig('Button', { ...group, ...themingProps.value })
66+
67+
const _focus = mergeWith({}, styles.value?.['_focus'] ?? {}, { zIndex: 1 })
6468

6569
const buttonStyles: SystemStyleObject = {
6670
display: 'inline-flex',
@@ -75,6 +79,7 @@ const CButton = defineComponent({
7579
outline: 'none',
7680
width: props.isFullWidth ? '100%' : 'auto',
7781
...styles.value,
82+
...(!!group && { _focus }),
7883
}
7984

8085
return () =>

‎packages/c-button/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { default as CButton } from './button'
2+
export { default as CButtonGroup } from './button-group'

‎packages/system/src/chakra.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
import {
1111
css,
1212
ResponsiveValue,
13-
SystemCSSProperties,
1413
SystemProps,
1514
SystemStyleObject,
1615
} from '@chakra-ui/styled-system'
@@ -117,7 +116,7 @@ export type ChakraBaseComponentProps = typeof chakraProps
117116
// @ts-expect-error
118117
export const chakra: IChakraFactory = (
119118
tag: DOMElements & Component,
120-
options: StyleResolverProps
119+
options: ChakraFactoryOptions
121120
): DefineComponent => {
122121
return defineComponent({
123122
inheritAttrs: false,

‎playground/src/.generated/imports.js

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,30 @@ import Component_4 from '@chakra-ui/c-alert/examples/with-icon.vue'
55
import Component_5 from '@chakra-ui/c-alert/examples/with-status.vue'
66
import Component_6 from '@chakra-ui/c-alert/examples/with-title.vue'
77
import Component_7 from '@chakra-ui/c-button/examples/base-button.vue'
8-
import Component_8 from '@chakra-ui/c-button/examples/with-button-size.vue'
9-
import Component_9 from '@chakra-ui/c-icon/examples/base-icon.vue'
10-
import Component_10 from '@chakra-ui/c-icon/examples/with-color.vue'
11-
import Component_11 from '@chakra-ui/c-icon/examples/with-icon-library.vue'
12-
import Component_12 from '@chakra-ui/c-icon/examples/with-size.vue'
13-
import Component_13 from "../components/Home.vue";
8+
import Component_8 from '@chakra-ui/c-button/examples/with-attached-buttons.vue'
9+
import Component_9 from '@chakra-ui/c-button/examples/with-button-group.vue'
10+
import Component_10 from '@chakra-ui/c-button/examples/with-button-size.vue'
11+
import Component_11 from '@chakra-ui/c-button/examples/with-button-variants.vue'
12+
import Component_12 from '@chakra-ui/c-icon/examples/base-icon.vue'
13+
import Component_13 from '@chakra-ui/c-icon/examples/with-color.vue'
14+
import Component_14 from '@chakra-ui/c-icon/examples/with-icon-library.vue'
15+
import Component_15 from '@chakra-ui/c-icon/examples/with-size.vue'
16+
import Component_16 from "../components/Home.vue";
1417

1518
export default {
16-
"../components/Home.vue": Component_13,
19+
"../components/Home.vue": Component_16,
1720
"@chakra-ui/c-alert/examples/base-alert.vue": Component_2,
1821
"@chakra-ui/c-alert/examples/with-accent.vue": Component_3,
1922
"@chakra-ui/c-alert/examples/with-icon.vue": Component_4,
2023
"@chakra-ui/c-alert/examples/with-status.vue": Component_5,
2124
"@chakra-ui/c-alert/examples/with-title.vue": Component_6,
2225
"@chakra-ui/c-button/examples/base-button.vue": Component_7,
23-
"@chakra-ui/c-button/examples/with-button-size.vue": Component_8,
24-
"@chakra-ui/c-icon/examples/base-icon.vue": Component_9,
25-
"@chakra-ui/c-icon/examples/with-color.vue": Component_10,
26-
"@chakra-ui/c-icon/examples/with-icon-library.vue": Component_11,
27-
"@chakra-ui/c-icon/examples/with-size.vue": Component_12
26+
"@chakra-ui/c-button/examples/with-attached-buttons.vue": Component_8,
27+
"@chakra-ui/c-button/examples/with-button-group.vue": Component_9,
28+
"@chakra-ui/c-button/examples/with-button-size.vue": Component_10,
29+
"@chakra-ui/c-button/examples/with-button-variants.vue": Component_11,
30+
"@chakra-ui/c-icon/examples/base-icon.vue": Component_12,
31+
"@chakra-ui/c-icon/examples/with-color.vue": Component_13,
32+
"@chakra-ui/c-icon/examples/with-icon-library.vue": Component_14,
33+
"@chakra-ui/c-icon/examples/with-size.vue": Component_15
2834
}

‎playground/src/.generated/routes.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,25 @@
4444
"path": "/c-button/base-button",
4545
"component": "@chakra-ui/c-button/examples/base-button.vue"
4646
},
47+
{
48+
"name": "With attached buttons",
49+
"path": "/c-button/with-attached-buttons",
50+
"component": "@chakra-ui/c-button/examples/with-attached-buttons.vue"
51+
},
52+
{
53+
"name": "With button group",
54+
"path": "/c-button/with-button-group",
55+
"component": "@chakra-ui/c-button/examples/with-button-group.vue"
56+
},
4757
{
4858
"name": "With button size",
4959
"path": "/c-button/with-button-size",
5060
"component": "@chakra-ui/c-button/examples/with-button-size.vue"
61+
},
62+
{
63+
"name": "With button variants",
64+
"path": "/c-button/with-button-variants",
65+
"component": "@chakra-ui/c-button/examples/with-button-variants.vue"
5166
}
5267
]
5368
},

0 commit comments

Comments
 (0)