ContextQMD
Back to Fluentui

Flex component Migration guide

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

4.40.2-hotfix23.8 KB
Original Source

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

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

Flex component Migration guide

Overview:

To help with the migration we also offer a mixin and a shim that can be checked here

Before:

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

After:

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

How to migrate props:

`Flex` propsmigrate guide
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
debugnot supported, use custom style overrides if needed
columnkeep it as is
fillkeep it as is
gapkeep it as is
hAlignkeep it as is
inlinekeep it as is
paddingkeep it as is
spacekeep it as is
vAlignkeep it as is
wrapkeep it as is

Migrate content prop

Move content to JSX children.

Before:

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

After:

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

Migrate style overrides

Note: If this is your first migration, please read the general guide on how to migrate styles. Also check examples in "how to migrate styles" for Box component.

Example for migrate boolean variables:

Before:

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

export const Component = () => <Flex variables={{ isSomething: true }} />;

// in flex-styles.ts
export const flexStyles = {
  root: ({ variables: { isSomething } }) => ({
    ...(isSomething && { color: 'red' }),
  }),
};

After:

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

export const Component = () => {
  const classes = useStyles();

  return <Flex className={classes.root} />;
};
tsx
// in COMPONENT_NAME.styles.ts
import { makeStyles } from '@fluentui/react-migration-v0-v9';

export const useStyles = makeStyles({
  root: { color: 'red' },
});

Migrate flex items

Flex from Fluent UI v9 can work together with FlexItem from Fluent UI react-northstar. For details about FlexItem migration, see FlexItem component Migration guide.

If Flex.Item (dot notation) is used, replace these with FlexItem, if the items have not yet been migrated to V9.