ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(input-file): set buttonLabel initially (#2524)

Browse source 
* fix(input-file): set buttonLabel initially

* chore(input-file): add test for locale change
This commit is contained in:
gerjanvangeest 2025-05-21 09:54:39 +02:00 committed by GitHub
parent a0d334dc54
commit cbe8f8656b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 56 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/modern-terms-fix.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[input-file] set buttonLabel initially

12
packages/ui/components/input-file/src/LionInputFile.js
View file

@ -110,7 +110,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
* @type {string}
*/
get buttonLabel() {
return this.__buttonLabel || this._buttonNode?.textContent || '';
return this.__buttonLabel || this._buttonNode?.textContent?.trim() || '';
}
/**
@ -164,6 +164,8 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
this.enableDropZone = false;
this.maxFileSize = MAX_FILE_SIZE;
this.accept = '';
this.buttonLabel = '';
this._initialButtonLabel = '';
/**
* @type {InputFile[]}
*/
@ -196,7 +198,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
connectedCallback() {
super.connectedCallback();
this.__initialUploadResponse = this.uploadResponse;
this._initialButtonLabel = this.buttonLabel;
this._inputNode.addEventListener('change', this._onChange);
this._inputNode.addEventListener('click', this._onClick);
}
@ -214,10 +216,12 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
super.onLocaleUpdated();
if (this.multiple) {
// @ts-ignore
this.buttonLabel = this.msgLit('lion-input-file:selectTextMultipleFile');
this.buttonLabel =
this._initialButtonLabel || this.msgLit('lion-input-file:selectTextMultipleFile');
} else {
// @ts-ignore
this.buttonLabel = this.msgLit('lion-input-file:selectTextSingleFile');
this.buttonLabel =
this._initialButtonLabel || this.msgLit('lion-input-file:selectTextSingleFile');
}
}

43
packages/ui/components/input-file/test/lion-input-file.test.js
View file

@ -1,6 +1,8 @@
import '@lion/ui/define/lion-input-file.js';
import { Required } from '@lion/ui/form-core.js';
import { getInputMembers } from '@lion/ui/input-test-helpers.js';
import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
import { expect, fixture as _fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
import sinon from 'sinon';
@ -59,6 +61,10 @@ const file4 = /** @type {InputFile} */ (
);
describe('lion-input-file', () => {
const localizeManager = getLocalizeManager();
afterEach(localizeTearDown);
it('has a type of "file"', async () => {
const el = await fixture(html`<lion-input-file></lion-input-file>`);
// @ts-expect-error [allow-protected-in-tests]
@ -151,6 +157,43 @@ describe('lion-input-file', () => {
expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('bar.txt');
});
describe('structure', async () => {
it('can has a button label by default', async () => {
const el = await fixture(html`<lion-input-file></lion-input-file>`);
// @ts-expect-error [allow-protected-in-test]
expect(el._buttonNode.textContent).to.equal('Select file');
});
it('can has a button label by default when multiple', async () => {
const el = await fixture(html`<lion-input-file multiple></lion-input-file>`);
// @ts-expect-error [allow-protected-in-test]
expect(el._buttonNode.textContent).to.equal('Select files');
});
it('will update the button label on locale change', async () => {
const el = await fixture(html`<lion-input-file></lion-input-file>`);
// @ts-expect-error [allow-protected-in-test]
expect(el._buttonNode.textContent).to.equal('Select file');
localizeManager.locale = 'nl-NL';
await localizeManager.loadingComplete;
await el.updateComplete;
// @ts-expect-error [allow-protected-in-test]
expect(el._buttonNode.textContent).to.equal('Selecteer bestand');
});
it('can overwrite the button label', async () => {
const el = await fixture(html`<lion-input-file .buttonLabel="${'Foo'}"></lion-input-file>`);
// @ts-expect-error [allow-protected-in-test]
expect(el._buttonNode.textContent).to.equal('Foo');
el.buttonLabel = 'Bar';
await el.updateComplete;
// @ts-expect-error [allow-protected-in-test]
expect(el._buttonNode.textContent).to.equal('Bar');
});
});
describe('invalid file types', async () => {
const fileWrongType = /** @type {InputFile} */ (
new File(['foobar'], 'foobar.txt', {