Feat: Clear button

Author: dchyun

packages/components/src/components/hds/filter-bar/filter-group.hbs

@@ -29,14 +29,24 @@
     {{#if (eq @type "range")}}
       <Hds::FilterBar::Range @keyFilter={{this.keyFilter}} @onChange={{this.onRangeChange}} />
     {{else}}
-      <ul class="hds-filter-bar__filters-dropdown__filter-group__list">
-        {{yield
-          (hash
-            Checkbox=(component "hds/filter-bar/checkbox" keyFilter=this.keyFilter onChange=this.onSelectionChange)
-            Radio=(component "hds/filter-bar/radio" keyFilter=this.keyFilter onChange=this.onSelectionChange)
-          )
-        }}
-      </ul>
+      <div class="hds-filter-bar__filters-dropdown__filter-group__values-list">
+        <div class="hds-filter-bar__filters-dropdown__clear">
+          <Hds::Button
+            @text={{hds-t "hds.components.filter-bar.filter-group.clear" default="Clear selection"}}
+            @color="tertiary"
+            @icon="rotate-ccw"
+            {{on "click" this.onClear}}
+          />
+        </div>
+        <ul class="hds-filter-bar__filters-dropdown__filter-group__list">
+          {{yield
+            (hash
+              Checkbox=(component "hds/filter-bar/checkbox" keyFilter=this.keyFilter onChange=this.onSelectionChange)
+              Radio=(component "hds/filter-bar/radio" keyFilter=this.keyFilter onChange=this.onSelectionChange)
+            )
+          }}
+        </ul>
+      </div>
     {{/if}}
   </Panel>
 {{/let}}

packages/components/src/components/hds/filter-bar/filter-group.ts

@@ -177,6 +177,16 @@ export default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilte
     }
   }
 
+  @action
+  onClear(): void {
+    this.internalFilters = undefined;
+
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, this.formattedFilters);
+    }
+  }
+
   get formattedFilters(): HdsFilterBarFilter | undefined {
     if (
       this.internalFilters === undefined ||

packages/components/src/components/hds/filter-bar/range.hbs

@@ -47,4 +47,13 @@
       />
     {{/if}}
   </Hds::Layout::Flex>
+  <div class="hds-filter-bar__filters-dropdown__clear">
+    <Hds::Button
+      @text={{hds-t "hds.components.filter-bar.range.clear" default="Clear filter"}}
+      @color="tertiary"
+      @icon="rotate-ccw"
+      @isInline={{true}}
+      {{on "click" this.onClear}}
+    />
+  </div>
 </div>

packages/components/src/components/hds/filter-bar/range.ts

@@ -144,6 +144,12 @@ export default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignat
     this._onChange();
   }
 
+  @action
+  onClear(): void {
+    this._resetInputValues();
+    this._onChange();
+  }
+
   private _onChange(): void {
     const { onChange } = this.args;
     if (onChange && typeof onChange === 'function') {
@@ -172,4 +178,11 @@ export default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignat
       }
     );
   };
+
+  private _resetInputValues = (): void => {
+    this._selector = undefined;
+    this._value = undefined;
+    this._betweenValueStart = undefined;
+    this._betweenValueEnd = undefined;
+  };
 }

packages/components/src/styles/components/filter-bar.scss

@@ -67,8 +67,19 @@
   gap: 8px;
 }
 
+.hds-filter-bar__filters-dropdown__filter-group__search {
+  padding: 16px;
+  border-bottom: 1px solid var(--token-color-border-primary);
+}
+
+.hds-filter-bar__filters-dropdown__filter-group__values-list {
+  padding: 8px 0;
+}
+
 .hds-filter-bar__filters-dropdown__filter-group__list {
-  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   margin: 0;
   padding: 0;
   overflow-y: auto;
@@ -83,13 +94,28 @@
 
 .hds-filter-bar__filters-dropdown__filter-option {
   display: block;
-  padding: 8px 0;
+  padding: 8px 16px;
 
   &--hidden {
     display: none;
   }
 }
 
+.hds-filter-bar__filters-dropdown__filter-range {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 0;
+}
+
+.hds-filter-bar__filters-dropdown__filter-range .hds-layout-flex {
+  padding: 0 16px;
+}
+
+.hds-filter-bar__filters-dropdown__clear {
+  padding: 4px;
+}
+
 // TABS
 //
 
@@ -114,7 +140,6 @@
   flex-direction: column;
   gap: 8px;
   width: 50%;
-  padding: 16px;
   background-color: var(--token-color-surface-primary);
   border-top-right-radius: var(--token-border-radius-medium);
 }

packages/components/translations/hds/components/filter-bar/filter-group/en-us.yaml

@@ -0,0 +1 @@
+clear: Clear selection

packages/components/translations/hds/components/filter-bar/range/en-us.yaml

@@ -12,3 +12,4 @@ value-input:
 between-value-inputs:
   start-placeholder: Start
   end-placeholder: End
+clear: Clear filter