Add IIconProps property to IDocumentCardPreviewImage interface

[pschaeflein]

Describe the feature that you would like added
Add IIconProps property to IDocumentCardPreviewImage interface

What component or utility would this be added to
DocumentCard

Have you discussed this feature with our team, and if so, who
No

Additional context/screenshots

• To render a document icon, the component provides for an IIconProps property.
• To obtain the proper IIconProps for a document, the getFileTypeIconProps method exists in the file-type-icons module.
• The IDocumentCardPreviewImage interface has a properties for the preview image (named 'previewImageSrc' ) and for an icon to represent the document type (named iconSrc).

Rendering a document icon on a DocumentCard is a common scenario. Getting the iconSrc for the icon is very difficult. It is possible via the GlobalSettings object The following is a working example:

import { initializeFileTypeIcons, getFileTypeIconProps, FileIconType } from '@uifabric/file-type-icons';
import { GlobalSettings } from 'office-ui-fabric-react/lib/Utilities';
let globalSettings = (window as any).__globalSettings__;
iconProps = getFileTypeIconProps({ extension: doc.fileType, size: 16 });
let previewImage: IDocumentCardPreviewImage = {
  name: doc.title,
  url: doc.webUrl,
  previewImageSrc: doc.thumbnailUrl,
  iconSrc: globalSettings.icons[iconProps.iconName].code.props.src   
};

It would feel more consistent to use the following pseudo-code:

let previewImage: IDocumentCardPreviewImage = {
  name: doc.title,
  url: doc.webUrl,
  previewImageSrc: doc.thumbnailUrl,
  iconProps: iconProps
};

[micahgodbolt]

@yiminwu @mikewheaton - when you have the opportunity (like during css to js conversion) can you look at adding this feature?

[Jahnp]

@pschaeflein I believe this has been addressed as of this PR: #7584. It was published in [email protected].

Here's the line in DocumentCardPreview.types.ts where this should now exist: https://github.com/OfficeDev/office-ui-fabric-react/blob/ae66c05a20ddf23c37fd92a1d3528815e15cc45c/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.types.ts#L109

Can you take a look and see if this meets your needs? Thanks!

[wobba]

@Jahnp that PR replaces the preview image with an icon, not the filetype icon overlaying the image.

[wobba]

@pschaeflein Thank you for this workaround. Just what I needed :)

[ishaisagi]

frustrating - I tried the "workaround" above and not getting it to work. The "globalSettings.icons" array doesnt have a value for the file types that I tried (so far I tried PDF and HTM) as returned from the getFileTypeIconProps object.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.