import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Concepts/Migration/from v0/Positioning" />

Migrate Positioning Props

Some components make use of positioning props, like Menu, Popup(v9 Popover), Tooltip.

Positioning props includes: align, autoSize, flipBoundary, offset,overflowBoundary,popperRef,position,positionFixed,target, unstable_disableTether, unstable_pinned

In v9, these props are grouped together under positioning prop.

Recommended: positioning shorthand

If only position or align or both prop is used, for example <Popup position="below" align="end" />, it can be migrated to a string like positioning="below-end".

This is v9 positioning shorthand syntax, which avoids using a full blown javascript object. See more on v9 docsite example.

Migrate other positioning props:

All v0 positioning props can be passed to v9 positioning as an object. For example, if v0 uses props <Popup position="below" align="end" autoSize={"height"} />, it can be migrate to prop positioning={{ position: "below", align: "end", autoSize: "height" }}.

Note that v0 unstable_pinned is stable in v9, and should be migrated to positioning.pinned.

Migrate target prop:

The common pattern to anchor target in v0 causes extra re-render: in v0 target is often obtained by using React state. The state value is null on intial render, and changed to the real HTML element, causing double render. In such case, please migrate to popperRef.current.setTarget in v9 to prevent double render. See example on v9 docsite