fix: issues in the core package

- change the image to src in avatar component - add new animation utils to the core package - fix issue in the skeleton component
HamzaAmar · Nov 23, 2024 · bf484eb · bf484eb
1 parent ba17a27
commit bf484eb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/packages/pillar-core/src/core/avatar/avatar.type.ts b/packages/pillar-core/src/core/avatar/avatar.type.ts
@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react'
 import type { Color, Corner, CornerBlob, CornerHand, Size, Variant } from '../../types'
 
-type Animate = 'zoom' | 'jump-y' | 'jump-x'
+type Animate = 'zoom' | 'jump-y' | 'jump-x' | 'jump--y' | 'jump--x' | 'zoom-in'
 
 interface AvatarBase {
   size?: Size
@@ -14,7 +14,7 @@ interface AvatarBase {
 
 export interface AvatarProps extends AvatarBase {
   title?: string
-  image?: string
+  src?: string
 }
 
 export interface AvatarGroupProps extends AvatarBase {

diff --git a/packages/pillar-core/src/core/avatar/index.tsx b/packages/pillar-core/src/core/avatar/index.tsx
@@ -69,14 +69,14 @@ export const Avatar = forwardRef((props, forwardRef) => {
     corner = ctx?.corner,
     color = ctx?.color ?? 'p',
     fallback = ctx?.fallback ?? <User strokeWidth="1.5" width="max(1.5em, 10px)" />,
-    image = '',
+    src = '',
     className,
     title,
     onError,
     ...rest
   } = props
 
-  const [isError, setIsError] = useState(!image)
+  const [isError, setIsError] = useState(!src)
 
   const classNames = cx(`av- av-${variant} C-${color} S-e F-c`, {
     [`A-${animate}`]: animate,
@@ -93,7 +93,7 @@ export const Avatar = forwardRef((props, forwardRef) => {
       className="av-I"
       ref={(node) => {
         if (node) {
-          node.src = image
+          node.src = src
           node.onerror = () => {
             setIsError(true)
           }

diff --git a/packages/pillar-core/src/core/skeleton/index.tsx b/packages/pillar-core/src/core/skeleton/index.tsx
@@ -78,7 +78,7 @@ SkeletonButton.displayName = 'SkeletonButton'
 */
 
 export const Skeleton = forwardRef((props, ref) => {
-  const { height, as: Tag = 'div', className, isLoading, children, ...rest } = props
+  const { height, as: Tag = 'div', className = '', isLoading, children, ...rest } = props
 
   const classNames = cx(`sk- sk-B ${className}`, { [`Sh-${height}`]: height })
 

diff --git a/packages/pillar-core/src/css/utilities/_animation.css b/packages/pillar-core/src/css/utilities/_animation.css
@@ -1,15 +1,27 @@
 .A-zoom,
 .A-jump-x,
-.A-jump-y {
+.A-jump--x,
+.A-jump-y,
+.A-jump--y,
+.A-zoom-in {
   transition: transform 0.3s;
 }
 
 .A-zoom:hover {
   transform: scale(1.1);
 }
 .A-jump-y:hover {
-  transform: translateY(2px);
+  transform: translateY(3px);
 }
 .A-jump-x:hover {
-  transform: translateX(2px);
+  transform: translateX(3px);
+}
+.A-jump--x:hover {
+  transform: translateX(-3px);
+}
+.A-jump--y:hover {
+  transform: translateY(-3px);
+}
+.A-zoom-in:hover {
+  transform: scale(0.9);
 }