refactor: rename placeholder to skeleton (#2217)

* refactor: rename placeholder to skeleton * fix: tests * fix: revert file
scaleway · Jan 25, 2023 · d639eb5 · d639eb5
1 parent a5c3a1c
commit d639eb5
Show file tree

Hide file tree

Showing 35 changed files with 3,064 additions and 3,064 deletions.
diff --git a/packages/ui/src/__tests__/a11y.test.tsx b/packages/ui/src/__tests__/a11y.test.tsx
@@ -17,7 +17,7 @@ const testedComponents = [
   'Carousel',
   'Checkbox',
   'MarkDown',
-  'Placeholder',
+  'Skeleton',
   'Separator',
   'Sphere',
   'Stack',

diff --git a/...rc/components/List/LoadingPlaceholder.tsx → ...i/src/components/List/LoadingSkeleton.tsx b/...rc/components/List/LoadingPlaceholder.tsx → ...i/src/components/List/LoadingSkeleton.tsx
@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react'
 import { useMemo } from 'react'
-import { Placeholder } from '../Placeholder'
+import { Skeleton } from '../Skeleton'
 import { Stack } from '../Stack'
 import type { ListColumn } from './types'
 
-type LoadingPlaceholderProps<DataType> = {
+type LoadingSkeletonProps<DataType> = {
   totalRows: number
   columns: ListColumn<DataType>[]
   Cell: ({ children }: { children: ReactNode }) => JSX.Element | null
@@ -13,12 +13,12 @@ type LoadingPlaceholderProps<DataType> = {
 
 export const DEFAULT_PLACEHOLDER_ROWS_COUNT = 3
 
-export const LoadingPlaceholder = <DataType,>({
+export const LoadingSkeleton = <DataType,>({
   totalRows,
   columns,
   Cell,
   Row,
-}: LoadingPlaceholderProps<DataType>) => {
+}: LoadingSkeletonProps<DataType>) => {
   const rows = useMemo(() => Array.from(Array(totalRows).keys()), [totalRows])
 
   return (
@@ -27,7 +27,7 @@ export const LoadingPlaceholder = <DataType,>({
         <Row id={index.toString()} key={index.toString()}>
           {columns.map(column => (
             <Cell key={column.label}>
-              {column.label ? <Placeholder variant="line" /> : null}
+              {column.label ? <Skeleton variant="line" /> : null}
             </Cell>
           ))}
         </Row>

diff --git a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
@@ -30212,55 +30212,55 @@ exports[`List should render correctly with isLoading 1`] = `
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
@@ -30288,55 +30288,55 @@ exports[`List should render correctly with isLoading 1`] = `
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
@@ -30364,55 +30364,55 @@ exports[`List should render correctly with isLoading 1`] = `
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
@@ -30440,55 +30440,55 @@ exports[`List should render correctly with isLoading 1`] = `
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
@@ -30516,55 +30516,55 @@ exports[`List should render correctly with isLoading 1`] = `
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>
             <div
               class="em5tn2e8 cache-cuqbnv-StyledCell-Cell e1ipwytk0"
             >
               <div
-                class="cache-bgbcvp-StyledContainer e3aa5lq1"
+                class="cache-bgbcvp-StyledContainer e181dehd1"
               >
                 <div
-                  class="cache-1r88wor-Line e15slp7a0"
+                  class="cache-1r88wor-Line e16zi9h40"
                 />
                 <div
-                  class="cache-q3qai6-StyledDiv e3aa5lq0"
+                  class="cache-q3qai6-StyledDiv e181dehd0"
                 />
               </div>
             </div>