ContextQMD
Back to Fluentui

Segment component Migration guide

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

4.40.2-hotfix23.3 KB
Original Source

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

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

Segment component Migration guide

Overview:

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

Before:

tsx
import { Segment, Button } from '@fluentui/react-northstar';
const Component = () => <Segment content={<Button content="Segment content button" />} />;

After:

tsx
// in COMPONENT_NAME.tsx
import { Button } from "@fluentui/react-components";
import { Segment } from "@fluentui/react-migration-v0-v9";

export const Component = () => {
  <Segment>
    <Button>Segment content button</Button>
  </Segment>;

How to migrate props:

`Segment` propsmigrate guide
as, classNamekeep it as is
contentmove `content` to JSX children.
variables, styles, designsee [Migrate style overrides](#migrate-style-overrides) in this document
accessibilitysee [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--docs)
ref, keykeep it as is
colorREMOVED: use styles and color tokens to style it properly
disabledREMOVED: use styles and color tokens to style it properly
invertedREMOVED: use styles and color tokens to style it properly

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 { Segment } from '@fluentui/react-northstar';

export const Component = () => <Segment variables={{ isSpeedDialContactCard: true }} />;

// in segment-styles.ts
export const segmentStyles1 = {
  root: ({ variables: { isSpeedDialContactCard } }) => ({
    ...(isSpeedDialContactCard && {
      backgroundColor: 'inherit',
      boxShadow: 'none',
    }),
  }),
};

After:

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

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

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

export const useStyles = makeStyles({
  speedDialContactCard: {
    backgroundColor: 'inherit',
    boxShadow: 'none',
  },
});