Skip to content

new-component.md

Latest commit

 

History

History
53 lines (37 loc) · 3.89 KB

new-component.md

File metadata and controls

53 lines (37 loc) · 3.89 KB
Raw

Create New EDS 2.0 Component

Create a new EDS 2.0 component named $ARGUMENTS in packages/eds-core-react/src/components/next/.

Canonical reference: documentation/agent-instructions/BUILDING_EDS_2_COMPONENTS.md — foundation data-attributes, critical patterns, file templates, common mistakes, advanced patterns, and the anti-patterns checklist. Project-wide conventions live in AGENTS.md.

@../../documentation/agent-instructions/BUILDING_EDS_2_COMPONENTS.md

This command focuses on the per-component scaffolding flow. The patterns and code templates referenced below all live in the canonical doc above — read them there rather than inferring from memory.

Workflow

  1. Ask for a Figma URL for the component design. If provided, run the Figma MCP tools per AGENTS.md § Figma MCP workflow:

    • figma_get_design_context — component structure
    • figma_get_screenshot — visual reference
    • figma_get_variable_defs — tokens per state (Default, Hover, Focus, Disabled, and any other state in the design). Use the EXACT variable names returned.

  2. Check the component index first — documentation/AI-COMPONENT-INDEX.md lists every existing /next component with its props and sub-components (generated, CI-verified). Confirm $ARGUMENTS doesn't already exist, and prefer composing Field, Icon, Input, Button, Typography over reinventing. The underlying source of truth is packages/eds-core-react/src/components/next/index.ts.

  3. If an old component exists at packages/eds-core-react/src/components/$ARGUMENTS/, read it for behavioural awareness (keyboard nav, focus management) only — do not copy implementation. Use modern patterns: :focus-visible, CSS tokens, simple state.

  4. Create the component folder with all required files using the templates in BUILDING_EDS_2_COMPONENTS.md:

    $ARGUMENTS/
  index.ts
  $ARGUMENTS.tsx
  $ARGUMENTS.types.ts
  <lowercase>.css                (e.g. avatar.css)
  $ARGUMENTS.figma.tsx           (only if a Figma URL was provided)
  $ARGUMENTS.test.tsx
  $ARGUMENTS.stories.tsx

    Substitute $ARGUMENTS for the component name and use the lowercase form for the CSS filename and class root (eds-avatar, not eds-Avatar).

  5. Wire into the package per BUILDING_EDS_2_COMPONENTS.md:

    • Export from next/index.ts
    • @import the CSS in next/index.css

  6. Emit an Implementation Status Report per BUILDING_EDS_2_COMPONENTS.md — a short ## Implementation notes section summarising what came from Figma, what was inherited, what was assumed, what was skipped, and any TODOs.

Easy-to-miss reminders

These are the patterns most often forgotten — full rationale in the canonical doc:

  • data-color-appearance goes on the smallest element that uses that colour, not the root.
  • Elements with data-color-appearance must set a color (or background-color) using a dynamic token.
  • For disabled icons that were accent when enabled: change data-color-appearance to neutral and use --eds-color-text-disabled. Never use opacity for disabled.
  • data-space-proportions is calculated from Figma padding (horizontal vs vertical), not copied from a similar component.
  • data-baseline="center" enables text-box-trim so component height matches Figma.
  • Use EXACT --eds-* tokens from figma_get_variable_defs — never hardcode hex or pixel values.
  • Never put data-font-family on a flex container — it sets display: block and breaks layout.