diff --git a/src/components/file-input/file-input.spec.ts b/src/components/file-input/file-input.spec.ts index 5b1b5c7ce..3e50f19eb 100644 --- a/src/components/file-input/file-input.spec.ts +++ b/src/components/file-input/file-input.spec.ts @@ -1,4 +1,10 @@ -import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; +import { + elementUpdated, + expect, + fixture, + html, + nextFrame, +} from '@open-wc/testing'; import type { TemplateResult } from 'lit'; import { spy } from 'sinon'; import { defineComponents } from '#internals/definitions/defineComponents.js'; @@ -12,6 +18,7 @@ import { type ValidationContainerTestsParams, } from '#internals/testing/validity-helpers.spec.js'; import { firstOf } from '#internals/utils/arrays.js'; +import { configureTheme } from '#theming/config.js'; import IgcFileInputComponent from './file-input.js'; describe('File Input component', () => { @@ -152,6 +159,40 @@ describe('File Input component', () => { 'Choose a file' ); }); + + for (const theme of [ + 'bootstrap', + 'material', + 'fluent', + 'indigo', + ] as const) { + it(`truncates overflowing file names instead of growing (${theme})`, async () => { + configureTheme(theme); + await createFixture( + html`` + ); + + simulateFileUpload( + input, + Array.from( + { length: 8 }, + (_, i) => new File([''], `a-very-long-file-name-number-${i}.txt`) + ) + ); + await elementUpdated(element); + await nextFrame(); + + const container = getDOM('[part~="container"]') as HTMLElement; + const names = getDOM('[part="file-names"] > span') as HTMLElement; + + expect(container.scrollWidth).to.be.at.most(element.offsetWidth); + expect(names.scrollWidth).to.be.greaterThan(names.clientWidth); + expect(getComputedStyle(names).textOverflow).to.equal('ellipsis'); + + configureTheme('bootstrap'); + await nextFrame(); + }); + } }); describe('Events', () => { diff --git a/src/components/file-input/themes/file-input.base.scss b/src/components/file-input/themes/file-input.base.scss index 21963d6e5..4935d0890 100644 --- a/src/components/file-input/themes/file-input.base.scss +++ b/src/components/file-input/themes/file-input.base.scss @@ -22,6 +22,7 @@ $theme-file-input: file-input.$base; [part='file-names'] { display: flex; align-items: center; + min-width: 0; max-height: var-get($theme, 'size'); height: 100%; grid-area: 1 / 3;