fix(AnalyticalTable): add "Filter" text to column popover (#6165)

Partial cherry-pick of [955271b](955271b) Fixes #6132
SAP · Aug 6, 2024 · 153f91b · 153f91b
1 parent 5a968b9
commit 153f91b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.module.css
@@ -8,7 +8,10 @@
 
 .filterIcon {
   padding-inline-end: 0.5rem;
-  min-width: 1rem;
-  min-height: 1rem;
   color: var(--sapContent_NonInteractiveIconColor);
 }
+
+.filterText {
+  overflow: visible;
+  padding-inline-end: 0.5rem;
+}
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx
@@ -1,11 +1,12 @@
+import { getScopedVarName } from '@ui5/webcomponents-base/CustomElementsScope.js';
 import iconDecline from '@ui5/webcomponents-icons/dist/decline.js';
 import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
 import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
 import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
 import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { MutableRefObject } from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import {
   FlexBoxAlignItems,
@@ -14,7 +15,7 @@ import {
   PopoverPlacementType,
   TextAlign
 } from '../../../enums/index.js';
-import { CLEAR_SORTING, GROUP, SORT_ASCENDING, SORT_DESCENDING, UNGROUP } from '../../../i18n/i18n-defaults.js';
+import { CLEAR_SORTING, FILTER, GROUP, SORT_ASCENDING, SORT_DESCENDING, UNGROUP } from '../../../i18n/i18n-defaults.js';
 import { useCanRenderPortal } from '../../../internal/ssr.js';
 import { stopPropagation } from '../../../internal/stopPropagation.js';
 import { getUi5TagWithSuffix } from '../../../internal/utils.js';
@@ -25,6 +26,7 @@ import type { PopoverDomRef } from '../../../webComponents/Popover/index.js';
 import { Popover } from '../../../webComponents/Popover/index.js';
 import { StandardListItem } from '../../../webComponents/StandardListItem/index.js';
 import { FlexBox } from '../../FlexBox/index.js';
+import { Text } from '../../Text/index.js';
 import type { AnalyticalTableColumnDefinition } from '../types/index.js';
 import { classNames, styleData } from './ColumnHeaderModal.module.css.js';
 
@@ -58,6 +60,16 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
   const sortDescendingText = i18nBundle.getText(SORT_DESCENDING);
   const groupText = i18nBundle.getText(GROUP);
   const ungroupText = i18nBundle.getText(UNGROUP);
+  const filterText = i18nBundle.getText(FILTER);
+
+  const filterStyles = useMemo(() => {
+    if (showFilter) {
+      return {
+        iconDimensions: `var(${getScopedVarName('--_ui5_list_item_icon_size')})`,
+        fontSize: `var(${getScopedVarName('--_ui5_list_item_title_size')})`
+      };
+    }
+  }, [showFilter]);
 
   const handleSort = (e) => {
     const sortType = e.detail.item.getAttribute('data-sort');
@@ -207,10 +219,26 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
           </StandardListItem>
         )}
         {showFilter && (
-          //todo maybe need to enhance Input selection after ui5-webcomponents issue has been fixed (undefined is displayed as val)
-          <CustomListItem type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown}>
+          <CustomListItem type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown} accessibleName={filterText}>
             <FlexBox alignItems={FlexBoxAlignItems.Center}>
-              <Icon name={iconFilter} className={classNames.filterIcon} aria-hidden />
+              <Icon
+                name={iconFilter}
+                className={classNames.filterIcon}
+                aria-hidden
+                style={{
+                  minWidth: filterStyles.iconDimensions,
+                  minHeight: filterStyles.iconDimensions
+                }}
+              />
+              <Text
+                wrapping={false}
+                className={classNames.filterText}
+                style={{
+                  fontSize: filterStyles.fontSize
+                }}
+              >
+                {filterText}
+              </Text>
               <Filter column={column} popoverRef={ref} />
             </FlexBox>
           </CustomListItem>