epam / epam/UUI

[FileCard] Support more customization options

Open
#2,218 0 comments 0 reactions 0 assignees View on GitHub
Contributor needed improvement
Dominant language
TypeScript
Stars
247
Forks
78
Avg merge
14h 27m
Merged PRs (30d)
15

Description

## Now

The component currently doesn't support all our use cases. We have the following blockers:
1. No click handler for the whole `FileCard` component. **Use case**: download the file. Workaround: wrap `FileCard` in `Anchor`
2. No ability to change custom secondary info (the row, where size or error are displayed). **Use case**: render different text depending on file's status (which is related to checking the file for viruses, if they are found and so on)
3. No ability to set a custom icon for unsupported files. **Use case**: support tiff files

## To Do

1. If you decide to support the use case in `FileCard` component to avoid using `Anchor` all the time, assign `onClick` callback to the whole component, and use `onRemove` (or `onClear`) callback for the remove icon button
2. Add ability to adjust secondary info. Type - `ReactNode` or `React.FC`. `string` wouldn't be enough, because we need to change the text's color too, and add some icons
3. Add ability to provide a custom icon for unsupported files. Type - `Icon` from `@epam/uui-core`. My plan is to pass a custom icon, if the file meets certain requirements (lie extension, and/or mime type), otherwise pass `undefined`, so that the `FileCard` uses the default approach of choosing the icon

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.