grep -E "from.*icons|import.*Icon" packages/ui/src/elements/ComponentName/

close

chevron-down

type IconProps = {
  readonly className?: string
  readonly size?: 16 | 24 // Add more sizes as needed
  // ... keep any existing component-specific props
}

const paths = {
  16: 'M4.854 4.146...', // from icon-16-{name}.tsx
  24: 'M6.854 6.146...', // from icon-24-{name}.tsx
}

<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none">
  <path d={paths[size]} fill="currentColor" />
</svg>

packages/ui/src/elements/ComponentName/

packages/ui/src/fields/ComponentName/

index.css

import './index.scss'

import './index.css'

index.scss

@layer payload-default {}

/* Before: var(--base) = 20px → closest is --spacer-3 (16px) or --spacer-4 (24px) */
padding: var(--base);

/* After: Choose semantically correct size */
padding: var(--spacer-4); /* if 24px is acceptable */

/* Before: calc(var(--base) * 0.5) = 10px */
gap: calc(var(--base) * 0.5);

/* After: calc(var(--spacer-1) * 2.5) = 10px */
gap: calc(var(--spacer-1) * 2.5);

mcp_figma2_get_metadata(fileKey, nodeId)

mcp_figma2_get_design_context(fileKey, variantNodeId)

test/v4/collections/{ComponentName}/index.ts

import type { Page } from '@playwright/test'
import { expect, test } from '@playwright/test'
import path from 'path'
import { fileURLToPath } from 'url'

import {
  ensureCompilationIsDone,
  initPageConsoleErrorCatch,
} from '../../../__helpers/e2e/helpers.js'
import { AdminUrlUtil } from '../../../__helpers/shared/adminUrlUtil.js'
import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
import { componentFieldsSlug } from '../../slugs.js'

const filename = fileURLToPath(import.meta.url)
const currentFolder = path.dirname(filename)
const dirname = path.resolve(currentFolder, '../../')

const { beforeAll, describe } = test

let page: Page
let serverURL: string
let url: AdminUrlUtil

describe('ComponentName Field Variants', () => {
  beforeAll(async ({ browser }, testInfo) => {
    testInfo.setTimeout(TEST_TIMEOUT_LONG)
    ;({ serverURL } = await initPayloadE2ENoConfig({ dirname }))
    url = new AdminUrlUtil(serverURL, componentFieldsSlug)
    const context = await browser.newContext()
    page = await context.newPage()
    initPageConsoleErrorCatch(page)
    await ensureCompilationIsDone({ page, serverURL })
  })

  // Test each variant from the Figma design
})

test('default state renders correctly', async () => {
  await page.goto(url.create)
  const field = page.locator('#field-componentName')
  await expect(field).toBeVisible()
  // Verify visual properties match Figma default variant
})

test('hover state shows correct styling', async () => {
  await page.goto(url.create)
  const field = page.locator('#field-componentName')
  await field.hover()
  // Verify hover styles match Figma hover variant
})

test('focus state shows correct styling', async () => {
  await page.goto(url.create)
  const field = page.locator('#field-componentName')
  await field.focus()
  // Verify focus ring/outline matches Figma focus variant
})

test('error state renders correctly', async () => {
  await page.goto(url.create)
  // Trigger validation by submitting without required field
  await page.locator('button#action-save').click()
  const field = page.locator('#field-requiredComponent')
  // Verify error styling matches Figma invalid variant
})

test('disabled state renders correctly', async () => {
  await page.goto(url.create)
  const field = page.locator('#field-disabledComponent')
  await expect(field).toBeDisabled()
  // Verify disabled styling matches Figma disabled variant
})

test('read-only state renders correctly', async () => {
  await page.goto(url.create)
  const field = page.locator('#field-readOnlyComponent')
  await expect(field).toHaveAttribute('readonly')
  // Verify read-only styling matches Figma read-only variant
})

pnpm run test:e2e --grep "ComponentName Field Variants"