add labels to file type inputs (#17677)

This commit is contained in:
claire bontempo 2022-10-26 16:35:15 -04:00 committed by GitHub
parent c81bec4d06
commit 63656d900a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 9 deletions

View File

@ -7,11 +7,11 @@
</label>
<div class="file has-name is-fullwidth">
<div class="file-label" aria-label="Choose a file">
<input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input />
<span class="file-cta button">
<input id="file-input" class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input />
<label for="file-input" class="file-cta button">
<Icon @name="upload" class="has-light-grey-text" />
Choose a file…
</span>
</label>
<span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
{{or this.fileName "No file chosen"}}
</span>

View File

@ -46,18 +46,24 @@
<div class="control is-expanded">
<div class="file">
<div class="file-label is-fullwidth">
<input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-pgp-file-input={{true}} />
<input
id="file-input"
class="file-input"
type="file"
onchange={{action "pickedFile"}}
data-test-pgp-file-input={{true}}
/>
<span class="file-cta is-fullwidth">
<span class="file-icon has-text-grey-dark">
<Icon @name="file" />
</span>
<span class="file-label has-text-grey-dark" data-test-pgp-file-input-label={{true}}>
<label for="file-input" class="file-label has-text-grey-dark" data-test-pgp-file-input-label={{true}}>
{{#if this.key.fileName}}
{{this.key.fileName}}
{{else}}
Choose a file&hellip;
{{/if}}
</span>
</label>
{{#if this.key.fileName}}
<button type="button" class="file-delete-button" {{action "clearKey"}} data-test-pgp-clear={{true}}>
<Icon @name="x" aria-label="Close" />

View File

@ -61,11 +61,17 @@
<div class="control is-expanded">
<div class="file has-name is-fullwidth">
<div class="file-label" aria-label="Choose a file">
<input class="file-input" type="file" {{on "change" this.pickedFile}} data-test-text-file-input={{true}} />
<span class="file-cta button">
<Input
id="file-input"
class="file-input"
@type="file"
{{on "change" this.pickedFile}}
data-test-text-file-input={{true}}
/>
<label for="file-input" class="file-cta button">
<Icon @name="upload" class="has-light-grey-text" />
Choose a file…
</span>
</label>
<span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
{{#if @file.fileName}}
{{@file.fileName}}