diff --git a/CHANGELOG.md b/CHANGELOG.md index 943bc61dff9..d059ac22ed0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ - Added `prepend` and `append` ability to `EuiFieldPassword` ([#3122](https://github.com/elastic/eui/pull/3122)) - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048)) +- Added `title` to headers of `EuiTable` in case of truncation ([#3094](https://github.com/elastic/eui/pull/3094)) +- Added i18n to `EuiTableHeaderCell` ([#3094](https://github.com/elastic/eui/pull/3094)) **Bug Fixes** diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap index 626acbbb17a..ca1efc513cd 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -163,11 +163,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
- - Name - + + + Name + +
diff --git a/src/components/table/table_header_button.tsx b/src/components/table/table_header_button.tsx index bf305e6d943..09003089881 100644 --- a/src/components/table/table_header_button.tsx +++ b/src/components/table/table_header_button.tsx @@ -1,6 +1,7 @@ import React, { ButtonHTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; +import { EuiInnerText } from '../inner_text'; import { IconType, EuiIcon } from '../icon'; @@ -33,7 +34,14 @@ export const EuiTableHeaderButton: FunctionComponent = ({ return ( ); diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx index db0e2dcdb88..9ddb2694118 100644 --- a/src/components/table/table_header_cell.tsx +++ b/src/components/table/table_header_cell.tsx @@ -9,6 +9,7 @@ import { EuiScreenReaderOnly } from '../accessibility'; import { CommonProps, NoArgCallback } from '../common'; import { EuiIcon } from '../icon'; import { resolveWidthAsStyle } from './utils'; +import { EuiInnerText } from '../inner_text'; import { HorizontalAlignment, @@ -16,6 +17,7 @@ import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT, } from '../../services'; +import { EuiI18n } from '../i18n'; export type TableHeaderCellScope = 'col' | 'row' | 'colgroup' | 'rowgroup'; @@ -105,14 +107,29 @@ export const EuiTableHeaderCell: FunctionComponent = ({ function getScreenCasterDirection() { if (ariaSortValue === 'ascending') { - return 'Click to sort in descending order'; + return ( + + ); } if (allowNeutralSort && ariaSortValue === 'descending') { - return 'Click to unsort'; + return ( + + ); } - return 'Click to sort in ascending order'; + return ( + + ); } return ( @@ -130,14 +147,38 @@ export const EuiTableHeaderCell: FunctionComponent = ({ onClick={onSort} data-test-subj="tableHeaderSortButton"> - {children} + + {(ref, innerText) => ( + + {(titleTextWithSort: string) => ( + + {children} + + )} + + )} + + {isSorted && ( - + + {(sortedAriaLabel: string) => ( + + )} + )} {getScreenCasterDirection()} @@ -156,7 +197,16 @@ export const EuiTableHeaderCell: FunctionComponent = ({ style={styleObj} {...rest}>
- {children} + + {(ref, innerText) => ( + + {children} + + )} +
);