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

Divider Migration

Overview:

Before:

import { Divider } from '@fluentui/react-northstar';
const Component = () => <Divider />;

After:

import { Divider } from '@fluentui/react-components';
const Component = () => <Divider />;

The default v0 Divider has paddings above/below for horizontal Divider, and left/right for vertical Divider. v9 Divider has no such padding. Therefore v9 Divider appears similar to v0 <Divider fitted />.

To add paddings on v9 Divider to match v0, please see style overrides in this codesandbox, DefaultDividerExample.jsx useMigrationStyles.

How to migrate props:

See this codesandbox comparing v9 Divider with v0, including guides on adding v9 style overrides to match v0.

Migrate content prop

Move content to JSX children.

Before:

import { Divider } from '@fluentui/react-northstar';
const Component = () => <Divider content="hi" />;

After:

import { Divider } from '@fluentui/react-components';
const Component = () => <Divider>hi</Divider>;

Migrate important prop

v0 important prop adds fontWeight: "700" on children. It can be achieved via style overrides, see codesandbox, ImportantDividerExample.jsx useMigrationStyles.

Migrate size prop

By default Divider is 1px, size={1} Divider is 2px, size={2} Divider is 3px. v9 Divider size can be changed by updating its :before/:after pseudo element's borderTopWidth.

See codesandbox, SizedDividerExample.jsx useMigrationStyles, for style overrides to match size={1} and size={2},

Migrate style overrides

⚠️ If this is your first migration, please read the general guide on how to migrate styles.

Example for migrate boolean variables:

Before:

// in COMPONENT_NAME.tsx
import { Divider } from '@fluentui/react-northstar';

export const Component = () => <Divider variables={{ isCustomDivider: true }} />;

// in divider-styles.ts
export const dividerStyles = {
  root: ({ variables: { isCustomDivider } }) => ({
    ...(isCustomDivider && {
      height: '3.2rem',
    }),
  }),
};

After:

// in COMPONENT_NAME.tsx
import { Divider } from '@fluentui/react-components';
import { useStyles } from './COMPONENT_NAME.styles.ts';

export const Component = () => {
  const classes = useStyles();
  return <Divider className={classes.chatEntityHeaderDivider} />;
};

// in COMPONENT_NAME.styles.ts
import { makeStyles } from '@fluentui/react-components';

export const useStyles = makeStyles({
  chatEntityHeaderDivider: {
    height: '32px',
  },
});