Add button to clear filters

docs/styles.md

@@ -16,6 +16,7 @@ Various Codicon icons have been used in this extension. Check [here](https://cod
 - `kanbn-header-name`
 - `kanbn-filter`
 - `kanbn-filter-input`
+- `kanbn-clear-filter-button`
 - `kanbn-filter-button`
 - `kanbn-header-description`
 - `kanbn-board`

src/Board.tsx

@@ -144,6 +144,12 @@ const Board = ({ name, description, columns, hiddenColumns, startedColumns, comp
   const [, setColumns] = useState(columns);
   const [taskFilter, setTaskFilter] = useState('');
 
+  // Called when the clear filter button is clicked
+  const clearFilters = e => {
+    (document.querySelector('.kanbn-filter-input') as HTMLInputElement).value = '';
+    filterTasks(e);
+  };
+
   // Called when the filter form is submitted
   const filterTasks = e => {
     e.preventDefault();
@@ -161,10 +167,22 @@ const Board = ({ name, description, columns, hiddenColumns, startedColumns, comp
                 className="kanbn-filter-input"
                 placeholder="Filter tasks"
               />
+              {
+                taskFilter &&
+                <button
+                  type="button"
+                  className="kanbn-clear-filter-button"
+                  onClick={clearFilters}
+                  title="Clear task filters"
+                >
+                  <i className="codicon codicon-clear-all"></i>
+                </button>
+              }
               <button
                 type="submit"
                 className="kanbn-filter-button"
                 onClick={filterTasks}
+                title="Filter tasks"
               >
                 <i className="codicon codicon-filter"></i>
               </button>

src/index.css

@@ -26,6 +26,7 @@ body.vscode-high-contrast {
 }
 
 .kanbn-filter {
+    position: relative;
     flex: 1;
     text-align: right;
 }
@@ -43,6 +44,17 @@ body.vscode-high-contrast {
     border-color: var(--vscode-input-border);
 }
 
+.kanbn-clear-filter-button {
+    position: absolute;
+    right: 45px;
+    outline: none;
+    border: none;
+    color: var(--vscode-button-foreground);
+    background-color: transparent;
+    padding: 9px 1em;
+    opacity: 0.6;
+}
+
 .kanbn-filter-button {
     outline: none;
     border: none;
@@ -52,12 +64,17 @@ body.vscode-high-contrast {
     margin-left: 8px;
 }
 
+.kanbn-clear-filter-button .codicon,
 .kanbn-filter-button .codicon {
-    font-size: 11px !important;
+    font-size: 12px !important;
     position: relative;
     top: 1px;
 }
 
+.kanbn-clear-filter-button:hover, .kanbn-clear-filter-button:focus {
+    opacity: 1;
+}
+
 .kanbn-filter-button:hover, .kanbn-filter-button:focus {
     background-color: var(--vscode-button-hoverBackground);
 }