add filter input

Author: fanixus96

scaladoc/resources/dotty_res/scripts/components/FilterBar.js

@@ -42,6 +42,12 @@ class FilterBar extends Component {
     }));
   };
 
+  onClearFilters = () => {
+    this.setState(() => ({
+      filter: ""
+    }))
+  }
+
   onFilterVisibilityChange = () => {
     this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
   };

scaladoc/resources/dotty_res/scripts/components/FilterGroup.js

@@ -121,16 +121,16 @@ class FilterGroup extends Component {
             .map(
               ([key, data]) =>
               `<li
-                class="filterButtonItem"
+                class="filterButtonItem  ${this.isVisible(
+                  data.visible
+                )}"
                 data-selected="${data.selected}"
                 data-test-id="filterGroupButton"
                 data-key="${filterKey}"
                 data-selected="${data.selected}"
                 data-value="${key}"
                 ${this.isActive(
                   data.selected
-                )} ${this.isVisible(
-                  data.visible
                 )}"
               >
               ${key}
@@ -147,7 +147,7 @@ class FilterGroup extends Component {
       this.filtersContainerRef,
       Object.entries(filter.filters)
         .filter(([_key, values]) => Object.values(values).some((v) => v.visible))
-        .map(([key, values]) => this.getFilterGroup(key, values))
+        .map(([key, values]) => this.getFilterGroup(key, values)),
     );
 
     this.attachFiltersClicks();

scaladoc/resources/dotty_res/styles/theme/components/api-filters.css

@@ -2,8 +2,54 @@
   display: flex;
   position: fixed;
   top: calc(10 * var(--base-spacing));
+  flex-wrap: wrap;
+  z-index: 2;
 }
 
 .filtersContainer {
   display: flex;
+  flex-wrap: wrap;
+}
+
+.filterableInput {
+  background-color: var(--background-default);
+  color: var(--action-primary-content-active);
+  background-image: url("../../../images/icon-buttons/search/dark/default.svg");
+  background-repeat: no-repeat;
+  padding: calc(2 * var(--base-spacing)) calc(2 * var(--base-spacing))
+    calc(2 * var(--base-spacing)) calc(5 * var(--base-spacing));
+  border-radius: 4px;
+  background-size: 16px;
+  background-position: 10px 15px;
+  border: none;
+}
+
+.filterableInput:focus-visible {
+  border: none;
+  outline: none;
+}
+
+.filterableInput::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 1em;
+  width: 1em;
+  background: url("../../../images/icon-buttons/close/light/default.svg")
+    no-repeat 50% 50%;
+  background-size: contain;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.theme-dark .filterableInput::-webkit-search-cancel-button {
+  background: url("../../../images/icon-buttons/close/dark/default.svg")
+    no-repeat 50% 50%;
+}
+
+.filterableInput:focus::-webkit-search-cancel-button {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.filterableInput.dark::-webkit-search-cancel-button {
+  filter: invert(1);
 }

scaladoc/resources/dotty_res/styles/theme/components/pill.css

@@ -40,9 +40,14 @@
 }
 
 .pill > .close {
+  display: none;
   margin-left: calc(1.5 * var(--base-spacing));
 }
 
+.pill.has-value > .close {
+  display: block;
+}
+
 .pill-container ul {
   display: none;
   background-color: var(--action-primary-background-default-solid);
@@ -58,11 +63,19 @@
 .pill-container ul li {
   padding: calc(1 * var(--base-spacing)) calc(4 * var(--base-spacing));
   cursor: pointer;
+  display: none;
+}
+
+.pill-container ul li.visible {
   display: flex;
 }
 
 .pill-container ul li:hover {
-  background-color: var(--action-primary-background-selected);
+  background-color: var(--action-primary-background-hover);
+}
+
+.pill-container ul li[data-selected="true"]:hover {
+  background-color: var(--action-primary-background-hover);
 }
 
 .pill-container ul li[data-selected="true"] {

scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala

@@ -387,7 +387,8 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
 
   private def buildDocumentableFilter = div(cls := "documentableFilter")(
     div(cls := "filtersContainer")(),
-    input(cls := "filterableInput", placeholder := "Filter by any phrase", testId := "filterBarInput"),
+    input(cls := "filterableInput", placeholder := "Filter by any phrase", testId := "filterBarInput", `type` := "search"),
+    button(cls := "clearButton",  testId := "filterBarClearButton")("Clear all"),
   )
 
   def fullMember(m: Member): PageContent =