Summary

Forma 36 v6 introduces several breaking changes focused on:

React 19 & Node 22 Version Updates: Updated peer dependencies to support React 19 and Node 22.
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.

For detailed migration steps, code examples, and FAQs, please refer to the MIGRATION guide.

What was the reasoning behind this release?

The Forma 36 stack was outdated and still used React 16 and Emotion 10. This release updates the technical foundation.

The benefits are:

TypeScript improvements: Better type inference and error messages.
Performance: Faster runtime and smaller bundle sizes.
Compatibility: Works with modern build tools (Vite, esbuild, etc.).
Maintenance: Some of the package versions we used are no longer actively maintained, e.g., react-popper.

What are the peer dependency requirements?

React: ^18.0.0 || ^19.0.0 (was ^16.14.0 || ^17.0.0 || ^18.0.0)
React DOM: ^18.0.0 || ^19.0.0 (was ^16.14.0 || ^17.0.0 || ^18.0.0)
Emotion packages: 11.x (was 10.x)
@emotion/react: ^11.0.0
@emotion/styled: ^11.0.0

Do I need to upgrade React to use Forma 36 v6?

Yes. At a minimum, you need React 18. React 19 is recommended but not required.

Are there any visual changes in this release?

No, this release focuses only on the underlying technology

Why can't I use AccordionItem standalone anymore?

The Accordion was refactored to use React Context for better performance and a cleaner API. Context requires a provider (Accordion), so child components must be wrapped. This prevents misuse and improves type safety.

It's deprecated in favor of nested Menu components. The new approach uses context to automatically detect nesting, providing better flexibility and consistency.

react-popper is no longer maintained; its predecessor is floating-ui, which simplifies some of the implementation, offers a wider array of features, and supports better auto-alignment.

Why were auto-start and auto-end removed from placement?

These values relied on deprecated Popper.js behavior. Modern positioning uses explicit placement values for predictable results. Choose the closest standard placement (top, bottom, left, right, with optional -start/-end modifiers).

What's the new offset prop format?

Changed from tuple [skidding, distance] to either:

A number: offset={10} (applies to distance only)
An object: offset={{ mainAxis: 10, crossAxis: 5 }}

This aligns with Floating UI (Popper.js v3) conventions.

Any bugs that got fixed in this version?

Yes, 3268. Icon colors can now be overwritten again in IconButtons.

Is Forma 36 v5 still supported?

Yes, as per our Deprecation & Maintenance policy, we will provide support until the 31st of July 2026. We will apply security patches, critical fixes, and some bug fixes.

When should I upgrade?

As soon as feasible. Start with updating dependencies and fixing type errors, then tackle visual regressions. Dependent on your current React version and usage of Forma 36 components, the work required to update your application can vary.

FAQ - v6