misc: Skeleton circular should use size attribute

getlago · Nov 15, 2024 · 90bb269 · 90bb269
1 parent 592ffcf
commit 90bb269
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 15 deletions.
diff --git a/src/components/designSystem/Avatar.tsx b/src/components/designSystem/Avatar.tsx
@@ -7,7 +7,7 @@ import { Typography } from './Typography'
 
 import { colors } from '../../../tailwind.config'
 
-export type AvatarSize = 'small' | 'intermediate' | 'medium' | 'big' | 'large'
+export type AvatarSize = 'tiny' | 'small' | 'intermediate' | 'medium' | 'big' | 'large'
 type AvatarVariant = 'connector' | 'user' | 'company' | 'connector-full'
 
 interface AvatarConnectorProps {
@@ -30,6 +30,7 @@ export interface AvatarGenericProps {
 
 const mapTypographyVariant = (size: AvatarSize) => {
   switch (size) {
+    case 'tiny':
     case 'small':
     case 'intermediate':
       return 'noteHl'
@@ -78,6 +79,7 @@ const getBackgroundColorKey = (identifier?: string): keyof typeof colors.avatar
 }
 
 export const avatarSizeStyles: Record<AvatarSize, string> = {
+  tiny: cx('w-2 min-w-2 h-2 rounded'),
   small: cx('w-4 min-w-4 h-4 rounded'),
   intermediate: cx('w-6 min-w-6 h-6 rounded-lg'),
   medium: cx('w-8 min-w-8 h-8 rounded-xl'),

diff --git a/src/components/designSystem/Skeleton.tsx b/src/components/designSystem/Skeleton.tsx
@@ -14,7 +14,7 @@ type SkeletonVariant =
 type SkeletonColor = 'dark' | 'light'
 
 interface SkeletonConnectorProps {
-  variant: Extract<SkeletonVariant, 'userAvatar' | 'connectorAvatar'>
+  variant: Extract<SkeletonVariant, 'userAvatar' | 'connectorAvatar' | 'circular'>
   size: AvatarSize
   /**
    * @deprecated Use `className` and TailwindCSS instead
@@ -41,15 +41,11 @@ interface SkeletonConnectorProps {
 }
 
 interface SkeletonGenericProps {
-  variant: Extract<SkeletonVariant, 'text' | 'circular'>
+  variant: Extract<SkeletonVariant, 'text'>
   /**
    * @deprecated Use `className` and TailwindCSS instead
    */
   width?: number | string
-  /**
-   * @deprecated Use `className` and TailwindCSS instead
-   */
-  height?: number | string
   size?: never
   className?: string
   /**

diff --git a/src/components/form/ComboBox/ComboBox.tsx b/src/components/form/ComboBox/ComboBox.tsx
@@ -135,7 +135,7 @@ export const ComboBox = ({
         <LoadingIemsWrapper>
           {[1, 2, 3].map((i) => (
             <LoadingItem key={`combobox-loading-item-${i}`}>
-              <Skeleton variant="circular" width={16} height={16} marginRight="16px" />
+              <Skeleton variant="circular" size="small" marginRight="16px" />
               <Skeleton variant="text" width="100%" />
             </LoadingItem>
           ))}

diff --git a/src/components/graphs/Invoices.tsx b/src/components/graphs/Invoices.tsx
@@ -307,7 +307,7 @@ const Invoices = ({
                   <div>
                     {[...Array(3)].map((_, index) => (
                       <SkeletonLine key={`invoices-skeleton-${index}`}>
-                        <Skeleton variant="circular" width={8} height={8} />
+                        <Skeleton variant="circular" size="tiny" />
                         <Skeleton variant="text" width="32%" />
                         <Skeleton variant="text" width="32%" />
                       </SkeletonLine>

diff --git a/src/components/graphs/Usage.tsx b/src/components/graphs/Usage.tsx
@@ -239,7 +239,7 @@ const Usage = ({
                   <div>
                     {[...Array(3)].map((_, index) => (
                       <SkeletonLine key={`usage-skeleton-${index}`}>
-                        <Skeleton variant="circular" width={8} height={8} />
+                        <Skeleton variant="circular" size="tiny" />
                         <Skeleton variant="text" width="32%" />
                         <Skeleton variant="text" width="32%" />
                       </SkeletonLine>

diff --git a/src/components/plans/details/PlanSubscriptionListItem.tsx b/src/components/plans/details/PlanSubscriptionListItem.tsx
@@ -105,7 +105,7 @@ export const PlanSubscriptionListItemSkeleton = ({
   return (
     <SkeletonWrapper className={className}>
       <CustomerNameWrapper>
-        <Skeleton variant="circular" width={40} height={40} />
+        <Skeleton variant="circular" size="big" />
         <CustomerBlockInfos>
           <Skeleton variant="text" width={160} marginBottom={14} />
           <Skeleton variant="text" width={100} />

diff --git a/src/layouts/SideNavLayout.tsx b/src/layouts/SideNavLayout.tsx
@@ -225,13 +225,13 @@ const SideNav = () => {
               <VerticalMenu
                 loading={currentUserLoading}
                 loadingComponent={
-                  <div className="flex flex-1 flex-col gap-4">
+                  <div className="flex flex-1 gap-4">
                     {[1, 2, 3, 4, 5, 6, 7].map((i) => (
                       <div
                         key={`skeleton-upper-nav-${i}`}
                         className="flex flex-1 flex-row items-center gap-3 pt-3"
                       >
-                        <Skeleton variant="circular" width={16} height={16} />
+                        <Skeleton variant="circular" size="small" />
                         <Skeleton variant="text" width={120} />
                       </div>
                     ))}
@@ -312,8 +312,8 @@ const SideNav = () => {
                         direction={'row'}
                         paddingTop={3}
                       >
-                        <Skeleton variant="circular" width={16} height={16} />
-                        <Skeleton variant="text" width={120} />
+                        <Skeleton variant="circular" size="small" />
+                        <Skeleton variant="text" height={16} width={120} />
                       </Stack>
                     ))}
                   </Stack>