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

FlexItem component Migration guide

Overview:

FlexItem component is replaced with matching style functions. This allows the code to be more robust, customizable and performant.

flexItem mixins are provided to make the transition easier. The mixins have very similar API as the FlexItem react-northstar component.

Before:

tsx

import { Flex, FlexItem, Button } from "@fluentui/react-northstar";
const Component = () =>
  <Flex>
    <Button content="I am first button">
    <FlexItem grow push><Button content="I am far side button" /></FlexItem>
  </Flex>;

After:

tsx

// in COMPONENT_NAME.tsx
import { Flex, Button } from "@fluentui/react-components";
import { useStyles } from "./COMPONENT_NAME.styles.ts";

export const Component = () => {
  const classes = useStyles();
  <Flex>
    <Button content="I am first button">
    <Button className={classes.flexItemPushColumn}>I am far side button</Button>
  </Flex>;

tsx

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

export const useStyles = makeStyles({
  flexItemPushColumn: {
    ...flexItem.grow(true),
    ...flexItem.pushColumn(),
  },
});

If you are using Flex with horizontal direction, please use pushRow instead of pushColumn.

How to migrate props:

`FlexItem` props	migrate guide
className	apply on the child component
variables, design, styles	apply on the child component (see corresponding migration guide for the particular component
align	use `flexItem.align()` mixin in child component's style file
flexDirection	ignore
grow	use `flexItem.grow()` mixin in child component's style file
push	use `flexItem.pushRow()` or `flexItem.pushColumn()` mixin in child component's style file depending on the parent Flex direction
shrink	use `flexItem.shrink()` mixin in child component's style file
size	use `flexItem.size()` mixin in child component's style file. For arbitrary (pixel or rem) values, use style overrides as described in [Migrate style overrides](#migrate-style-overrides).

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.

Styles applied to FlexItem using variables need to be moved to the child component.

Example for migrate boolean `variables`:

Before:

tsx

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

export const Component = () => (
  <Flex>
    <FlexItem grow={true} variables={{ isSomething: true }}>
      <Button content="I am a button" />
    </FlexItem>
  </Flex>
);

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

After:

tsx

// in COMPONENT_NAME.tsx
import { Button, Flex } from "@fluentui/react-components";
import { useStyles } from "./COMPONENT_NAME.styles.ts";

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

  return (
    <Flex>
      <Button className={classes.root}>I am a button</Button>
    <Flex/>
  );
};

tsx

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

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

Migrate flex items

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

FlexItem component Migration guide

FlexItem component Migration guide

Overview:

How to migrate props:

Migrate style overrides

Example for migrate boolean variables:

Migrate flex items

Example for migrate boolean `variables`: