feat(vwd-file-picker): issue 844 added option to hide counter badge p…

…ermanently (#845)

* issue #844: added option to hide counter badge permanently

* issue #844: fixing ci

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 |

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`
  <div class="files-count">
  <vwc-badge connotation="alert" shape="pill">${this.filesCount}</vwc-badge>

components/file-picker/stories/arg-types.js

@@ -1,3 +1,4 @@
 export const argTypes = {
-
+ 'drop-zone': { table: { disable: true } },
+ styles: { table: { disable: true } }
 }

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' : ''}>
  <input type="file" name="${filePickerName}" ${mulitple ? 'multiple' : ''}/>
  </${VWC_COMPONENT}>
  `));
- await waitNextTask();
+ await fp.updateComplete;
  return fp;
  }
 });

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}></${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"></${VWC_COMPONENT}>`));
- await waitNextTask();
+ await fp.updateComplete;
  expect(fp.shadowRoot.innerHTML).to.equalSnapshot();
  });
 
@@ -50,8 +50,8 @@ describe('file picker', () => {
  `<form><${VWC_COMPONENT}><input type="file"/></${VWC_COMPONENT}></form>`
  ));
  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', () => {
  <button></button>
  </form>
  `));
- 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', () => {
  </form>
  <form><button></button></form>
  `));
- await waitNextTask();
-
  const filePicker = formA.querySelector(VWC_COMPONENT);
+ await filePicker.updateComplete;
+
  const internalInput = getInput(filePicker);
 
  expect(internalInput).exist;