From 3e1751204feb9e2ff3d6ff493b2a4531e7b30f10 Mon Sep 17 00:00:00 2001 From: Yuri Guller Date: Thu, 20 May 2021 10:58:37 +0300 Subject: [PATCH] feat(vwd-file-picker): issue 844 added option to hide counter badge permanently (#845) * issue #844: added option to hide counter badge permanently * issue #844: fixing ci --- components/file-picker/readme.md | 1 + components/file-picker/src/vwc-file-picker.ts | 7 +++++-- components/file-picker/stories/arg-types.js | 3 ++- .../test/file-picker-counter.test.js | 17 ++++++++++++++--- components/file-picker/test/file-picker.test.js | 14 +++++++------- 5 files changed, 29 insertions(+), 13 deletions(-) diff --git a/components/file-picker/readme.md b/components/file-picker/readme.md index eff8b333e..ceb2f30a1 100644 --- a/components/file-picker/readme.md +++ b/components/file-picker/readme.md @@ -57,6 +57,7 @@ In addition to those major variations, there are the label and the helper messag | `label` | `label` | `string` | `''` | label text, if any | | `helper` | `helper` | `string` | `''` | text to be shown in helper message in normal (non-errorneous) state | | | `drop-zone` | `boolean` | `true` | attribute controlling whether the drop zone should be rendered or not | +| | `no-counter` | `boolean` | `false` | attribute controlling whether counter badge should be always hidden | | `validationMessage` | `validationmessage` | `string` | `''` | text to be shown in helper message when component is in erroneous state, when empty, the component falls back to the default messages as below | | `notAFileError` | `notafileerror` | `string` | `'only file/s drop allowed'` | text to be shown specifically when drag'n'drop of not-a-file attempted | | `tooManyFilesError` | `toomanyfileserror` | `string` | `'only one file allowed'` | text to be shown specifically when multiple files droped while slotted input has no `multiple` attribute defined | diff --git a/components/file-picker/src/vwc-file-picker.ts b/components/file-picker/src/vwc-file-picker.ts index 3771898bf..2f256b83b 100644 --- a/components/file-picker/src/vwc-file-picker.ts +++ b/components/file-picker/src/vwc-file-picker.ts @@ -44,7 +44,10 @@ export class VWCFilePicker extends LitElement { tooManyFilesError = 'only one file allowed'; @property({ type: Boolean, reflect: true }) - 'drop-zone': true; + 'drop-zone' = true; + + @property({ type: Boolean, reflect: true, attribute: 'no-counter' }) + noCounter = false; setCustomValidity(message: string): void { this.validationMessage = String(message); @@ -116,7 +119,7 @@ export class VWCFilePicker extends LitElement { } private renderFilesCount(): TemplateResult { - if (this.filesCount) { + if (this.filesCount && !this.noCounter) { return html`
${this.filesCount} diff --git a/components/file-picker/stories/arg-types.js b/components/file-picker/stories/arg-types.js index ac5e871ce..765e55da8 100644 --- a/components/file-picker/stories/arg-types.js +++ b/components/file-picker/stories/arg-types.js @@ -1,3 +1,4 @@ export const argTypes = { - + 'drop-zone': { table: { disable: true } }, + styles: { table: { disable: true } } } diff --git a/components/file-picker/test/file-picker-counter.test.js b/components/file-picker/test/file-picker-counter.test.js index 2cf89c018..04b3e004d 100644 --- a/components/file-picker/test/file-picker-counter.test.js +++ b/components/file-picker/test/file-picker-counter.test.js @@ -33,6 +33,17 @@ describe('file picker - count files hint', () => { assertFilesCount(fp, files, true); }); + it('should have counter set to number but no badge when "no-counter" used', async () => { + if (isSafari()) { + return; + } + const fp = await create(true, true); + const files = 4; + await simulateFilesSelect(fp, files); + + assertFilesCount(fp, files, false); + }); + it('should have counter set to number when valid drop', async () => { if (isSafari()) { return; @@ -60,14 +71,14 @@ describe('file picker - count files hint', () => { assertFilesCount(fp, 0, false); }); - async function create(mulitple) { + async function create(mulitple, noCounter = false) { const filePickerName = randomAlpha(); const [fp] = addElements(textToDomToParent(` - <${VWC_COMPONENT}> + <${VWC_COMPONENT} ${noCounter ? 'no-counter' : ''}> `)); - await waitNextTask(); + await fp.updateComplete; return fp; } }); diff --git a/components/file-picker/test/file-picker.test.js b/components/file-picker/test/file-picker.test.js index 5f29e2ee9..8d7110a0b 100644 --- a/components/file-picker/test/file-picker.test.js +++ b/components/file-picker/test/file-picker.test.js @@ -34,13 +34,13 @@ describe('file picker', () => { it('should have the expected internal contents', async () => { const [fp] = addElements(textToDomToParent(`<${VWC_COMPONENT}>`)); - await waitNextTask(); + await fp.updateComplete; expect(fp.shadowRoot.innerHTML).to.equalSnapshot(); }); it('should have the expected internal contents (with label)', async () => { const [fp] = addElements(textToDomToParent(`<${VWC_COMPONENT} label="Label">`)); - await waitNextTask(); + await fp.updateComplete; expect(fp.shadowRoot.innerHTML).to.equalSnapshot(); }); @@ -50,8 +50,8 @@ describe('file picker', () => { `
<${VWC_COMPONENT}>
` )); const filePicker = form.querySelector(VWC_COMPONENT); + await filePicker.updateComplete; - await waitNextTask(); expect(filePicker).exist; expect(filePicker.firstElementChild.form).equal(form); }); @@ -64,9 +64,9 @@ describe('file picker', () => { `)); - await waitNextTask(); - const filePicker = form.querySelector(VWC_COMPONENT); + await filePicker.updateComplete; + const internalInput = getInput(filePicker); const filesTotal = 3; @@ -99,9 +99,9 @@ describe('file picker', () => {
`)); - await waitNextTask(); - const filePicker = formA.querySelector(VWC_COMPONENT); + await filePicker.updateComplete; + const internalInput = getInput(filePicker); expect(internalInput).exist;