fix(form-file): file-selector-button cutoff in Safari #1614
Conversation
imagoiq
requested review from
gfellerph,
oliverschuerch and
alizedebray
as code owners
🦋 Changeset detectedLatest commit: b55e65d The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Preview environment ready: https://preview-1614--swisspost-web-frontend.netlify.app |
| [lang='de'] & { | ||
| content: 'Datei auswählen'; | ||
| } | ||
|
|
||
| [lang='fr'] & { | ||
| content: 'Choisir un fichier'; | ||
| } | ||
|
|
||
| [lang='it'] & { | ||
| content: 'Scegli file'; | ||
| } | ||
| } | ||
|
|
||
| &[multiple] { | ||
| &::after { | ||
| content: 'Choose Files'; | ||
|
|
||
| [lang='de'] & { | ||
| content: 'Dateien auswählen'; | ||
| } | ||
|
|
||
| [lang='fr'] & { | ||
| content: 'Sélect. fichiers'; | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
TIL that File Input does not use the lang attribute, but the browser language. So, this might look weird if your browser uses another language than the page you are visiting.
2 notes:
- Italian plural is similar to singular.
- Translations are based on what Chrome provide natively.
There was a problem hiding this comment.
This has already been the source of confusion for some people. We'll provide a much improved file upload web-component that will fix this issue. For the native one, we're just providing on a best effort base. I suspect that use cases where these languages differ are quite rare and if they happen, the user most likely understands both languages.
| bottom: 0; | ||
| right: 0; | ||
| z-index: 2; | ||
| padding-inline: forms.$input-padding-y; |
There was a problem hiding this comment.
This is needed for valid and invalid state. Previously, we inherited padding value from Bootstrap. It works for all cases except those valid and invalid state where the padding right and left aren't the same. Issue was already there in #1297
| @@ -51,25 +51,90 @@ select.form-control-rg:not([size]):not([multiple]) { | |||
| border-left: inherit; | |||
| } | |||
|
|
|||
| // Fix Safari cutoff when change the initial position of the selector button. | |||
| @supports (background: -webkit-named-image(i)) { | |||
There was a problem hiding this comment.
imagoiq
changed the title
| [lang='de'] & { | ||
| content: 'Datei auswählen'; | ||
| } | ||
|
|
||
| [lang='fr'] & { | ||
| content: 'Choisir un fichier'; | ||
| } | ||
|
|
||
| [lang='it'] & { | ||
| content: 'Scegli file'; | ||
| } | ||
| } | ||
|
|
||
| &[multiple] { | ||
| &::after { | ||
| content: 'Choose Files'; | ||
|
|
||
| [lang='de'] & { | ||
| content: 'Dateien auswählen'; | ||
| } | ||
|
|
||
| [lang='fr'] & { | ||
| content: 'Sélect. fichiers'; | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
This has already been the source of confusion for some people. We'll provide a much improved file upload web-component that will fix this issue. For the native one, we're just providing on a best effort base. I suspect that use cases where these languages differ are quite rare and if they happen, the user most likely understands both languages.
Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
|
Kudos, SonarCloud Quality Gate passed!
|
What
multipleattribute.validorinvalidstate.UI
Webkit
Firefox
Chrome