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

Commit 57bef48

Browse files
codebender828codebender828
committed
fix(tag): tag styles
1 parent b2d189c commit 57bef48

File tree

23 files changed

+107
-102
lines changed

23 files changed

+107
-102
lines changed

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
16.x

‎components.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2022-12-21T00:42:42.934Z
9+
* This file was generated on 2023-01-21T12:08:38.112Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"

‎cypress/support/component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import Chakra, {
2828
extendChakra,
2929
CReset,
3030
} from "@chakra-ui/vue-next"
31-
import { mode } from "@chakra-ui/vue-theme-tools"
31+
import { mode } from "@chakra-ui/theme-tools"
3232
import { feActivity, feUser } from "feather-icons-paths"
3333
import { h, Fragment, defineComponent } from "vue"
3434

‎lerna.json

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

‎packages/c-color-mode/src/color-mode.utils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const classNames = {
66
dark: "chakra-ui-dark",
77
}
88

9-
export type ColorModeRef = Ref<"light" | "dark">
9+
export type ColorModeRef = Ref<"light" | "dark" | "system">
1010

1111
/**
1212
* SSR: Graceful fallback for the `body` element

‎packages/c-spinner/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
},
3030
"dependencies": {
3131
"@chakra-ui/c-visually-hidden": "2.0.0-beta.0",
32+
"@chakra-ui/theme": "^2.2.4",
3233
"@chakra-ui/utils": "2.0.14",
3334
"@chakra-ui/vue-system": "2.0.0-beta.0",
3435
"@chakra-ui/vue-theme": "2.0.0-beta.0",

‎packages/c-tag/examples/base-tag.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
22
<c-stack>
3-
<chakra.div mb="3">
3+
<c-h-stack align="center" mb="3">
44
<c-tag mr="3" size="sm"> Sample Tag </c-tag>
55
<c-tag mr="3" size="md"> Sample Tag </c-tag>
66
<c-tag mr="3" size="lg"> Sample Tag </c-tag>
7-
</chakra.div>
7+
</c-h-stack>
88

9-
<chakra.div>
9+
<c-h-stack align="center">
1010
<c-tag mr="3" size="sm" colorScheme="teal"> Sample Tag </c-tag>
1111
<c-tag mr="3" size="md" colorScheme="teal"> Sample Tag </c-tag>
1212
<c-tag mr="3" size="lg" colorScheme="teal"> Sample Tag </c-tag>
13-
</chakra.div>
13+
</c-h-stack>
1414
</c-stack>
1515
</template>
1616
<script setup>

‎packages/c-tag/src/c-tag.tsx

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,17 @@
88
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
99
*/
1010

