ContextQMD
Back to Fluentui

Box component Migration guide

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Box.mdx

4.40.2-hotfix22.6 KB
Original Source

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

<Meta title="Concepts/Migration/from v0/Components/Box Migration" />

Box component Migration guide

Overview:

Box component is replaced by Primitive.

Before:

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

After:

tsx
import { Primitive } from '@fluentui/react-migration-v0-v9';
const Component = () => <Primitive />;

How to migrate props:

Box propsmigrate guide
as, classNamekeep it as is
contentsee [Migrate content prop](##migrate-content-prop) in this document
variables, design, stylessee [Migrate style overrides](#migrate-style-overrides) in this document
accessibilitysee [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--docs)

Migrate content prop

Move content to JSX children.

Before:

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

After:

tsx
import { Primitive } from '@fluentui/react-migration-v0-v9';
const Component = () => <Primitive>hi</Primitive>;

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:

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

export const Component = () => <Box variables={{ isWideBox: true }} />;

// in box-styles.ts
export const boxStyles1 = {
  root: ({ variables: { isWideBox } }) => ({
    ...(isWideBox && {
      width: '100%',
    }),
  }),
};

After:

tsx
// in COMPONENT_NAME.tsx
import { Primitive } from '@fluentui/react-migration-v0-v9';
import { useStyles } from './COMPONENT_NAME.styles.ts';

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

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

export const useStyles = makeStyles({
  wideBox: {
    width: '100%',
  },
});