Title will now include description if provided

elastic · Apr 26, 2021 · 75a94ae · 75a94ae
1 parent e6fd955
commit 75a94ae
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Fixed `EuiInMemoryTable` `pagination` prop to update visible items when changed ([#4714](https://github.com/elastic/eui/pull/4714))
 - Fixed a bug in `EuiFilePicker` where the HTML input was being shown when `disabled` ([#4738](https://github.com/elastic/eui/pull/4738))
 - Fixed inverted asc and desc labels for `EuiDataGrid` `datetime` schema ([#4733](https://github.com/elastic/eui/pull/4733))
+- Fixed `description` prop in `EuiTable`([#4754](https://github.com/elastic/eui/pull/4754))
 
 ## [`32.1.0`](https://github.com/elastic/eui/tree/v32.1.0)
 

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -47,6 +47,7 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -171,6 +172,7 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -297,6 +299,7 @@ exports[`EuiBasicTable empty is rendered 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -365,6 +368,7 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -441,6 +445,7 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -509,20 +514,23 @@ exports[`EuiBasicTable footers do not render without a column footer definition
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="your name"
           key="_data_h_name_0"
         >
           Name
         </EuiTableHeaderCell>
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_id_1"
+          description="your id"
           key="_data_h_id_1"
         >
           ID
         </EuiTableHeaderCell>
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_age_2"
+          description="your age"
           key="_data_h_age_2"
         >
           Age
@@ -756,6 +764,7 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="your name"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -766,13 +775,15 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_id_1"
+          description="your id"
           key="_data_h_id_1"
         >
           ID
         </EuiTableHeaderCell>
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_age_2"
+          description="your age"
           key="_data_h_age_2"
         >
           Age
@@ -1045,6 +1056,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -1174,6 +1186,7 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -1304,6 +1317,7 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -1581,6 +1595,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
                 <EuiTableHeaderCell
                   align="left"
                   data-test-subj="tableHeaderCell_name_0"
+                  description="description"
                   key="_data_h_name_0"
                 >
                   <th
@@ -1600,7 +1615,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
                       <EuiInnerText>
                         <span
                           className="euiTableCellContent__text"
-                          title="Name"
+                          title="description"
                         >
                           Name
                         </span>
@@ -1950,6 +1965,7 @@ exports[`EuiBasicTable with multiple record actions with custom availability 1`]
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -2262,6 +2278,7 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -2374,6 +2391,7 @@ exports[`EuiBasicTable with pagination 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -2504,6 +2522,7 @@ exports[`EuiBasicTable with pagination and error 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -2597,6 +2616,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -2760,6 +2780,7 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -2922,6 +2943,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -3119,6 +3141,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -3409,6 +3432,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
         <EuiTableHeaderCell
           align="right"
           data-test-subj="tableHeaderCell_count_0"
+          description="description of count"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_count_0"
@@ -3606,6 +3630,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -3803,6 +3828,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -4111,6 +4137,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
         <EuiTableHeaderCell
           align="right"
           data-test-subj="tableHeaderCell_count_0"
+          description="description of count"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_count_0"
@@ -4274,6 +4301,7 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           key="_data_h_name_0"
         >
           Name
@@ -4403,6 +4431,7 @@ exports[`EuiBasicTable with sorting 1`] = `
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -4535,6 +4564,7 @@ exports[`EuiBasicTable with sorting enabled and enable all columns for sorting 1
         <EuiTableHeaderCell
           align="left"
           data-test-subj="tableHeaderCell_name_0"
+          description="description"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"

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
@@ -150,6 +150,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                   <EuiTableHeaderCell
                     align="left"
                     data-test-subj="tableHeaderCell_name_0"
+                    description="description"
                     key="_data_h_name_0"
                   >
                     <th
@@ -169,7 +170,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                         <EuiInnerText>
                           <span
                             className="euiTableCellContent__text"
-                            title="Name"
+                            title="description"
                           >
                             Name
                           </span>
@@ -1001,6 +1002,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
                   <EuiTableHeaderCell
                     align="left"
                     data-test-subj="tableHeaderCell_name_0"
+                    description="description"
                     key="_data_h_name_0"
                   >
                     <th
@@ -1020,7 +1022,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
                         <EuiInnerText>
                           <span
                             className="euiTableCellContent__text"
-                            title="Name"
+                            title="description"
                           >
                             Name
                           </span>

diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
@@ -811,6 +811,7 @@ export class EuiBasicTable<T = any> extends Component<
         isMobileHeader,
         hideForMobile,
         readOnly,
+        description,
       } = column as EuiTableFieldDataColumnType<T>;
 
       const columnAlign = align || this.getAlignForDataType(dataType);
@@ -822,6 +823,7 @@ export class EuiBasicTable<T = any> extends Component<
             key={`_actions_h_${index}`}
             align="right"
             width={width}
+            description={description}
             mobileOptions={mobileOptions}>
             {name}
           </EuiTableHeaderCell>
@@ -850,6 +852,7 @@ export class EuiBasicTable<T = any> extends Component<
             width={width}
             mobileOptions={mobileOptions}
             data-test-subj={`tableHeaderCell_${name}_${index}`}
+            description={description}
             {...sorting}>
             {name}
           </EuiTableHeaderCell>
@@ -893,6 +896,7 @@ export class EuiBasicTable<T = any> extends Component<
           hideForMobile={hideForMobile}
           mobileOptions={mobileOptions}
           data-test-subj={`tableHeaderCell_${field}_${index}`}
+          description={description}
           {...sorting}>
           {name}
         </EuiTableHeaderCell>

diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx
@@ -79,6 +79,7 @@ export type EuiTableHeaderCellProps = CommonProps &
     onSort?: NoArgCallback<void>;
     scope?: TableHeaderCellScope;
     width?: string | number;
+    description?: string;
     /**
      * Shows the sort indicator but removes the button
      */
@@ -103,6 +104,7 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
   // Soon to be deprecated for {...mobileOptions}
   isMobileHeader,
   hideForMobile,
+  description,
   ...rest
 }) => {
   const classes = classNames('euiTableHeaderCell', className, {
@@ -166,7 +168,9 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
               values={{ innerText, ariaSortValue }}>
               {(titleTextWithSort: string) => (
                 <span
-                  title={isSorted ? titleTextWithSort : innerText}
+                  title={
+                    isSorted ? titleTextWithSort : description || innerText
+                  }
                   ref={ref}
                   className="euiTableCellContent__text">
                   {children}
@@ -223,7 +227,7 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
         <EuiInnerText>
           {(ref, innerText) => (
             <span
-              title={innerText}
+              title={description || innerText}
               ref={ref}
               className="euiTableCellContent__text">
               {children}