Feat: Customize selection input dismiss tag text

dchyun · dchyun · commit 7fabe0552523 · 2025-11-25T15:17:04.000-05:00
diff --git a/packages/components/src/components/hds/advanced-table/index.hbs b/packages/components/src/components/hds/advanced-table/index.hbs
diff --git a/packages/components/src/components/hds/filter-bar/filter-group/checkbox.hbs b/packages/components/src/components/hds/filter-bar/filter-group/checkbox.hbs
@@ -4,6 +4,6 @@
 }}
 <li class="hds-filter-bar__filter-group__selection-option">
   <Hds::Form::Checkbox::Field checked={{this.isChecked}} @value={{@value}} {{on "change" this.onChange}} as |F|>
-    <F.Label>{{yield}}</F.Label>
+    <F.Label>{{@label}}</F.Label>
   </Hds::Form::Checkbox::Field>
 </li>
diff --git a/packages/components/src/components/hds/filter-bar/filter-group/checkbox.ts b/packages/components/src/components/hds/filter-bar/filter-group/checkbox.ts
@@ -11,8 +11,9 @@ import type { HdsFilterBarFilter } from '../types.ts';
 export interface HdsFilterBarFilterGroupCheckboxSignature {
   Args: {
     value?: string;
+    label?: string;
     keyFilter: HdsFilterBarFilter | undefined;
-    onChange?: (event: Event) => void;
+    onChange?: (event: Event, label?: string) => void;
   };
   Blocks: {
     default: [];
@@ -23,9 +24,9 @@ export interface HdsFilterBarFilterGroupCheckboxSignature {
 export default class HdsFilterBarFilterGroupCheckbox extends Component<HdsFilterBarFilterGroupCheckboxSignature> {
   @action
   onChange(event: Event): void {
-    const { onChange } = this.args;
+    const { onChange, label } = this.args;
     if (onChange && typeof onChange === 'function') {
-      onChange(event);
+      onChange(event, label);
     }
   }
 
diff --git a/packages/components/src/components/hds/filter-bar/filter-group/index.ts b/packages/components/src/components/hds/filter-bar/filter-group/index.ts
@@ -113,10 +113,11 @@ export default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilte
   }
 
   @action
-  onSelectionChange(event: Event): void {
+  onSelectionChange(event: Event, label?: string): void {
     const addFilter = (value: unknown): void => {
       const newFilter = {
         value: value,
+        label: label,
       } as HdsFilterBarGenericFilterData;
       if (this.type === 'single-select') {
         this.internalFilters = newFilter;
diff --git a/packages/components/src/components/hds/filter-bar/filter-group/radio.hbs b/packages/components/src/components/hds/filter-bar/filter-group/radio.hbs
@@ -4,6 +4,6 @@
 }}
 <li class="hds-filter-bar__filter-group__selection-option">
   <Hds::Form::Radio::Field checked={{this.isChecked}} @value={{@value}} {{on "change" this.onChange}} as |F|>
-    <F.Label>{{yield}}</F.Label>
+    <F.Label>{{@label}}</F.Label>
   </Hds::Form::Radio::Field>
 </li>
diff --git a/packages/components/src/components/hds/filter-bar/filter-group/radio.ts b/packages/components/src/components/hds/filter-bar/filter-group/radio.ts
@@ -11,8 +11,9 @@ import type { HdsFilterBarFilter } from '../types.ts';
 export interface HdsFilterBarFilterGroupRadioSignature {
   Args: {
     value?: string;
+    label?: string;
     keyFilter: HdsFilterBarFilter | undefined;
-    onChange?: (event: Event) => void;
+    onChange?: (event: Event, label?: string) => void;
   };
   Blocks: {
     default: [];
@@ -23,9 +24,9 @@ export interface HdsFilterBarFilterGroupRadioSignature {
 export default class HdsFilterBarFilterGroupRadio extends Component<HdsFilterBarFilterGroupRadioSignature> {
   @action
   onChange(event: Event): void {
-    const { onChange } = this.args;
+    const { onChange, label } = this.args;
     if (onChange && typeof onChange === 'function') {
-      onChange(event);
+      onChange(event, label);
     }
   }
 
diff --git a/packages/components/src/components/hds/filter-bar/index.hbs b/packages/components/src/components/hds/filter-bar/index.hbs
@@ -73,7 +73,7 @@
             {{else if (eq filter.type "multi-select")}}
               {{#each (this._filterArrayData filter.data) as |item|}}
                 <Hds::Tag
-                  @text="{{this._filterKeyText key filter}}: {{item.value}}"
+                  @text="{{this._filterKeyText key filter}}: {{if item.text item.text item.value}}"
                   @onDismiss={{fn this.onFilterDismiss key item.value}}
                 />
               {{/each}}
diff --git a/packages/components/src/components/hds/filter-bar/index.ts b/packages/components/src/components/hds/filter-bar/index.ts
@@ -51,7 +51,7 @@ export interface HdsFilterBarSignature {
 export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
   @service hdsIntl!: HdsIntlService;
 
-  @tracked _isExpanded: boolean = false;
+  @tracked _isExpanded: boolean = this.hasActiveFilters;
 
   get searchValue(): string {
     const { filters } = this.args;
@@ -156,19 +156,28 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
   private _filterData = (
     data: HdsFilterBarData
   ): HdsFilterBarGenericFilterData => {
+    const result = {
+      value: '',
+    } as HdsFilterBarGenericFilterData;
     if ('value' in data) {
-      return { value: data.value };
+      result.value = data.value;
     }
-    return { value: '' };
+    if ('label' in data) {
+      result.label = data.label;
+    }
+    return result;
   };
 
   private _filterText = (filter: HdsFilterBarFilter): string => {
     const result = this._filterData(filter.data);
-    const resultText = result?.value as string;
-    return resultText ?? '';
+    const resultLabel = result?.label as string;
+    const resultValue = result?.value as string;
+    return resultLabel ?? resultValue;
   };
 
-  private _filterArrayData = (data: HdsFilterBarData): { value: unknown }[] => {
+  private _filterArrayData = (
+    data: HdsFilterBarData
+  ): { value: unknown; text?: string }[] => {
     if (isArray(data)) {
       return data.map((item) => this._filterData(item));
     }
diff --git a/packages/components/src/components/hds/filter-bar/types.ts b/packages/components/src/components/hds/filter-bar/types.ts
@@ -18,6 +18,7 @@ export type HdsFilterBarFilterType = `${HdsFilterBarFilterTypeValues}`;
 
 export interface HdsFilterBarGenericFilterData {
   value: unknown;
+  label?: string;
 }
 
 export interface HdsFilterBarNumericalFilterData {
diff --git a/showcase/app/components/mock/app/main/generic-advanced-table.gts b/showcase/app/components/mock/app/main/generic-advanced-table.gts
@@ -857,7 +857,7 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
             as |F|
           >
             {{#each (get SAMPLE_MODEL_VALUES "name") as |option|}}
-              <F.Checkbox @value={{option.value}}>{{option.label}}</F.Checkbox>
+              <F.Checkbox @value={{option.value}} @label={{option.label}} />
             {{/each}}
           </D.FilterGroup>
           <D.FilterGroup
@@ -868,7 +868,7 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
             as |F|
           >
             {{#each (get SAMPLE_MODEL_VALUES "project-name") as |option|}}
-              <F.Checkbox @value={{option.value}}>{{option.label}}</F.Checkbox>
+              <F.Checkbox @value={{option.value}} @label={{option.label}} />
             {{/each}}
           </D.FilterGroup>
           <D.FilterGroup
@@ -878,7 +878,7 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
             as |F|
           >
             {{#each (get SAMPLE_MODEL_VALUES "run-status") as |option|}}
-              <F.Checkbox @value={{option.value}}>{{option.label}}</F.Checkbox>
+              <F.Checkbox @value={{option.value}} @label={{option.label}} />
             {{/each}}
           </D.FilterGroup>
           <D.FilterGroup
@@ -888,7 +888,7 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
             as |F|
           >
             {{#each (get SAMPLE_MODEL_VALUES "terraform-version") as |option|}}
-              <F.Radio @value={{option.value}}>{{option.label}}</F.Radio>
+              <F.Radio @value={{option.value}} @label={{option.label}} />
             {{/each}}
           </D.FilterGroup>
           <D.FilterGroup
@@ -907,6 +907,22 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
             @type="numerical"
           />
           <D.FilterGroup @key="created" @text="Created" @type="date" />
+          <D.FilterGroup
+            @key="vcs-repo"
+            @text="VCS repo"
+            @type="generic"
+            as |F|
+          >
+            <F.Generic as |G|>
+              <ShwPlaceholder @text="generic content" @height="100" />
+              <HdsButton
+                @text="Add custom filter"
+                @color="secondary"
+                @size="small"
+                {{on "click" (fn G.updateFilter CUSTOM_FILTER)}}
+              />
+            </F.Generic>
+          </D.FilterGroup>
         </F.Dropdown>
       </HdsFilterBar>
     {{/if}}
@@ -953,9 +969,7 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
                 as |F|
               >
                 {{#each (get SAMPLE_MODEL_VALUES "name") as |option|}}
-                  <F.Checkbox
-                    @value={{option.value}}
-                  >{{option.label}}</F.Checkbox>
+                  <F.Checkbox @value={{option.value}} @label={{option.label}} />
                 {{/each}}
               </D.FilterGroup>
               <D.FilterGroup
@@ -966,9 +980,7 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
                 as |F|
               >
                 {{#each (get SAMPLE_MODEL_VALUES "project-name") as |option|}}
-                  <F.Checkbox
-                    @value={{option.value}}
-                  >{{option.label}}</F.Checkbox>
+                  <F.Checkbox @value={{option.value}} @label={{option.label}} />
                 {{/each}}
               </D.FilterGroup>
               <D.FilterGroup
@@ -978,9 +990,7 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
                 as |F|
               >
                 {{#each (get SAMPLE_MODEL_VALUES "run-status") as |option|}}
-                  <F.Checkbox
-                    @value={{option.value}}
-                  >{{option.label}}</F.Checkbox>
+                  <F.Checkbox @value={{option.value}} @label={{option.label}} />
                 {{/each}}
               </D.FilterGroup>
               <D.FilterGroup
@@ -993,7 +1003,7 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
                   (get SAMPLE_MODEL_VALUES "terraform-version")
                   as |option|
                 }}
-                  <F.Radio @value={{option.value}}>{{option.label}}</F.Radio>
+                  <F.Radio @value={{option.value}} @label={{option.label}} />
                 {{/each}}
               </D.FilterGroup>
               <D.FilterGroup
diff --git a/showcase/app/components/page-components/filter-bar/sub-sections/basic.gts b/showcase/app/components/page-components/filter-bar/sub-sections/basic.gts
@@ -35,9 +35,9 @@ export default class SubSectionBasic extends Component {
           @searchEnabled={{true}}
           as |F|
         >
-          <F.Checkbox @value="1">Option 1</F.Checkbox>
-          <F.Checkbox @value="2">Option 2</F.Checkbox>
-          <F.Checkbox @value="3">Option 3</F.Checkbox>
+          <F.Checkbox @value="1" @label="Option 1" />
+          <F.Checkbox @value="2" @label="Option 2" />
+          <F.Checkbox @value="3" @label="Option 3" />
         </D.FilterGroup>
         <D.FilterGroup
           @key="single-select"
@@ -46,9 +46,9 @@ export default class SubSectionBasic extends Component {
           @searchEnabled={{true}}
           as |F|
         >
-          <F.Radio @value="1">Option 1</F.Radio>
-          <F.Radio @value="2">Option 2</F.Radio>
-          <F.Radio @value="3">Option 3</F.Radio>
+          <F.Radio @value="1" @label="Option 1" />
+          <F.Radio @value="2" @label="Option 2" />
+          <F.Radio @value="3" @label="Option 3" />
         </D.FilterGroup>
         <D.FilterGroup @key="numerical" @text="Numerical" @type="numerical" />
         <D.FilterGroup @key="date" @text="Date" @type="date" />

Original file line number	Diff line number	Diff line change
@@ -18,6 +18,7 @@ export type HdsFilterBarFilterType = `${HdsFilterBarFilterTypeValues}`;
`18`	`18`
`19`	`19`	`export interface HdsFilterBarGenericFilterData {`
`20`	`20`	`value: unknown;`
	`21`	`+ label?: string;`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`export interface HdsFilterBarNumericalFilterData {`