Merge pull request #54 from vitiacat/main

Fixed Chip
ZationRU · Jan 1, 2025 · c251105 · c251105
2 parents 5fcbf07 + 41aa108
commit c251105
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 27 deletions.
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -29,6 +29,7 @@ jobs:
       - name: Install and Build
         run: |
           yarn set version berry
+          yarn config set -H enableImmutableInstalls false
           yarn
           yarn run build
           yarn run build:styleguide

diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "typescript": "^4.9.5",
     "typescript-plugin-styled-components": "^2.0.0"
   },
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "yarn@4.6.0",
   "dependencies": {
     "@emotion/css": "^11.13.0"
   }

diff --git a/packages/chip/README.md b/packages/chip/README.md
@@ -1,4 +1,4 @@
-# ZnUI Radio component
+# ZnUI Chip component
 [![npm version](https://buttons.fury.io/js/@znui%2Fchip.svg)](https://buttons.fury.io/js/@znui%2Fchip)
 
 ## Documentation

diff --git a/packages/chip/src/Chip.tsx b/packages/chip/src/Chip.tsx
@@ -7,7 +7,6 @@ import {StateLayer, Tappable} from "@znui/ripple";
 import {znui, ZnUIStyleObject} from "@znui/base";
 
 export interface ChipProps extends LayoutProps {
-    mode?: 'outlined' | 'elevated' | 'filled'
     leading?: ReactElement
     avatar?: ReactElement
     trailingIcon?: ReactElement
@@ -29,16 +28,10 @@ export interface ChipProps extends LayoutProps {
     disabled?: boolean
 }
 
-const variantStyles: Record<keyof ChipProps['variant'], ZnUIStyleObject> = {
-    'outline': {},
-    'filled': {
-        bg: ThemeTokens.secondaryContainer,
-        borderColor: undefined,
-        border: undefined
-    },
-    'tonal': {
-        bg: ThemeTokens.onSurfaceVariant
-    }
+const variantBackgrounds: Record<keyof ChipProps['variant'], string> = {
+    'outline': 'transparent',
+    'filled': ThemeTokens.secondaryContainer,
+    'tonal':  ThemeTokens.onSurfaceVariant
 }
 
 /**
@@ -60,13 +53,19 @@ export const Chip = React.forwardRef(
             ...otherProps
         } = props
 
-        const finalVariant = useMemo(() => selected ? 'filled' : variant, [selected])
-        const finalLeading = useMemo(() => selected ? <znui.svg
-            xmlns="http://www.w3.org/2000/svg"
-            width={24} height={24} viewBox="0 0 24 24" fill="none"
-        >
-            <path d="M 7.4 11 L 10 13.6 L 16.6 7 L 18 8.4 L 10 16.4 L 10 16.4 L 6 12.4 L 7.4 11" fill={disabled ? ThemeTokens.onSurface : ThemeTokens.primary} />
-        </znui.svg> : leading, [selected, disabled])
+        const finalVariant = useMemo(() => selected ? 'filled' : variant, [selected, variant]);
+        const finalLeading = selected ? (
+            <znui.svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={24}
+                height={24}
+                viewBox="0 0 24 24"
+                fill="none"
+            >
+                <path d="M 7.4 11 L 10 13.6 L 16.6 7 L 18 8.4 L 10 16.4 L 10 16.4 L 6 12.4 L 7.4 11" fill={disabled ? ThemeTokens.onSurface : ThemeTokens.primary} />
+            </znui.svg>
+        ) : leading
+
 
         return <HStack
             pos='relative'
@@ -79,7 +78,7 @@ export const Chip = React.forwardRef(
             pr={trailingIcon ? 8 : 16}
             boxSizing='border-box'
             h='32px'
-            border='solid 1px'
+            border={variant != 'filled' ? 'solid 1px' : undefined}
             alignItems='center'
             borderColor={disabled && variant != 'outline' ? 'transparent' : ThemeTokens.outlineVariant}
             spacing={8}
@@ -93,11 +92,9 @@ export const Chip = React.forwardRef(
                     bg: 'currentColor'
                 },
             }}
-            {...variantStyles[finalVariant]}
-            bg='transparent'
             {...otherProps}
         >
-            <Layout pos='absolute' top={0} left={0} bg={disabled && finalVariant != 'outline' ? ThemeTokens.onSurfaceVariant : variantStyles[finalVariant]['bg']} oc={finalVariant == 'tonal' || disabled ? 0.12 : 1}
+            <Layout pos='absolute' top={0} left={0} bg={disabled && finalVariant != 'outline' ? ThemeTokens.onSurfaceVariant : variantBackgrounds[finalVariant]} oc={finalVariant == 'tonal' || disabled ? 0.12 : 1}
                     layoutSize='100%'/>
             {onClick && <StateLayer/>}
             {finalLeading && !avatar && <IconWrapper oc={disabled ? 0.38 : 1} zIndex={1} c={selected ? ThemeTokens.onSecondaryContainer : (disabled ? ThemeTokens.onSurface : ThemeTokens.primary)} size={18}>

diff --git a/packages/md3/package.json b/packages/md3/package.json
@@ -21,6 +21,7 @@
     "@znui/card": "^1.3.0-alpha",
     "@znui/carousel": "^1.3.0-alpha",
     "@znui/checkbox": "^1.3.0-alpha",
+    "@znui/chip": "^1.3.0-alpha",
     "@znui/coordinator-layout": "^1.3.0-alpha",
     "@znui/divider": "^1.3.0-alpha",
     "@znui/layouts": "^1.3.0-alpha",
@@ -46,8 +47,7 @@
     "@znui/text-fields": "^1.3.0-alpha",
     "@znui/tooltip": "^1.3.0-alpha",
     "@znui/typography": "^1.3.0-alpha",
-    "@znui/utils": "^1.3.0-alpha",
-    "@znui/chip": "^1.3.0-alpha"
+    "@znui/utils": "^1.3.0-alpha"
   },
   "peerDependencies": {
     "react": "^18.2.0",

diff --git a/yarn.lock b/yarn.lock
@@ -3097,7 +3097,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@znui/chip@workspace:packages/chip":
+"@znui/chip@npm:^1.3.0-alpha, @znui/chip@workspace:packages/chip":
   version: 0.0.0-use.local
   resolution: "@znui/chip@workspace:packages/chip"
   dependencies:
@@ -3365,6 +3365,7 @@ __metadata:
     "@znui/card": "npm:^1.3.0-alpha"
     "@znui/carousel": "npm:^1.3.0-alpha"
     "@znui/checkbox": "npm:^1.3.0-alpha"
+    "@znui/chip": "npm:^1.3.0-alpha"
     "@znui/coordinator-layout": "npm:^1.3.0-alpha"
     "@znui/divider": "npm:^1.3.0-alpha"
     "@znui/layouts": "npm:^1.3.0-alpha"