misc: Skeleton circular should use size className

getlago · Nov 15, 2024 · c17585c · c17585c
1 parent cd1b290
commit c17585c
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 31 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,16 +14,12 @@ 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
    */
   width?: never
-  /**
-   * @deprecated Use `className` and TailwindCSS instead
-   */
-  height?: never
   className?: string
   /**
    * @deprecated Use `className` and TailwindCSS instead
@@ -41,15 +37,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
   /**
@@ -95,30 +87,24 @@ export const Skeleton = ({
   marginRight,
   marginTop,
   width,
-  height,
 }: SkeletonConnectorProps | SkeletonGenericProps) => {
   return (
     <SkeletonContainer
       $marginRight={marginRight}
       $marginBottom={marginBottom}
       $marginTop={marginTop}
-      $height={size ? mapAvatarSize(size) : height}
       $width={size ? mapAvatarSize(size) : width}
       className={tw(skeletonStyles({ variant, color, size }), className)}
     />
   )
 }
 
 const SkeletonContainer = styled.div<{
-  $height?: number | string
   $width?: number | string
   $marginRight?: number | string
   $marginBottom?: number | string
   $marginTop?: number | string
 }>`
-  height: ${({ $height }) =>
-    !$height ? 0 : typeof $height === 'number' ? `${$height}px` : $height};
-
   width: ${({ $width }) =>
     !$width ? 0 : typeof $width === 'number' ? `${$width}px !important` : `${$width} !important`};
   margin-right: ${({ $marginRight }) =>

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/components/settings/PreviewEmailLayout.tsx b/src/components/settings/PreviewEmailLayout.tsx
@@ -51,13 +51,7 @@ export const PreviewEmailLayout: FC<PreviewEmailLayoutProps> = ({
         <div className="mb-12 flex w-full items-center">
           {isLoading ? (
             <>
-              <Skeleton
-                color="dark"
-                variant="circular"
-                width={40}
-                height={40}
-                marginRight={theme.spacing(4)}
-              />
+              <Skeleton color="dark" variant="circular" size="big" className="mr-4" />
               <div>
                 <Skeleton color="dark" variant="text" width={240} marginBottom={theme.spacing(2)} />
                 <Skeleton color="dark" variant="text" width={120} />

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>
                     ))}

diff --git a/src/pages/__devOnly/DesignSystem.tsx b/src/pages/__devOnly/DesignSystem.tsx
@@ -480,7 +480,7 @@ const DesignSystem = () => {
                   <Skeleton variant="userAvatar" size="large" />
                 </Block>
                 <div>
-                  <Skeleton className="mb-4 size-15" variant="circular" />
+                  <Skeleton className="mb-4" size="large" variant="circular" />
                   <Skeleton className="mb-4 h-3 w-30" variant="text" />
                   <Skeleton className="mb-4 h-3 w-1/2" variant="text" />
                   <Skeleton className="mb-4 h-3" variant="text" color="dark" />