diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.module.css index 633629132f0..c630b7f9bcb 100644 --- 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 index e8328e4124e..88eada23974 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx @@ -1,6 +1,7 @@ import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js'; import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; +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'; @@ -8,9 +9,9 @@ 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 { FlexBoxAlignItems, 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 { stopPropagation } from '../../../internal/stopPropagation.js'; import { getUi5TagWithSuffix } from '../../../internal/utils.js'; import { Icon } from '../../../webComponents/Icon/index.js'; @@ -19,6 +20,7 @@ import { ListItemCustom } from '../../../webComponents/ListItemCustom/index.js'; import { ListItemStandard } from '../../../webComponents/ListItemStandard/index.js'; import type { PopoverDomRef } from '../../../webComponents/Popover/index.js'; import { Popover } from '../../../webComponents/Popover/index.js'; +import { Text } from '../../../webComponents/Text/index.js'; import { FlexBox } from '../../FlexBox/index.js'; import type { AnalyticalTableColumnDefinition } from '../types/index.js'; import { classNames, styleData } from './ColumnHeaderModal.module.css.js'; @@ -52,6 +54,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'); @@ -195,10 +207,26 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => { </ListItemStandard> )} {showFilter && ( - //todo maybe need to enhance Input selection after ui5-webcomponents issue has been fixed (undefined is displayed as val) - <ListItemCustom type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown}> + <ListItemCustom 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 + maxLines={1} + className={classNames.filterText} + style={{ + fontSize: filterStyles.fontSize + }} + > + {filterText} + </Text> <Filter column={column} popoverRef={ref} /> </FlexBox> </ListItemCustom>