feature: update File component to latest Fluent design

[Mnickii]

Closes #1625

PR Type

Description of the changes

Updates file component to latest fluent design.(https://www.figma.com/file/tVj3DubCqeip6mhw14Up0j/Microsoft-Graph-Toolkit?node-id=8059%3A151265)

PR checklist

• [ ] Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• [ ] All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• [ ] Stories have been added and existing stories have been tested
• [ ] Added appropriate documentation. Docs PR:

• [ ] License header has been added to all new source files (yarn setLicense)
• [ ] Contains NO breaking changes

Other information

[ghost]

Thank you for creating a Pull Request @Mnickii.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

• [ ] I have verified a documentation PR has been linked and is approved (or not applicable)
• [ ] I have ran this PR locally and have tested the fix/feature
• [ ] I have verified that stories have been added to storybook (or not applicable)
• [ ] I have tested existing stories in storybook to verify no regression has occured
• [ ] I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

[github-actions[bot]]

The updated storybook is available here

[gavinbarron]

Nice catch @musale Perhaps we should be looking at using padding-block or padding-inline for things like this to better support rtl writing direction?

[github-actions[bot]]

The updated storybook is available here

[github-actions[bot]]

The updated storybook is available here