Migration

Table of Contents

• Migration
  • Table of Contents
  • Migration from V5 to V6
    • Summary
    • Breaking Changes Overview
    • Component-Specific Migrations
      • Accordion
      • Menu
      • Popover
      • Skeleton
      • Tooltip
    • Quick Start Migration Checklist

Migration from V5 to V6

Summary

Forma 36 v6 introduces several breaking changes focused on:

• React 19 & Node Version Updates: Updated peer dependencies to support React 18.3+ and React 19, and newer Node versions
• Emotion CSS Upgrade: Updated from Emotion v10 to v11, requiring updates to styling dependencies
• API Simplification: Removed redundant props and consolidated type definitions across multiple components

The migration primarily affects prop interfaces and type exports. Most runtime behavior remains backward-compatible, but TypeScript consumers will need to update type imports and remove deprecated props.

Breaking Changes Overview

Component	Breaking Change	Impact
Accordion	Refactored to use React Context; removed align prop from AccordionItem and AccordionHeader	Alignment now controlled only at parent Accordion level; components must be used within Accordion wrapper
Menu	Changed placement prop (removed auto-start, auto-end), changed offset prop shape, and deprecated Menu.Submenu	Requires prop value updates; use nested Menu components instead of Menu.Submenu
Popover	Changed placement prop (removed auto-start, auto-end) and offset prop shape	Requires prop value updates
Skeleton	Removed SkeletonDisplayTextProps and SkeletonBodyTextProps types	TypeScript type imports need updating
Tooltip	Changed placement prop (removed auto-start, auto-end)	Requires prop value updates

Component-Specific Migrations

Accordion

The Accordion component has been refactored to use React Context for internal state management. The align prop has been removed from AccordionItem and AccordionHeader and is now configured only on the parent Accordion component. Additionally, AccordionItem and AccordionHeader must now be used within an Accordion wrapper—they can no longer be used as standalone components.

📖 Full Accordion Migration Guide

Menu

• Removed auto-start and auto-end from placement prop
• Changed offset prop from tuple [number, number] to number | OffsetOptions object
• Deprecated Menu.Submenu - Use nested Menu components instead; nesting is automatically detected via context

📖 Full Menu Migration Guide

Popover

• Removed auto-start and auto-end from placement prop
• Changed offset prop from tuple [number, number] to number | OffsetOptions object

📖 Full Popover Migration Guide

Skeleton

Consolidated duplicate type exports. Use SkeletonTextProps instead of SkeletonDisplayTextProps or SkeletonBodyTextProps.

📖 Full Skeleton Migration Guide

Tooltip

Removed auto-start and auto-end from placement prop values.

📖 Full Tooltip Migration Guide

---

Quick Start Migration Checklist

• Update React and Node versions per package.json requirements
• Review and update Accordion implementations (remove item-level align props)
• Update Menu placement and offset props; replace Menu.Submenu with nested Menu
• Update Popover placement and offset props
• Replace deprecated Skeleton type imports with SkeletonTextProps
• Update Tooltip placement props
• Run TypeScript compiler to catch any remaining type errors
• Perform visual regression testing

For detailed migration steps, code examples, and FAQs, please refer to the individual component migration guides linked above.