Drop custom file upload plugin in favor of CSS solution #31955

MartijnCuppens · 2020-10-22T13:31:01Z

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

site/content/docs/5.0/migration.md

mdo · 2020-10-22T16:24:07Z

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 · 2020-10-22T16:28:47Z

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 · 2020-10-22T16:31:14Z

Thoughts on adding cursor: pointer here?

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

patrickhlauke · 2020-10-22T16:40:49Z

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

patrickhlauke · 2020-10-22T16:47:36Z

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

MartijnCuppens · 2020-10-22T16:47:41Z

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

MartijnCuppens · 2020-10-22T17:50:22Z

I've added a subtle hover state

mdo · 2020-10-23T18:24:58Z

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

alecpl · 2020-10-25T06:25:25Z

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

MartijnCuppens · 2020-10-25T13:21:28Z

@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 · 2020-10-27T15:01:36Z

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

alecpl · 2020-10-27T21:12:55Z

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 · 2020-10-27T21:36:13Z

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

alecpl · 2020-10-28T06:32:05Z

@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 · 2020-10-28T09:15:57Z

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 · 2020-10-28T09:50:16Z

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> .

Caused by https://searchfox.org/mozilla-central/rev/0b7007a23bc16c857f894140e12f307bfeef2fdd/layout/style/res/forms.css#494

ffoodd · 2020-10-28T14:19:11Z

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 · 2020-10-28T14:21:38Z

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 · 2020-10-28T14:24:37Z

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

MartijnCuppens · 2020-10-28T15:12:18Z

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 · 2020-10-28T16:33:16Z

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 · 2020-10-28T17:30:28Z

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 · 2020-10-31T06:57:29Z

That's amazing @MartijnCuppens nice work 👍

MartijnCuppens added css on-hold v5 no-backport-to-v4 labels Oct 22, 2020

MartijnCuppens requested review from a team as code owners October 22, 2020 13:31

MartijnCuppens marked this pull request as draft October 22, 2020 13:31

MartijnCuppens force-pushed the main-mc-form-file branch 2 times, most recently from 508d4b4 to 2009ad4 Compare October 22, 2020 14:19

mdo reviewed Oct 22, 2020

View reviewed changes

site/content/docs/5.0/migration.md Outdated Show resolved Hide resolved

MartijnCuppens force-pushed the main-mc-form-file branch 2 times, most recently from 44f5e88 to 569c764 Compare October 22, 2020 17:46

patrickhlauke self-requested a review October 22, 2020 19:47

patrickhlauke approved these changes Oct 22, 2020

View reviewed changes

MartijnCuppens changed the title ~~Drop custom file upload plugin in favor of CSS~~ Drop custom file upload plugin in favor of CSS solution Oct 24, 2020

MartijnCuppens force-pushed the main-mc-form-file branch from 569c764 to e6f028b Compare October 24, 2020 19:11

MartijnCuppens removed the on-hold label Oct 24, 2020

MartijnCuppens marked this pull request as ready for review October 24, 2020 19:14

MartijnCuppens added the no squash label Oct 25, 2020

MartijnCuppens mentioned this pull request Oct 27, 2020

Remove explicit heights on form elements #31993

Merged

mdo approved these changes Oct 27, 2020

View reviewed changes

mdo force-pushed the main-mc-form-file branch from d178868 to 98fae55 Compare October 27, 2020 21:36

mdo mentioned this pull request Oct 28, 2020

input-file: create a plugin #31085

Closed

MartijnCuppens added 2 commits October 28, 2020 15:09

Drop custom file upload plugin in favor of CSS

e913f46

Fix Firefox padding issue

7871079

Caused by https://searchfox.org/mozilla-central/rev/0b7007a23bc16c857f894140e12f307bfeef2fdd/layout/style/res/forms.css#494

MartijnCuppens force-pushed the main-mc-form-file branch from 98fae55 to 53093b6 Compare October 28, 2020 14:11

MartijnCuppens force-pushed the main-mc-form-file branch from 53093b6 to b72c277 Compare October 28, 2020 15:04

Use the same font on the button as on the field itself

7cb6e00

MartijnCuppens force-pushed the main-mc-form-file branch from b72c277 to 7cb6e00 Compare October 28, 2020 15:11

ffoodd approved these changes Oct 28, 2020

View reviewed changes

mdo approved these changes Oct 28, 2020

View reviewed changes

MartijnCuppens merged commit b1c7d1d into main Oct 28, 2020

MartijnCuppens deleted the main-mc-form-file branch October 28, 2020 17:29

ffoodd mentioned this pull request Jan 14, 2021

Floating labels and select positioned with different padding on Firefox #32636

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Drop custom file upload plugin in favor of CSS solution #31955

Drop custom file upload plugin in favor of CSS solution #31955

MartijnCuppens commented Oct 22, 2020 •

edited

Loading

mdo commented Oct 22, 2020

patrickhlauke commented Oct 22, 2020

MartijnCuppens commented Oct 22, 2020

patrickhlauke commented Oct 22, 2020

patrickhlauke commented Oct 22, 2020

MartijnCuppens commented Oct 22, 2020

MartijnCuppens commented Oct 22, 2020

mdo commented Oct 23, 2020

alecpl commented Oct 25, 2020

MartijnCuppens commented Oct 25, 2020

ffoodd commented Oct 27, 2020

alecpl commented Oct 27, 2020

mdo left a comment

mdo commented Oct 27, 2020

alecpl commented Oct 28, 2020

ffoodd commented Oct 28, 2020 •

edited

Loading

XhmikosR commented Oct 28, 2020 via email

ffoodd commented Oct 28, 2020 •

edited

Loading

MartijnCuppens commented Oct 28, 2020

MartijnCuppens commented Oct 28, 2020

MartijnCuppens commented Oct 28, 2020

ffoodd commented Oct 28, 2020

ffoodd left a comment

mdo left a comment

MartijnCuppens commented Oct 28, 2020

Johann-S commented Oct 31, 2020

Drop custom file upload plugin in favor of CSS solution #31955

Drop custom file upload plugin in favor of CSS solution #31955

Conversation

MartijnCuppens commented Oct 22, 2020 • edited Loading

mdo commented Oct 22, 2020

patrickhlauke commented Oct 22, 2020

MartijnCuppens commented Oct 22, 2020

patrickhlauke commented Oct 22, 2020

patrickhlauke commented Oct 22, 2020

MartijnCuppens commented Oct 22, 2020

MartijnCuppens commented Oct 22, 2020

mdo commented Oct 23, 2020

alecpl commented Oct 25, 2020

MartijnCuppens commented Oct 25, 2020

ffoodd commented Oct 27, 2020

alecpl commented Oct 27, 2020

mdo left a comment

Choose a reason for hiding this comment

mdo commented Oct 27, 2020

alecpl commented Oct 28, 2020

ffoodd commented Oct 28, 2020 • edited Loading

XhmikosR commented Oct 28, 2020 via email

ffoodd commented Oct 28, 2020 • edited Loading

MartijnCuppens commented Oct 28, 2020

MartijnCuppens commented Oct 28, 2020

MartijnCuppens commented Oct 28, 2020

ffoodd commented Oct 28, 2020

ffoodd left a comment

Choose a reason for hiding this comment

mdo left a comment

Choose a reason for hiding this comment

MartijnCuppens commented Oct 28, 2020

Johann-S commented Oct 31, 2020

MartijnCuppens commented Oct 22, 2020 •

edited

Loading

ffoodd commented Oct 28, 2020 •

edited

Loading

ffoodd commented Oct 28, 2020 •

edited

Loading