feat(filter-button): Added option to disable filter button

Author: Dennis Labordus

src/oscd-filter-button.ts

@@ -26,6 +26,8 @@ export class FilterButton extends FilteredList {
   header!: TemplateResult | string;
   @property()
   icon!: string;
+  @property({ type: Boolean })
+  disabled = false;
 
   @query('#filterDialog')
   private filterDialog!: Dialog;
@@ -48,7 +50,11 @@ export class FilterButton extends FilteredList {
 
   render(): TemplateResult {
     return html`
-      <mwc-icon-button icon="${this.icon}" @click=${this.toggleList}>
+      <mwc-icon-button
+        icon="${this.icon}"
+        @click="${this.toggleList}"
+        ?disabled="${this.disabled}"
+      >
         <slot name="icon"></slot>
       </mwc-icon-button>
       <mwc-dialog

test/unit/__snapshots__/oscd-filter-button.test.snap.js

@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["oscd-filter-button multi selection with custom header and standard icon looks like its latest snapshot"] = 
+snapshots["oscd-filter-button multi selection with custom header and standard icon looks like its latest snapshot"] =
 `<mwc-icon-button icon="developer_board">
   <slot name="icon">
   </slot>
@@ -42,7 +42,7 @@ snapshots["oscd-filter-button multi selection with custom header and standard ic
 `;
 /* end snapshot oscd-filter-button multi selection with custom header and standard icon looks like its latest snapshot */
 
-snapshots["oscd-filter-button single selection with default header and custom icon looks like its latest snapshot"] = 
+snapshots["oscd-filter-button single selection with default header and custom icon looks like its latest snapshot"] =
 `<mwc-icon-button icon="undefined">
   <slot name="icon">
   </slot>
@@ -79,3 +79,47 @@ snapshots["oscd-filter-button single selection with default header and custom ic
 `;
 /* end snapshot oscd-filter-button single selection with default header and custom icon looks like its latest snapshot */
 
+snapshots["oscd-filter-button is disabled looks like its latest snapshot"] =
+`<mwc-icon-button
+  disabled=""
+  icon="developer_board"
+>
+  <slot name="icon">
+  </slot>
+</mwc-icon-button>
+<mwc-dialog
+  heading="Filter Header"
+  id="filterDialog"
+  scrimclickaction=""
+>
+  <div id="tfcontainer">
+    <abbr title="[filter]">
+      <mwc-textfield
+        icontrailing="search"
+        label=""
+        outlined=""
+      >
+      </mwc-textfield>
+    </abbr>
+    <mwc-formfield class="checkall">
+      <mwc-checkbox indeterminate="">
+      </mwc-checkbox>
+    </mwc-formfield>
+  </div>
+  <ul
+    class="mdc-deprecated-list"
+    tabindex="-1"
+  >
+    <slot>
+    </slot>
+  </ul>
+  <mwc-button
+    dialogaction="close"
+    slot="primaryAction"
+  >
+    [close]
+  </mwc-button>
+</mwc-dialog>
+`;
+/* end snapshot oscd-filter-button is disabled looks like its latest snapshot */
+

test/unit/oscd-filter-button.test.ts

@@ -141,4 +141,33 @@ describe('oscd-filter-button', () => {
       await expect(element).shadowDom.to.equalSnapshot();
     });
   });
+
+  describe('is disabled', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<oscd-filter-button
+          id="filter"
+          icon="developer_board"
+          header="Filter Header"
+          disabled="true"
+        >
+          ${Array.from(listItems).map(
+            item =>
+              html` <mwc-check-list-item
+                value="${item.prim}"
+                ?selected="${item.defaultSelected}"
+              >
+                <span>${item.prim}</span>
+              </mwc-check-list-item>`
+          )}
+        </oscd-filter-button>`
+      );
+      await element.requestUpdate();
+      await element.updateComplete;
+    });
+
+    it('looks like its latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
 });