Add additional styling options to File/FileList components

[NathZ1]

Proposal: There are a few hardcoded styles with these components that limit the ability to resize the components as required. The following CSS custom properties could be added to help:

mgt-file-list:

• --file-item-details-padding
• --file-upload-button-margin-top
• --file-upload-button-margin-left
• --file-upload-button-margin-right

mgt-file:

• --file-type-icon-padding
• --file-item-details-padding

Description

As above.

Rationale

Would make customising these components a bit easier. I can help with a PR if required.

Preferred Solution

Implement additional CSS custom properties

[ghost]

Hello NathZ1, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[musale]

Hello @NathZ1 these are good recommendations! Do you want to target the latest release or the v3.x.x release? v3 is a better target IMO. Secondly, for a token like --file-upload-button-margin, is it necessary to be explicit with top, bottom? So, you end up with something like --file-upload-button-margin: 0 2px 4px 1px instead of --file-upload-button-margin-top: 3px.

[gavinbarron]

Great suggestion @NathZ1

+1 to Martin's suggestion that you target this change against the v3 work as we're closing in on that release soon, so if you base your work on the next/fluentui branch and target your PR there that would be best.

I like the idea of having separate css properties for start/end/top/bottom as that works better for changing to rtl direction. consider:

padding: var(--icon-padding);

versus

padding-inline-start: var(--icon-padding-start);
padding-inline-end: var(--icon-padding-end);
padding-block-start: var(--icon-padding-top);
padding-block-end: var(--icon-padding-bottom);

We could condense this to two properties --icon-padding-block and --icon--padding-inline but I think that the longer form is a little easier to grok from naming alone.