ContextQMD
Back to Fluentui

CardFooter Migration

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

4.40.2-hotfix22.7 KB
Original Source

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

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

CardFooter Migration

Fluent UI v8 provides the DocumentCardActions component. Fluent UI v9 provides a more consistent and opinionated CardFooter instead.

This table maps DocumentCard v8 props to the Card v9 equivalent.

v8v9Notes
classNameclassName
componentRefref
viewsn/asee Migrate views prop in this document
rolerole
stylesclassName
themen/aUse FluentProvider to customize themes

Migrate views prop

The views prop is no longer supported. To migrate, create an element that displays the number of views and pass it to the CardFooter action prop.

Before:

tsx
import { DocumentCard, DocumentCardActions } from '@fluentui/react/lib/DocumentCard';

const documentCardActions = [
  {
    iconProps: { iconName: 'Share' },
    ariaLabel: 'share action',
  },
  {
    iconProps: { iconName: 'Pin' },
    ariaLabel: 'pin action',
  },
  {
    iconProps: { iconName: 'Ringer' },
    ariaLabel: 'notifications action',
  },
];

export const DocumentCardCompleteExample: React.FunctionComponent = () => (
  <DocumentCard>
    <DocumentCardActions actions={documentCardActions} views={432} />
  </DocumentCard>
);

After:

jsx
import * as React from 'react';
import { Button, shorthands, makeStyles } from '@fluentui/react-components';
import { Pin20Regular, Share20Regular, ServiceBell20Regular, Eye20Regular } from '@fluentui/react-icons';
import { Card, CardFooter } from '@fluentui/react-card/unstable';

const useStyles = makeStyles({
  card: {
    width: '300px',
  },

  actions: {
    ...shorthands.gap('4px'),
    ...shorthands.padding('4px'),
    display: 'flex',
    alignItems: 'center',
  },
});

export const Default = () => {
  const styles = useStyles();

  return (
    <Card size="small" className={styles.card}>
      <CardFooter
        action={
          <div className={styles.actions}>
            <Eye20Regular /> 432
          </div>
        }
      >
        <Button appearance="transparent" icon={<Share20Regular />} aria-label="Share" />
        <Button appearance="transparent" icon={<Pin20Regular />} aria-label="Pin" />
        <Button appearance="transparent" icon={<ServiceBell20Regular />} aria-label="Notifications" />
      </CardFooter>
    </Card>
  );
};