add clear all filters button

Author: fanixus96

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

@@ -4,6 +4,7 @@ class FilterGroup extends Component {
 
     this.filterToggleRef = findRef(".filterToggleButton");
     this.filtersContainerRef = findRef(".filtersContainer");
+    this.documentableFilterRef = findRef(".documentableFilter");
 
     withEvent(
       this.filterToggleRef,
@@ -36,6 +37,11 @@ class FilterGroup extends Component {
     e.preventDefault();
   };
 
+  onClearFilters = () => {
+    Object.entries(this.props.filter.filters)
+    .forEach(([key, _values]) => this.props.onGroupSelectChange(key, false))
+  };
+
   attachFiltersClicks() {
     const refs = findRefs(
       "li.filterButtonItem",
@@ -49,13 +55,20 @@ class FilterGroup extends Component {
       "button.selectAll",
       this.filtersContainerRef
     );
+
     const deselectAllRefs = findRefs(
       "span.deselectAll",
       this.filtersContainerRef
     );
 
+    const deselectAllRefsWithClearButton = findRefs(
+      "button.clearButton",
+      this.documentableFilterRef
+    );
+
     attachListeners(selectAllRefs, "click", this.onSelectAllClick);
     attachListeners(deselectAllRefs, "click", this.onDeselectAllClick);
+    attachListeners(deselectAllRefsWithClearButton, "click", this.onClearFilters);
   }
 
   isActive(isActive) {

scaladoc/resources/dotty_res/styles/theme/components/button/label-only-button.css

@@ -0,0 +1,33 @@
+.label-only-button {
+  background-color: var(--action-primary-background-default-ghost);
+  color: var(--action-primary-content-default);
+  border: 1px solid var(--border-default);
+  padding: calc(1.25 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
+  border-radius: 4px;
+}
+
+.label-only-button:hover {
+  background-color: var(--action-primary-background-hover);
+  color: var(--action-primary-content-hover);
+}
+
+.label-only-button:active {
+  background-color: var(--action-primary-background-hover);
+  color: var(--action-primary-content-hover);
+}
+
+.label-only-button.selected {
+  background-color: var(--action-primary-background-hover);
+  color: var(--action-primary-content-selected);
+}
+
+.label-only-button:focus-visible {
+  border: none;
+  outline: none;
+  box-shadow: 0px 0px 0px 2px var(--focus-default);
+}
+
+.label-only-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}

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

@@ -388,7 +388,7 @@ 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", `type` := "search"),
-    button(cls := "clearButton",  testId := "filterBarClearButton")("Clear all"),
+    button(cls := "clearButton label-only-button",  testId := "filterBarClearButton")("Clear all"),
   )
 
   def fullMember(m: Member): PageContent =

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

@@ -118,6 +118,7 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       "styles/theme/components/navigation-item.css",
       "styles/theme/components/button/icon-button.css",
       "styles/theme/components/button/text-button.css",
+      "styles/theme/components/button/label-only-button.css",
       "styles/theme/components/dropdown-menu.css",
       "styles/theme/components/divider.css",
       "styles/theme/components/table-of-content.css",