chore: update spinner to v4 design (#16603)

Update spinner to v4:
- add new 32px size
- update colour
- add to `v4` test suite

---------

Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>

Author: JessRynkar

packages/ui/src/elements/Hierarchy/ColumnBrowser/Column/index.tsx

@@ -88,7 +88,7 @@ export const Column: React.FC<ColumnProps> = ({
 
         {isLoading && (
           <div className={`${baseClass}__loading`}>
-            <Spinner loadingText={null} size="small" />
+            <Spinner loadingText={null} size="sm" />
           </div>
         )}
 

packages/ui/src/elements/Hierarchy/Field/SelectedHierarchies.tsx

@@ -126,7 +126,7 @@ export const SelectedHierarchies: React.FC<SelectedHierarchiesProps> = ({
   if (isInitialLoad) {
     return (
       <div className={`${baseClass}__loading`}>
-        <Spinner size="small" />
+        <Spinner size="sm" />
       </div>
     )
   }

packages/ui/src/elements/Hierarchy/Tree/TreeNode/index.tsx

@@ -191,7 +191,7 @@ export const TreeNode = ({
         </span>
         {isLoading && expanded && (
           <span className={`${baseClass}__loading`}>
-            <Spinner loadingText={null} size="small" />
+            <Spinner loadingText={null} size="sm" />
           </span>
         )}
       </div>

packages/ui/src/elements/Spinner/index.css

@@ -6,11 +6,11 @@
     color: var(--color-icon-secondary);
   }
 
-  .spinner--small {
+  .spinner--sm {
     gap: calc(var(--spacer-1) / 2);
   }
 
-  .spinner--small .spinner__text {
+  .spinner--sm .spinner__text {
     font-size: var(--text-caption-font-size);
   }
 }

packages/ui/src/elements/Spinner/index.scss

@@ -14,18 +14,21 @@ export type SpinnerProps = {
    */
   loadingText?: null | string
   /**
-   * Size of the spinner
-   * @default 'default'
+   * Size of the spinner:
+   * - sm: 16px icon
+   * - md: 24px icon with smaller arc
+   * - lg: 24px icon with larger arc
+   * @default 'md'
    */
-  size?: 'default' | 'small'
+  size?: 'lg' | 'md' | 'sm'
 }
 
-export const Spinner: React.FC<SpinnerProps> = ({ loadingText, size = 'default' }) => {
+export const Spinner: React.FC<SpinnerProps> = ({ loadingText, size = 'md' }) => {
   const { t } = useTranslation()
 
   return (
     <div className={[baseClass, `${baseClass}--${size}`].filter(Boolean).join(' ')}>
-      <SpinnerIcon size={size === 'small' ? 16 : 24} />
+      <SpinnerIcon size={size} />
 
       {loadingText !== null && (
         <span className={`${baseClass}__text`}>{loadingText || `${t('general:loading')}...`}</span>

packages/ui/src/elements/Spinner/index.tsx

@@ -1,5 +1,6 @@
 @layer payload-default {
   .icon--spinner {
+    color: var(--color-icon-secondary);
     animation: spinner-spin 0.6s linear infinite;
   }
 

packages/ui/src/icons/Spinner/index.css

@@ -3,23 +3,35 @@ import React from 'react'
 import './index.css'
 
 const paths = {
-  16: 'M10.778 3.842a5 5 0 0 0-2.279-.817A.54.54 0 0 1 8 2.5a.47.47 0 0 1 .5-.48A6 6 0 1 1 2.02 8.5.47.47 0 0 1 2.5 8c.276 0 .497.224.525.499a5 5 0 1 0 7.753-4.657',
-  24: 'M15.333 7.011a6 6 0 0 0-2.834-.99A.534.534 0 0 1 12 5.5c0-.276.224-.502.5-.482A7 7 0 1 1 5.018 12.5.473.473 0 0 1 5.5 12c.276 0 .498.224.52.5a6 6 0 1 0 9.313-5.489',
+  // 16px spinner (sm) - from @figma/fpl-icons Icon16Spinner
+  sm: 'M10.778 3.842a5 5 0 0 0-2.279-.817A.54.54 0 0 1 8 2.5a.47.47 0 0 1 .5-.48A6 6 0 1 1 2.02 8.5.47.47 0 0 1 2.5 8c.276 0 .497.224.525.499a5 5 0 1 0 7.753-4.657',
+  // 24px spinner (md) - from @figma/fpl-icons Icon24Spinner
+  md: 'M15.333 7.011a6 6 0 0 0-2.834-.99A.534.534 0 0 1 12 5.5c0-.276.224-.502.5-.482A7 7 0 1 1 5.018 12.5.473.473 0 0 1 5.5 12c.276 0 .498.224.52.5a6 6 0 1 0 9.313-5.489',
+  // 24px spinner large (lg) - from @figma/fpl-icons Icon24SpinnerLarge
+  lg: 'M16.445 5.348A8 8 0 0 0 12.5 4.016.525.525 0 0 1 12 3.5a.48.48 0 0 1 .5-.486A9 9 0 1 1 3.014 12.5.48.48 0 0 1 3.5 12c.276 0 .498.224.516.5a8 8 0 1 0 12.429-7.152',
+}
+
+const sizes = {
+  lg: 24,
+  md: 24,
+  sm: 16,
 }
 
 export type SpinnerIconProps = {
   readonly className?: string
-  readonly size?: 16 | 24
+  readonly size?: 'lg' | 'md' | 'sm'
 }
 
-export const SpinnerIcon: React.FC<SpinnerIconProps> = ({ className, size = 16 }) => {
+export const SpinnerIcon: React.FC<SpinnerIconProps> = ({ className, size = 'sm' }) => {
+  const dimension = sizes[size]
+
   return (
     <svg
       className={['icon icon--spinner', className].filter(Boolean).join(' ')}
       fill="none"
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      width={size}
+      height={dimension}
+      viewBox={`0 0 ${dimension} ${dimension}`}
+      width={dimension}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path clipRule="evenodd" d={paths[size]} fill="currentColor" fillRule="evenodd" />

packages/ui/src/icons/Spinner/index.tsx

@@ -1,8 +1,7 @@
-import type { CollectionConfig, Config } from 'payload'
-
-import fs from 'fs'
+import fs from 'node:fs/promises'
 import { fileURLToPath } from 'node:url'
 import path from 'path'
+import { type CollectionConfig, type Config } from 'payload'
 
 import { resetDB } from '../__helpers/shared/clearAndSeed/reset.js'
 import { devUser } from '../credentials.js'
@@ -11,13 +10,26 @@ import {
   blocksFieldsSlug,
   collectionSlugs,
   relationshipFieldsSlug,
+  richTextFieldsSlug,
   tagsSlug,
   textFieldsSlug,
+  uploadsSlug,
 } from './slugs.js'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
+// Load file at module level, manually construct to avoid file-type dynamic import issue
+const imagePath = path.resolve(dirname, '../lexical/collections/Upload/payload.jpg')
+const imageData = await fs.readFile(imagePath)
+const imageStat = await fs.stat(imagePath)
+const imageFile = {
+  name: path.basename(imagePath),
+  data: imageData,
+  mimetype: 'image/jpeg',
+  size: imageStat.size,
+}
+
 import ArrayFields from './collections/Array/index.js'
 import Autosave from './collections/Autosave/index.js'
 import BlocksFields from './collections/Blocks/index.js'
@@ -47,6 +59,13 @@ import TextareaFields from './collections/Textarea/index.js'
 import Rubbish from './collections/Trash/index.js'
 import Uploads from './collections/Upload/index.js'
 import UploadFields from './collections/UploadField/index.js'
+import {
+  codeContent,
+  getRichTextContent,
+  getTypographyContent,
+  listsContent,
+  tableContent,
+} from './seed/richTextData.js'
 
 export const collections: CollectionConfig[] = [
   {
@@ -151,6 +170,45 @@ export const baseConfig: Partial<Config> = {
       createdPosts.push(created)
     }
 
+    const richTextCount = await payload.count({ collection: richTextFieldsSlug })
+    if (richTextCount.totalDocs === 0) {
+      const uploadDoc = await payload.create({
+        collection: uploadsSlug,
+        data: { alt: 'Farming image' },
+        file: imageFile,
+      })
+
+      const formattedUploadID =
+        payload.db.defaultIDType === 'number' ? uploadDoc.id : `"${uploadDoc.id}"`
+
+      const devUserDoc = await payload.find({
+        collection: 'users',
+        where: { email: { equals: devUser.email } },
+        limit: 1,
+      })
+      const userId = devUserDoc.docs[0]?.id
+      const formattedUserID =
+        userId !== undefined
+          ? payload.db.defaultIDType === 'number'
+            ? userId
+            : `"${userId}"`
+          : undefined
+
+      const richTextContent = getRichTextContent(formattedUploadID, formattedUserID)
+
+      await payload.create({
+        collection: richTextFieldsSlug,
+        data: {
+          title: 'Data harvest \u2013 how AI and sensors are revolutionizing farming',
+          content: richTextContent,
+          lists: listsContent,
+          typography: getTypographyContent(formattedUserID),
+          table: tableContent,
+          code: codeContent,
+        },
+      })
+    }
+
     // Seed relationship-fields to test join field
     await payload.create({
       collection: relationshipFieldsSlug,

test/v4/baseConfig.ts

@@ -22,6 +22,7 @@ import { ModalSection } from './sections/ModalSection.js'
 import { NoListResultsSection } from './sections/NoListResults.js'
 import { PillSection } from './sections/Pill.js'
 import { PopupSection } from './sections/Popup.js'
+import { SpinnerSection } from './sections/Spinner.js'
 import { ThumbnailCardSection } from './sections/ThumbnailCard.js'
 import { ToastSection } from './sections/ToastSection.js'
 import { TooltipSection } from './sections/Tooltip.js'
@@ -76,6 +77,7 @@ type ComponentId =
   | 'select'
   | 'select-field'
   | 'shimmer'
+  | 'spinner'
   | 'text-field'
   | 'textarea'
   | 'textarea-field'
@@ -106,6 +108,7 @@ const componentOptions: ComponentOption[] = [
   { category: 'primitives', label: 'Popup', value: 'popup' },
   { category: 'primitives', label: 'Radio', value: 'radio' },
   { category: 'primitives', label: 'Select', value: 'select' },
+  { category: 'primitives', label: 'Spinner', value: 'spinner' },
   { category: 'primitives', label: 'Textarea', value: 'textarea' },
   { category: 'primitives', label: 'Tooltip', value: 'tooltip' },
   // Patterns
@@ -246,6 +249,7 @@ export const ComponentsView: React.FC = () => {
         {shouldShow('input-stepper', 'primitives') && (
           <InputStepperSection selectedComponent="input-stepper" />
         )}
+        {shouldShow('spinner', 'primitives') && <SpinnerSection selectedComponent="spinner" />}
 
         {/* Patterns */}
         {(selectedCategory === 'all' || selectedCategory === 'patterns') &&