FilterGroup

Usage

The Filter Group component allows users to filter a list of items based on multiple criteria. Users can select multiple options within different categories to refine their search. This component is designed to enhance user experience by providing a clear and organized way to apply filters.

Types

1. Configurations by sections:
   • With sections and section labels
   • With sections but no section labels
   • Without sections
2. Configurations by options structure:
   • With parent-child relationship between option "All" and other options
   • Without “All” options
3. Dropdown alignment options relative to Filter button:
   • Left-aligned
   • Right-aligned

Anatomy and Behavior

1. Filter button - Icon Button component. It triggers the dropdown.
2. Dropdown container - This is the main clickable area that contains all filter options. It displays the filters and the selected options per filter section.
3. Filters applied indicator - helps user to know if the filters are applied to current view of items.
4. Sections label - Each filter category (e.g., "Filter by date", "Filter by status") is labeled to clearly indicate the type of filters available in that section. It is optional to have them and they can be omitted if the section is self-explanatory by the options it has.
5. Parent option - Checkbox component. Controls the selection of Child options.
6. Child option - Checkbox component. Users can select or deselect each Child option to apply or remove a filter individually or by clicking parent option that will auto-check all children.
7. Option without parent/child - Checkbox component. In cases where there will be too few options (1-4) using select “All” may not be necessary to avoid extra clicks.
8. Divider - subdivides visually if sections are necessary.

INFO

Note: If the contents of any Option are longer than the width of the container, then the text will get truncated and a Title attribute (a native HTML element like Tooltip) will display user the full text that is being hidden.

Behavior

• Filters are dynamically applied as user makes selections.
• Clicking outside the component and on the Filter button closes the expanded dropdown.
• Pressing Tab will trigger :focus state of the component, pressing Enter when focused will open the Dropdown container and using Arrow keys will browse through the Options in the Dropdown container. Pressing Enter while an option is highlighted will select the highlighted Option, and will not close the dropdown unlike in Select component.
• Pressing Tab again when a Filter Group component is focused, will navigate and focus the next component in the UI.
• Pressing Shift+Tab while browsing the Options will focus the container of the Select component back again.

States

• No-filter applied
• Filters applied
• Dropdown expanded: when dropdown is open the Icon Button state is :active
• Dropdown collapsed

Gaps and Sizes

• Dropdown container Width: Adapts to the contents’ width.
• Dropdown container Height: Adapts to the contents’ height.
• Dropdown container paddings: XS
• Gap Between Sections: XS
• Gap Between Options: XS
• Gap Between Divider and Options: XS
• Child option indentation to the left: M
• Gap from Filter button to dropdown: 2XS
• Dropdown container alignment relative to Icon button: Left or Right

Tokens

SCSS Variable

Value

$filterGroup-dropdownContainer-bgColor

--color-grey-98

$filterGroup-dropdownContainer-boxShadow

--elevation-4

$filterGroup-divider-color

--color-grey-80

$filterGroup-sectionLabel-color

--color-grey-54

$filterGroup-item-bgColor--hovered

--color-grey-90

Properties

export interface FilterGroupGenericProps<T extends string | number> extends TooltipProps {
  modelValue: T[];
  segments: FilterGroupOptionSegment<T>[];
  disabled?: boolean;
  alignment?: 'left' | 'right';
  sortOptions?: FilterGroupSortOptions;
  // searchOptions?: FilterGroupSearchOptions;
}

export interface FilterGroupSortOptions {
  order: 'asc' | 'ascending' | 'desc' | 'descending';
  target: 'text' | 'value';
  ignoreCase?: boolean;
}

export interface FilterGroupSearchOptions {
  enableSearch: boolean;
  caseSensitive?: boolean;
  placeholder?: string;
}

FilterGroup option interface:

export interface FilterGroupOptionSegment<T extends string | number> {
  title?: string;
  hasAllOption?: boolean;
  allOptionLabel?: string;
  options: FilterGroupOptionGeneric<T>[];
}

export interface FilterGroupOptionGeneric<T extends string | number> {
  text: string | number,
  value: T;
  isSelected: boolean;
  hasAction?: boolean;
  isDisabled?: boolean;
}

import { TooltipProps } from '../../5.Atoms';

//#region option-props
export interface FilterGroupOptionSegment<T extends string | number> {
  title?: string;
  hasAllOption?: boolean;
  allOptionLabel?: string;
  options: FilterGroupOptionGeneric<T>[];
}

export interface FilterGroupOptionGeneric<T extends string | number> {
  text: string | number,
  value: T;
  isSelected: boolean;
  hasAction?: boolean;
  isDisabled?: boolean;
}
//#endregion option-props

//#region props
export interface FilterGroupGenericProps<T extends string | number> extends TooltipProps {
  modelValue: T[];
  segments: FilterGroupOptionSegment<T>[];
  disabled?: boolean;
  alignment?: 'left' | 'right';
  sortOptions?: FilterGroupSortOptions;
  // searchOptions?: FilterGroupSearchOptions;
}

export interface FilterGroupSortOptions {
  order: 'asc' | 'ascending' | 'desc' | 'descending';
  target: 'text' | 'value';
  ignoreCase?: boolean;
}

export interface FilterGroupSearchOptions {
  enableSearch: boolean;
  caseSensitive?: boolean;
  placeholder?: string;
}
//#endregion props