misc: continue one Skeleton api migration (#1861)

* misc: migrate Skeleton API text to not use any height * misc: remove duplicate key * misc: Skeleton circular should use size className
getlago · Nov 18, 2024 · 08a8fc0 · 08a8fc0
1 parent 74ecb9f
commit 08a8fc0
Show file tree

Hide file tree

Showing 14 changed files with 33 additions and 54 deletions.
diff --git a/src/components/customerPortal/common/SectionLoading.tsx b/src/components/customerPortal/common/SectionLoading.tsx
@@ -127,7 +127,7 @@ export const LoaderInvoicesListTotal = () => (
 
 export const LoaderSidebarOrganization = () => (
   <div className="flex flex-col gap-8">
-    <Skeleton className="!rounded-[8px] bg-grey-200" variant="text" height={32} width={32} />
+    <Skeleton className="!rounded-[8px] bg-grey-200" variant="text" width={32} />
     <Skeleton className="bg-grey-200" variant="text" width={228} />
   </div>
 )

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/components/settings/integrations/IntegrationItemLine.tsx b/src/components/settings/integrations/IntegrationItemLine.tsx
@@ -40,7 +40,7 @@ const IntegrationItemLine = ({
           </Stack>
         </Stack>
 
-        <Skeleton variant="text" width={200} height={26} />
+        <Skeleton variant="text" width={200} />
       </SkeletonWrapper>
     )
   }

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

diff --git a/src/pages/InvoiceOverview.tsx b/src/pages/InvoiceOverview.tsx
@@ -236,10 +236,10 @@ const InvoiceOverview = memo(
               <LoadingInfosWrapper>
                 {[1, 2, 3, 4, 5].map((i) => (
                   <SkeletonLine key={`key-skeleton-line-${i}`}>
-                    <Skeleton variant="text" width="12%" height={13} marginRight="6.4%" />
-                    <Skeleton variant="text" width="38%" height={13} marginRight="11.2%" />
-                    <Skeleton variant="text" width="12%" height={13} marginRight="6.4%" />
-                    <Skeleton variant="text" width="38%" height={13} marginRight="9.25%" />
+                    <Skeleton variant="text" width="12%" marginRight="6.4%" />
+                    <Skeleton variant="text" width="38%" marginRight="11.2%" />
+                    <Skeleton variant="text" width="12%" marginRight="6.4%" />
+                    <Skeleton variant="text" width="38%" marginRight="9.25%" />
                   </SkeletonLine>
                 ))}
               </LoadingInfosWrapper>
@@ -249,19 +249,19 @@ const InvoiceOverview = memo(
                     {[1, 2, 3, 4, 5].map((k) => (
                       <tr key={`invoice-details-loading-${k}`}>
                         <td>
-                          <Skeleton variant="text" height={13} width={240} />
+                          <Skeleton variant="text" width={240} />
                         </td>
                         <td>
-                          <RightSkeleton variant="text" height={13} width={80} />
+                          <RightSkeleton variant="text" width={80} />
                         </td>
                         <td>
-                          <RightSkeleton variant="text" height={13} width={40} />
+                          <RightSkeleton variant="text" width={40} />
                         </td>
                         <td>
-                          <RightSkeleton variant="text" height={13} width={120} />
+                          <RightSkeleton variant="text" width={120} />
                         </td>
                         <td>
-                          <RightSkeleton variant="text" height={13} width={120} />
+                          <RightSkeleton variant="text" width={120} />
                         </td>
                       </tr>
                     ))}

diff --git a/src/pages/SubscriptionDetails.tsx b/src/pages/SubscriptionDetails.tsx
@@ -206,7 +206,7 @@ const SubscriptionDetails = () => {
         <PlanBlockInfos>
           {isSubscriptionLoading ? (
             <>
-              <Skeleton variant="text" width={200} height={16} marginBottom={18} />
+              <Skeleton variant="text" width={200} marginBottom={18} />
               <Skeleton variant="text" width={200} />
             </>
           ) : (

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" />

diff --git a/src/pages/settings/EmailScenarioConfig.tsx b/src/pages/settings/EmailScenarioConfig.tsx
@@ -186,7 +186,7 @@ const EmailScenarioConfig = () => {
                     marginBottom={theme.spacing(5)}
                   />
                   <Skeleton color="dark" variant="text" width={120} marginBottom={30} />
-                  <Skeleton color="dark" variant="text" width="100%" height={1} marginBottom={30} />
+                  <Skeleton color="dark" variant="text" width="100%" marginBottom={30} />
                   <LoadingBlock>
                     <Skeleton
                       color="dark"