ContextQMD
Back to Fluentui

Card Preview Migration

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

4.40.2-hotfix22.2 KB
Original Source

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

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

Card Preview Migration

Overview

Before:

tsx
import { CardPreview, Image } from '@fluentui/react-northstar';

const Component = () => (
  <CardPreview>
    <Image fluid src="https://url-of.the/image.jpg" alt="Preview of a Word document" />
  </CardPreview>
);

After:

tsx
import { CardPreview } from '@fluentui/react-components';

const Component = () => (
  <CardPreview>
    
  </CardPreview>
);

How to migrate props:

CardPreview propsmigration guide
as, classNamekeep it as is
variables, stylessee Migrate style overrides in this document
accessibilitysee migrate-custom-accessibility.md. Also check the focusMode new prop
fittedREMOVED: by default, all Previews are fitted
horizontalREMOVED: no longer supported

Migrate style overrides

⚠️ If this is your first migration, please read the general guide on how to migrate styles.

Example for migrate boolean variables:

Follow the same patterns as in the Card migration guide.