ContextQMD
Back to Fluentui

Avatar Migration

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

4.40.2-hotfix25.2 KB
Original Source

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

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

Avatar Migration

Overview:

Before:

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

After:

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

How to migrate props:

Avatar propsmigrate guide
as, classNamekeep it as is
variables, design, stylessee Migrate style overrides in this document
accessibilitysee migrate-custom-accessibility.md
key, refkeep it as is
getInitialsuse initials prop instead
iconkeep it as is
imagesee Migrate image prop in this document
labeluse initials prop instead
namekeep it as is
sizesee Migrate size prop in this document
squarereplace with shape="square"
statussee Migrate status prop in this document

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

export const Component = () => <Avatar variables={{ isCustomVariable: true }} />;

// in avatar-styles.ts
export const avatarStyles = {
  root: ({ variables: { isCustomVariable } }) => ({
    ...(isCustomVariable && {
      ':focus': {
        outlineColor: colorSchemeBrand.borderFocus,
      },
    }),
  }),
};

After:

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

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

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

export const useStyles = makeStyles({
  customAvatar: {
    ':focus': {
      outlineColor: tokens.colorNeutralBackground3Pressed,
    },
  },
});

Migrate image prop

To migrate image prop use following object structure:

Before:

tsx
import { Avatar } from '@fluentui/react-northstar';
const Component = () => (
  <Avatar image="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/RobertTolbert.jpg" />
);

After:

tsx
import { Avatar } from '@fluentui/react-components';
const Component = () => (
  <Avatar
    image={{
      alt: 'profile image',
      src: 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/RobertTolbert.jpg',
    }}
  />
);

Migrate size prop

Introduced new size values:

Value beforeValue after
smallest20
smaller24
small28
medium32
large64
largest96

Before:

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

After:

tsx
import { Avatar } from '@fluentui/react-components';
const Component = () => <Avatar size={28} />;

Migrate status prop

status property was replaced with badge property. There were introduced simplified status indicators: busy, outOfOffice, away, available, offline, doNotDisturb.

Before:

tsx
import { Avatar } from '@fluentui/react-northstar';
const Component = () => (
  <Avatar
    status={{
      color: 'green',
      icon: <AcceptIcon />,
      title: 'Available',
    }}
  />
);

After:

tsx
import { Avatar } from '@fluentui/react-components';
const Component = () => (
  <Avatar
    badge={{
      status: 'available',
    }}
  />
);

All status indicators can be used with outOfOffice property:

tsx
import { Avatar } from '@fluentui/react-components';
const Component = () => (
  <Avatar
    badge={{
      outOfOffice: true,
      status: 'busy',
    }}
  />
);