Back to Fluentui

Card Footer Migration

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

4.40.2-hotfix21.8 KB
Original Source

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

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

Card Footer Migration

Overview

Before:

tsx
import { CardFooter } from '@fluentui/react-northstar';

const Component = () => <CardFooter>Lorem ipsum</CardFooter>;

After:

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

const Component = () => <CardFooter Footer="Lorem ipsum" />;

How to migrate props:

CardFooter 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 Footers are fitted

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.