Drop custom file upload plugin in favor of CSS solution

[MartijnCuppens]

CSS only alternative solution for #31085.
Advantages:

• No js dependencies
• No need to add translated button labels
• Labels are automatically adjusted when with <input type="file" multiple>

TODO:

• Wait until legacy Edge is dropped This isn't really necessary, since legacy Edge already has a decent fallback
• Extend migration guide
• Check if the alpha version is correct
• Fix border radii on iOS

https://deploy-preview-31955--twbs-bootstrap.netlify.app/docs/5.0/forms/form-control/#file-input
https://deploy-preview-31955--twbs-bootstrap.netlify.app/docs/5.0/forms/validation/#supported-elements

Closes #30265
Closes #31085

[mdo]

Thoughts on adding cursor: pointer here? I know it's not required, but compared to .form-control on textual inputs, where the cursor changes to indicate interactivity, there's no change here.

[patrickhlauke]

Thoughts on adding cursor: pointer here? I know it's not required, but compared to .form-control on textual inputs, where the cursor changes to indicate interactivity, there's no change here.

this old chestnut again ;)

as we do it on buttons by default, sure. also worth adding the <input type="color"> ?

[MartijnCuppens]

Thoughts on adding cursor: pointer here?

Fine by me. Only on the button or the whole input?

[patrickhlauke]

everything that's clickable, so the whole thing i'd say

[patrickhlauke]

also, good work on this btw. looks/works nicely

[MartijnCuppens]

Ok, should we add hover states? If yes, what kind of hoverstate? Shading the button background color maybe?

[MartijnCuppens]

I've added a subtle hover state

[mdo]

@MartijnCuppens this is amazing. Love the little hover state.

[alecpl]

There's some padding issue in Firefox 82 on Ubuntu.

[MartijnCuppens]

@alecpl,
Nice catch
That seems to be caused by these 5px:
https://searchfox.org/mozilla-central/rev/0b7007a23bc16c857f894140e12f307bfeef2fdd/layout/style/res/forms.css#494

I've now added a -moz-margin-end property to compensate these 5px.

[ffoodd]

@MartijnCuppens Doesn't seem to change anything, sadly. But maybe changing it in the devtools is not the best way?

[alecpl]

I've found a fix: .form-control::file-selector-button { font-family: inherit; }. It can be also font-family: unset.

[mdo]

Love this PR! :D

[mdo]

Also going to cross reference that #31993 fixes the issues @alecpl mentions here.

[alecpl]

@mdo, #31993 does not fix my issue, need the font-family:inherit fix mentioned in my previous comment.

A few more words about the issue. Looks like firefox does not inherit font-family on the file input button from the input. It needs to be told to do so explicitely. Without the fix the computed font-family is "Noto Sans" on my computer. This font's line-height is 1px higher than what I get when I add the inherit rule.

[ffoodd]

Very nice finding @alecpl, I confirm it solves the issue.

We should find some reference to document this behaviour, either a bugzilla link or something… The MDN page for ::file-selector-button does not mention this but made me notice the need for ::-webkit-file-upload-button version too: does Autoprefixer handles this one?

• Current spec discussion
• (!) Bugzilla updated 23 days ago
• My findings: I guess it relates to how the font is set: see how the pseudo element gets -moz-button font-family directly?) however it should apply to every Firefox > 82 out there, which rolled out only a few days ago.

Edit: x-ref Bugzilla

[XhmikosR]

We should ask upstream if it's not handled. And I'll try to move forward with the postcss update in the next days.

…

On Wed, Oct 28, 2020, 11:16 Gaël Poupard ***@***.***> wrote: Very nice finding @alecpl <https://github.com/alecpl>, I confirm it solves the issue. We should find some reference to document this behaviour, either a bugzilla link or something… The MDN page for ::file-selector-button does not mention this <https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button> but made me notice the need for ::-webkit-file-upload-button version too: does Autoprefixer handles this one? - Current spec discussion <w3c/csswg-drafts#5049> - *(!)* Bugzilla updated 23 days ago <https://bugzilla.mozilla.org/show_bug.cgi?id=1635675> - My findings: I guess it relates to how the font is set <https://hg.mozilla.org/mozilla-central/rev/ff6c38ffa425#l7.104>: see how the pseudo element gets -moz-button font-family directly?) however it should apply to every Firefox > 82 out there, which rolled out only a few days ago <https://www.mozilla.org/en-US/firefox/82.0/releasenotes/>. I'll cross-ref a link to bugzilla later. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#31955 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNMUIVE45F2Q5W7WE7TSM7OODANCNFSM4S3GQEBA> .

[ffoodd]

FWIW the bug I filled against Firefox got a very clear explanation (mainly, this pseudo-element should look like a button like it always did, not like an input).

I guess this "fix" @alecpl found could move to our reboot, and maybe suggested to Normalize and friends.

[MartijnCuppens]

We should find some reference to document this behaviour

It's shadow DOM, so all properties are reset to the default behaviour. So basically we should keep in mind these things need to re-reset (font size seems to be inherit by default though):

bootstrap/scss/_reboot.scss

Lines 431 to 434 in 3e2f9ab

	margin: 0; // 1
	font-family: inherit;
	@include font-size(inherit);
	line-height: inherit;

#31993 seems to be unrelated, for the issue @alecpl reported, but does seem to fix issues with errors in rounding when zoomed in/out which resulted in the same issue visually.

Thanks for the fix @alecpl, this was indeed needed, not only for FF, but also for Chrome (see https://codepen.io/MartijnCuppens/pen/yLJpmvE?editors=1100)

[MartijnCuppens]

Hmm yeah, maybe we should indeed move this to reboot, I'll fix that

[MartijnCuppens]

Ok, fixed the font-family (and all other font related properties) inheritance and also reported the 5px thing with Firefox, so we might be able to remove that dirty fix we now have in the future (https://bugzilla.mozilla.org/show_bug.cgi?id=1673895).

[ffoodd]

It's shadow DOM, so all properties are reset to the default behaviour.

Not really, as you may see in Firefox sources I linked earlier: https://hg.mozilla.org/mozilla-central/rev/ff6c38ffa425#l7.104 — only a few properties are set (and for example ::placeholder does not require anything to inherit the font).

But that was fun to search, and a very nice PR! Great job @MartijnCuppens 💯

[ffoodd]

LGTM!

[mdo]

when ready!

[MartijnCuppens]

Shipped 🚢

I'll keep an eye on https://bugzilla.mozilla.org/show_bug.cgi?id=1673895 if FF is planning to change how they set their spacing

[Johann-S]

That's amazing @MartijnCuppens nice work 👍