11-
import { h, defineComponent, PropType, DefineComponent, computed } from "vue"
11+
import { h, defineComponent, PropType, DefineComponent, computed, watchEffect } from "vue"
1212
import {
1313
chakra,
1414
ChakraProps,
1515
ComponentWithProps,
16+
createStylesContext,
1617
SystemStyleObject,
1718
ThemingProps,
1819
useMultiStyleConfig,
1920
} from "@chakra-ui/vue-system"
20-
import { CIcon } from "@chakra-ui/c-icon"
21+
import { CIcon, createIconComponent } from "@chakra-ui/c-icon"
2122
import { filterUndefined } from "@chakra-ui/utils"
2223
import { getValidChildren, vueThemingProps } from "@chakra-ui/vue-utils"
2324
interface TagOptions {
@@ -26,12 +27,14 @@ interface TagOptions {
2627

2728
export interface CTagProps
2829
extends ChakraProps,
29-
TagOptions,
30-
ThemingProps<"CTag"> {}
30+
TagOptions,
31+
ThemingProps<"CTag"> { }
3132

3233
export interface CTagLabelProps
3334
extends ChakraProps,
34-
ThemingProps<"CTagLabel"> {}
35+
ThemingProps<"CTagLabel"> { }
36+
37+
const [StylesProvider, useTagStyles] = createStylesContext("CTag")
3538

3639
export const CTagLabel: ComponentWithProps<CTagLabelProps> = defineComponent({
3740
props: {
@@ -46,7 +49,9 @@ export const CTagLabel: ComponentWithProps<CTagLabelProps> = defineComponent({
4649
styleConfig: props.styleConfig,
4750
})
4851
)
49-
const styles = useMultiStyleConfig("Tag", themingProps)
52+
53+
54+
const styles = useTagStyles()
5055

5156
return () => (
5257
<chakra.span __css={styles.value.label} noOfLines={1} {...attrs}>
@@ -58,7 +63,7 @@ export const CTagLabel: ComponentWithProps<CTagLabelProps> = defineComponent({
5863

5964
export interface CTagCloseButtonProps
6065
extends ChakraProps,
61-
ThemingProps<"CTagCloseButton"> {
66+
ThemingProps<"CTagCloseButton"> {
6267
isDisabled?: boolean
6368
}
6469

@@ -84,20 +89,22 @@ const CloseButtonProps = {
8489
...vueThemingProps,
8590
}
8691

92+
export const CTagCloseIcon = defineComponent((_, attrs) => {
93+
return () => (
94+
<CIcon verticalAlign="inherit" viewBox="0 0 512 512" {...attrs}>
95+
<path
96+
fill="currentColor"
97+
d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"
98+
/>
99+
</CIcon>
100+
)
101+
})
102+
87103
export const CTagCloseButton: ComponentWithProps<CTagCloseButtonProps> =
88104
defineComponent({
89105
props: CloseButtonProps,
90106
setup(props, { slots, attrs }) {
91-
const themingProps = computed<ThemingProps>(() =>
92-
filterUndefined({
93-
colorScheme: props.colorScheme,
94-
variant: props.variant,
95-
size: props.size,
96-
styleConfig: props.styleConfig,
97-
})
98-
)
99-
100-
const styles = useMultiStyleConfig("Tag", themingProps)
107+
const styles = useTagStyles()
101108

102109
const buttonStyles: SystemStyleObject = {
103110
display: "flex",
@@ -117,7 +124,7 @@ export const CTagCloseButton: ComponentWithProps<CTagCloseButtonProps> =
117124
>
118125
{slots.default
119126
? () => getValidChildren(slots)
120-
: () => <CIcon name="close" />}
127+
: () => <CTagCloseIcon />}
121128
</chakra.button>
122129
)
123130
},
@@ -134,10 +141,17 @@ export const CTag: ComponentWithProps<CTagProps> = defineComponent({
134141
styleConfig: props.styleConfig,
135142
})
136143
)
137-
const styles = useMultiStyleConfig("Tag", themingProps)
144+
145+
const styles = useMultiStyleConfig("Tag", themingProps.value)
146+
147+
StylesProvider(styles)
148+
138149
const tagContainerStyles = computed<SystemStyleObject>(() => ({
139-
...styles.value?.container,
140-
bg: props.variantColor ?? styles.value?.container?.bg,
150+
display: "inline-flex",
151+
verticalAlign: "top",
152+
alignItems: "center",
153+
maxWidth: "100%",
154+
...styles.value.container,
141155
}))
142156

143157
return () => (

‎packages/c-theme-provider/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"clean": "rimraf dist"
2121
},
2222
"dependencies": {
23+
"@chakra-ui/theme": "^2.2.4",
2324
"@chakra-ui/vue-theme": "2.0.0-beta.0"
2425
},
2526
"devDependencies": {

‎packages/core/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"@chakra-ui/c-theme-provider": "2.0.0-beta.0",
5050
"@chakra-ui/c-visually-hidden": "2.0.0-beta.0",
5151
"@chakra-ui/styled-system": "^2.2.2",
52+
"@chakra-ui/theme-tools": "^2.0.16",
5253
"@chakra-ui/theme-utils": "^2.0.6",
5354
"@chakra-ui/utils": "2.0.14",
5455
"@chakra-ui/vue-a11y": "2.0.0-beta.0",

0 commit comments

Comments
 (0)