Add is-empty modifier to file upload

[timacdonald]

This is a new feature.

Proposed solution

Currently the file upload looks like this when there is no filename yet provided. The thing this addresses is the empty white box where the name would go once populated.

This allows devs to add the is-empty (not sure if there is an already established name that would be better for this - and if not I'm sure there is a better name - so feedback welcomed) modifier to the .file to remove the name box, thus the input will look like this:

Then when the user has selected a file you simply remove the is-empty class and it will appear as expected...

This also works similar with the is-boxed modifier.

Tradeoffs

Not really any use without JS, but then again, you can't change the name with JS anyway so 👍

Testing Done

Currently running this in production, works great. Also, check out the code pen I did to show it working.