Back to Fluentui

Separator to Divider Migration

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Divider.mdx

4.40.2-hotfix21.1 KB
Original Source

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

<Meta title="Concepts/Migration/from v8/Components/Separator to Divider Migration" />

Separator to Divider Migration

The v8 Separator component is called Divider in v9.

Migration should be a straightforward name change of the component. v9 Divider supports the same alignContent, children and vertical props. If you custom styled Separator then use makeStyles to set a className with Divider.

Here is a vertical Separator with the content aligned at the end.

tsx
<Separator vertical alignContent="end">
  Content
</Separator>

Here is an equivalent Divider.

tsx
<Divider vertical alignContent="end">
  Content
</Divider>

Divider Props Mapping

v8v9
alignContentalignContent
appearance
inset
styles(use makeStyles and className)
theme(use FluentProvider)
verticalvertical