Feat: Use SegmentedGroup for dropdown dismiss

Author: dchyun

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

@@ -1,45 +1,52 @@
 {{! @glint-nocheck }}
-<Hds::Dropdown
-  @listPosition="bottom-left"
-  @height="240px"
-  @searchEnabled={{@searchEnabled}}
-  @searchPlaceholder="Search {{@key}}"
-  @onDismiss={{this.onDismiss}}
-  {{this._setUpDropdown}}
-  class={{this.classNames}}
-  data-filter-key="{{@key}}"
-  as |D|
->
-  <D.ToggleButton @text={{this.toggleButtonText}} @color="secondary" @size="small" />
-  {{#if (eq @type "range")}}
-    <Hds::FilterBar::Range
-      @generic={{D.Generic}}
-      @keyFilter={{this.internalFilters}}
-      @onChange={{this.onRangeChange}}
-    />
-  {{else}}
-    {{yield
-      (hash
-        Checkbox=(component
-          "hds/filter-bar/checkbox" checkbox=D.Checkbox keyFilter=this.internalFilters onChange=this.onSelectionChange
+<Hds::SegmentedGroup class={{this.classNames}} data-filter-key="{{@key}}" as |SG|>
+  <SG.Button
+    @text="Clear filter"
+    @icon="x"
+    @color="secondary"
+    @size="small"
+    @isIconOnly={{true}}
+    {{on "click" this.onDismiss}}
+  />
+  <SG.Dropdown
+    @listPosition="bottom-left"
+    @height="240px"
+    @searchEnabled={{@searchEnabled}}
+    @searchPlaceholder="Search {{@key}}"
+    {{this._setUpDropdown}}
+    as |D|
+  >
+    <D.ToggleButton @text={{this.toggleButtonText}} @color="secondary" @size="small" />
+    {{#if (eq @type "range")}}
+      <Hds::FilterBar::Range
+        @generic={{D.Generic}}
+        @keyFilter={{this.internalFilters}}
+        @onChange={{this.onRangeChange}}
+      />
+    {{else}}
+      {{yield
+        (hash
+          Checkbox=(component
+            "hds/filter-bar/checkbox" checkbox=D.Checkbox keyFilter=this.internalFilters onChange=this.onSelectionChange
+          )
+          Radio=(component
+            "hds/filter-bar/radio" radio=D.Radio keyFilter=this.internalFilters onChange=this.onSelectionChange
+          )
         )
-        Radio=(component
-          "hds/filter-bar/radio" radio=D.Radio keyFilter=this.internalFilters onChange=this.onSelectionChange
-        )
-      )
-    }}
-  {{/if}}
-  {{#unless @isLiveFilter}}
-    <D.Footer @hasDivider={{true}}>
-      <Hds::ButtonSet>
-        <Hds::Button
-          @text="Apply filters"
-          @isFullWidth={{true}}
-          @size="small"
-          {{on "click" (fn this.onApply D.close)}}
-        />
-        <Hds::Button @text="Clear" @color="secondary" @size="small" {{on "click" (fn this.onClear D.close)}} />
-      </Hds::ButtonSet>
-    </D.Footer>
-  {{/unless}}
-</Hds::Dropdown>
+      }}
+    {{/if}}
+    {{#unless @isLiveFilter}}
+      <D.Footer @hasDivider={{true}}>
+        <Hds::ButtonSet>
+          <Hds::Button
+            @text="Apply filters"
+            @isFullWidth={{true}}
+            @size="small"
+            {{on "click" (fn this.onApply D.close)}}
+          />
+          <Hds::Button @text="Clear" @color="secondary" @size="small" {{on "click" (fn this.onClear D.close)}} />
+        </Hds::ButtonSet>
+      </D.Footer>
+    {{/unless}}
+  </SG.Dropdown>
+</Hds::SegmentedGroup>

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

@@ -56,7 +56,7 @@
 }
 
 // DROPDOWN
-.hds-filter-bar__dropdown--hidden.hds-dropdown {
+.hds-filter-bar__dropdown--hidden.hds-segmented-group {
   display: none;
 }