Feat: Range input - between selector

Author: dchyun

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

@@ -24,6 +24,7 @@ import type {
   HdsFilterBarGenericFilterData,
   HdsFilterBarRangeFilterData,
   HdsFilterBarRangeFilterSelector,
+  HdsFilterBarRangeFilterValue,
 } from './types.ts';
 
 export interface HdsFilterBarFilterGroupSignature {
@@ -154,7 +155,7 @@ export default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilte
   @action
   onRangeChange(
     selector?: HdsFilterBarRangeFilterSelector,
-    value?: number
+    value?: HdsFilterBarRangeFilterValue
   ): void {
     const addFilter = (): HdsFilterBarData => {
       const newFilter = {

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

@@ -6,9 +6,11 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
 
 import type { WithBoundArgs } from '@glint/template';
 
+import type HdsIntlService from '../../../services/hds-intl';
 import type {
   HdsFilterBarFilters,
   HdsFilterBarFilter,
@@ -42,6 +44,8 @@ export interface HdsFilterBarSignature {
 }
 
 export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
+  @service hdsIntl!: HdsIntlService;
+
   @tracked _isExpanded: boolean = true;
 
   get searchValue(): string {
@@ -169,7 +173,22 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
 
   private _rangeFilterText = (data: HdsFilterBarData): string => {
     if ('selector' in data && 'value' in data) {
-      return `${SELECTORS_DISPLAY_SYMBOL[data.selector]} ${data.value}`;
+      if (
+        data.selector === 'between' &&
+        typeof data.value === 'object' &&
+        data.value !== null
+      ) {
+        const separatorText = this.hdsIntl.t(
+          'hds.components.filter-bar.filter-text.range-filter.separator',
+          {
+            default: 'and',
+          }
+        );
+        return `${SELECTORS_DISPLAY_SYMBOL[data.selector]} ${data.value.start} ${separatorText} ${data.value.end}`;
+      } else if (typeof data.value !== 'object') {
+        return `${SELECTORS_DISPLAY_SYMBOL[data.selector]} ${data.value}`;
+      }
+      return '';
     } else {
       return '';
     }

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

@@ -3,11 +3,11 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 <div class="hds-filter-bar__filters-dropdown__filter-range">
-  <Hds::Form::Label>
-    {{hds-t "hds.components.filter-bar.range.label" default="Number is"}}
-  </Hds::Form::Label>
   <Hds::Layout::Flex @direction="column" @gap="16">
-    <Hds::Form::Select::Base @id={{this._selectorInputId}} {{on "change" this.onSelectorChange}} as |F|>
+    <Hds::Form::Select::Field @id={{this._selectorInputId}} {{on "change" this.onSelectorChange}} as |F|>
+      <F.Label>
+        {{hds-t "hds.components.filter-bar.range.label" default="Number is"}}
+      </F.Label>
       <F.Options>
         <option value="">{{hds-t
             "hds.components.filter-bar.range.selector-input.default-value"
@@ -19,13 +19,32 @@
             }}</option>
         {{/each}}
       </F.Options>
-    </Hds::Form::Select::Base>
-    <Hds::Form::TextInput::Base
-      @id={{this._valueInputId}}
-      @type="text"
-      @value={{this.stringValue}}
-      placeholder={{hds-t "hds.components.filter-bar.range.value-input.placeholder" default="Enter a value"}}
-      {{on "change" this.onValueChange}}
-    />
+    </Hds::Form::Select::Field>
+    {{#if (eq this._selector "between")}}
+      <Hds::Layout::Flex @gap="8">
+        <Hds::Form::TextInput::Base
+          @id={{this._betweenValueStartInputId}}
+          @type="text"
+          @value={{this.stringBetweenValueStart}}
+          placeholder={{hds-t "hds.components.filter-bar.between-value-inputs.start-placeholder" default="Start"}}
+          {{on "change" this.onBetweenValueStartChange}}
+        />
+        <Hds::Form::TextInput::Base
+          @id={{this._betweenValueEndInputId}}
+          @type="text"
+          @value={{this.stringBetweenValueEnd}}
+          placeholder={{hds-t "hds.components.filter-bar.between-value-inputs.end-placeholder" default="End"}}
+          {{on "change" this.onBetweenValueEndChange}}
+        />
+      </Hds::Layout::Flex>
+    {{else}}
+      <Hds::Form::TextInput::Base
+        @id={{this._valueInputId}}
+        @type="text"
+        @value={{this.stringValue}}
+        placeholder={{hds-t "hds.components.filter-bar.range.value-input.placeholder" default="Enter a value"}}
+        {{on "change" this.onValueChange}}
+      />
+    {{/if}}
   </Hds::Layout::Flex>
 </div>

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

@@ -14,6 +14,7 @@ import type HdsIntlService from '../../../services/hds-intl';
 import type {
   HdsFilterBarData,
   HdsFilterBarRangeFilterSelector,
+  HdsFilterBarRangeFilterValue,
 } from './types.ts';
 import { HdsFilterBarRangeFilterSelectorValues } from './types.ts';
 
@@ -32,6 +33,7 @@ export const SELECTORS_DISPLAY_TEXT: Record<
   [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]:
     'Greater than or equal to (≥)',
   [HdsFilterBarRangeFilterSelectorValues.greaterThan]: 'Greater than (>)',
+  [HdsFilterBarRangeFilterSelectorValues.between]: 'Between',
 };
 
 export const SELECTORS_DISPLAY_SYMBOL: Record<
@@ -43,14 +45,15 @@ export const SELECTORS_DISPLAY_SYMBOL: Record<
   [HdsFilterBarRangeFilterSelectorValues.equalTo]: '=',
   [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: '≥',
   [HdsFilterBarRangeFilterSelectorValues.greaterThan]: '>',
+  [HdsFilterBarRangeFilterSelectorValues.between]: 'between',
 };
 
 export interface HdsFilterBarRangeSignature {
   Args: {
     keyFilter: HdsFilterBarData | undefined;
     onChange?: (
       selector?: HdsFilterBarRangeFilterSelector,
-      value?: number
+      value?: HdsFilterBarRangeFilterValue
     ) => void;
   };
   Blocks: {
@@ -64,40 +67,59 @@ export default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignat
 
   @tracked private _selector: HdsFilterBarRangeFilterSelector | undefined;
   @tracked private _value: number | undefined;
+  @tracked private _betweenValueStart: number | undefined;
+  @tracked private _betweenValueEnd: number | undefined;
 
   private _selectorValues = SELECTORS;
   private _selectorInputId = 'selector-input-' + guidFor(this);
   private _valueInputId = 'value-input-' + guidFor(this);
+  private _betweenValueStartInputId =
+    'between-value-start-input-' + guidFor(this);
+  private _betweenValueEndInputId = 'between-value-end-input-' + guidFor(this);
 
   constructor(owner: Owner, args: HdsFilterBarRangeSignature['Args']) {
     super(owner, args);
 
     const { keyFilter } = this.args;
     if (keyFilter && 'selector' in keyFilter) {
       this._selector = keyFilter.selector;
-      this._value = keyFilter.value;
+      if (keyFilter.selector === 'between') {
+        if (keyFilter.value && typeof keyFilter.value === 'object') {
+          this._betweenValueStart = Number(keyFilter.value.start);
+          this._betweenValueEnd = Number(keyFilter.value.end);
+        }
+      } else {
+        this._value = Number(keyFilter.value);
+      }
     }
   }
 
   get stringValue(): string | undefined {
     return this._value !== undefined ? this._value.toString() : undefined;
   }
 
-  private _selectorText = (
-    selector: HdsFilterBarRangeFilterSelector
-  ): string => {
-    return this.hdsIntl.t(
-      `hds.components.filter-bar.range.selector-input.${selector}`,
-      {
-        default: 'test',
-      }
-    );
-  };
+  get stringBetweenValueStart(): string | undefined {
+    return this._betweenValueStart !== undefined
+      ? this._betweenValueStart.toString()
+      : undefined;
+  }
+
+  get stringBetweenValueEnd(): string | undefined {
+    return this._betweenValueEnd !== undefined
+      ? this._betweenValueEnd.toString()
+      : undefined;
+  }
 
   @action
   onSelectorChange(event: Event): void {
     const select = event.target as HTMLSelectElement;
     this._selector = select.value as HdsFilterBarRangeFilterSelector;
+    if (this._selector === 'between') {
+      this._value = undefined;
+    } else {
+      this._betweenValueStart = undefined;
+      this._betweenValueEnd = undefined;
+    }
     this._onChange();
   }
 
@@ -108,10 +130,46 @@ export default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignat
     this._onChange();
   }
 
+  @action
+  onBetweenValueStartChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this._betweenValueStart = parseFloat(input.value);
+    this._onChange();
+  }
+
+  @action
+  onBetweenValueEndChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this._betweenValueEnd = parseFloat(input.value);
+    this._onChange();
+  }
+
   private _onChange(): void {
     const { onChange } = this.args;
     if (onChange && typeof onChange === 'function') {
-      onChange(this._selector, this._value);
+      if (
+        this._selector === 'between' &&
+        this._betweenValueStart !== undefined &&
+        this._betweenValueEnd !== undefined
+      ) {
+        onChange(this._selector, {
+          start: this._betweenValueStart,
+          end: this._betweenValueEnd,
+        });
+      } else {
+        onChange(this._selector, this._value);
+      }
     }
   }
+
+  private _selectorText = (
+    selector: HdsFilterBarRangeFilterSelector
+  ): string => {
+    return this.hdsIntl.t(
+      `hds.components.filter-bar.range.selector-input.${selector}`,
+      {
+        default: 'test',
+      }
+    );
+  };
 }

packages/components/src/components/hds/filter-bar/tabs/index.ts

@@ -114,7 +114,6 @@ export default class HdsFilterBarTabs extends Component<HdsFilterBarTabsSignatur
 
   @action
   onClick(event: MouseEvent, tabIndex: number): void {
-    console.log('onClick event in Tabs:', event, tabIndex);
     this._selectedTabIndex = tabIndex;
 
     // invoke the callback function if it's provided as argument

packages/components/src/components/hds/filter-bar/tabs/tab.ts

@@ -87,8 +87,6 @@ export default class HdsFilterBarTabsTab extends Component<HdsFilterBarTabsTabSi
   onClick(event: MouseEvent): false | undefined {
     const { onClick } = this.args;
 
-    console.log('onClick event in Tab:', event);
-
     if (this.nodeIndex !== undefined && typeof onClick === 'function') {
       onClick(event, this.nodeIndex);
     } else {

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

@@ -19,7 +19,7 @@ export interface HdsFilterBarGenericFilterData {
 
 export interface HdsFilterBarRangeFilterData {
   selector: HdsFilterBarRangeFilterSelector;
-  value: number;
+  value: HdsFilterBarRangeFilterValue;
 }
 
 export type HdsFilterBarData =
@@ -67,7 +67,12 @@ export enum HdsFilterBarRangeFilterSelectorValues {
   equalTo = 'equal-to',
   greaterThanOrEqualTo = 'greater-than-or-equal-to',
   greaterThan = 'greater-than',
+  between = 'between',
 }
 
 export type HdsFilterBarRangeFilterSelector =
   `${HdsFilterBarRangeFilterSelectorValues}`;
+
+export type HdsFilterBarRangeFilterValue =
+  | number
+  | { start?: number; end?: number };

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

@@ -59,11 +59,11 @@
   padding: 0;
 }
 
-.hds-filter-bar__filters-dropdown .hds-layout-flex {
+.hds-filter-bar__filters-dropdown .hds-dropdown__footer .hds-layout-flex {
   margin: 8px 0;
 }
 
-.hds-filter-bar__filters-dropdown .hds-button-set {
+.hds-filter-bar__filters-dropdown .hds-dropdown__footer .hds-button-set {
   gap: 8px;
 }
 

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

@@ -1,3 +1,6 @@
 search:
   aria-label: Search filters
   placeholder: Search
+filter-text:
+  range-filter:
+    separator: and

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

@@ -6,5 +6,9 @@ selector-input:
   equal-to: Equal to (=)
   greater-than-or-equal-to: Greater than or equal to (≥)
   greater-than: Greater than (>)
+  between: Between
 value-input:
   placeholder: Enter a value
+between-value-inputs:
+  start-placeholder: Start
+  end-placeholder: End