Merge pull request #508 from omnifed/507-feat-add-none-option-to-avat…

…ar-gradient feat(react): add none option to gradients in avatar
omnifed · Sep 18, 2024 · e0f3286 · e0f3286
2 parents c1ec1de + 9fce6be
commit e0f3286
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/docs/app/react/avatar/components/live-playground.tsx b/docs/app/react/avatar/components/live-playground.tsx
@@ -7,7 +7,7 @@ import { gradientValues } from '@cerberus-design/panda-preset'
 import { Avatar } from '@cerberus-design/react'
 
 const api = {
-  gradient: builder.Enum('gradient', gradientValues),
+  gradient: builder.Enum('gradient', [...gradientValues, 'none']),
   size: builder.Enum('size', [
     'xs',
     'sm',

diff --git a/packages/panda-preset/src/recipes/avatar.ts b/packages/panda-preset/src/recipes/avatar.ts
@@ -27,7 +27,10 @@ export const avatar: RecipeConfig<RecipeVariantRecord> = defineRecipe({
   },
 
   variants: {
-    gradient: createGradientVariants(),
+    gradient: {
+      ...createGradientVariants(),
+      none: {},
+    },
     size: {
       xs: {
         fontSize: 'xs',

diff --git a/tests/panda-preset/recipes/avatar.test.ts b/tests/panda-preset/recipes/avatar.test.ts
@@ -53,6 +53,7 @@ describe('avatar recipe', () => {
         cerbGradient: 'red',
         color: 'danger.text.static',
       },
+      none: {},
     })
   })