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

CardHeader Migration

Fluent UI v8 provides the DocumentCardDetails, DocumentCardTitle, and DocumentCardActivity components that can be used anywhere inside the DocumentCard. Fluent UI v9 provides a more consistent and opinionated CardHeader component that can be used to group information.

How to migrate

DocumentCardDetails => CardHeader

DocumentCardTitle => No equivalent, but can be achieved with a Text component

DocumentCardActivity with activity prop => CardHeader with description prop

DocumentCardActivity with people prop => CardHeader with image and header props

Before:

tsx

import {
  DocumentCard,
  DocumentCardDetails,
  DocumentCardTitle,
  DocumentCardActivity,
} from '@fluentui/react/lib/DocumentCard';
import { TestImages } from '@fluentui/example-data';

const Component = () => (
  <DocumentCard>
    <DocumentCardDetails>
      <DocumentCardTitle title="Revenue stream proposal fiscal year 2016 version02.pptx" shouldTruncate />
      <DocumentCardActivity
        activity="Created a few minutes ago"
        people={{ name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale }}
      />
    </DocumentCardDetails>
  </DocumentCard>
);

After:

jsx

import * as React from 'react';
import { Text, Caption1 } from '@fluentui/react-components';
import { Card, CardHeader } from '@fluentui/react-card/unstable';

export const Component = () => {
  return (
    <Card>
      <Text size={400}>Revenue stream proposal fiscal year 2016 version02.pptx</Text>
      <CardHeader
        image={}
        header={<Text weight="bold">Annie Lindqvist</Text>}
        description={<Caption1>Created a few minutes ago</Caption1>}
      />
    </Card>
  );
};