diff --git a/CHANGELOG.md b/CHANGELOG.md index f3464bc7193..8d669d13c95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,16 @@ # [`master`](https://github.com/elastic/eui/tree/master) - Adjust `EuiCallOut` and dark theme warning coloring ([#563](https://github.com/elastic/eui/pull/563)) +- Added a `buttonColor` prop to `EuiConfirmModal` ([#546](https://github.com/elastic/eui/pull/546)) +- Added 'baseline' as option to `EuiFlexGroup`'s `alignItems` prop ([#546](https://github.com/elastic/eui/pull/546)) **Bug fixes** - Fixed `EuiToolTip` bug which caused the tooltip to hide when moving the mouse around inside of the trigger element ([#557](https://github.com/elastic/eui/pull/557), [#564](https://github.com/elastic/eui/pull/564)) -- Added a `buttonColor` prop to `EuiConfirmModal` ([#546](https://github.com/elastic/eui/pull/546)) -- Added 'baseline' as option to `EuiFlexGroup`'s `alignItems` prop ([#546](https://github.com/elastic/eui/pull/546)) - Fixed a bug where `EuiButtonEmpty` would offer a white background on hover when it was disabled, even when there was no such background transition on hover when the buttons are not disabled ([#561](https://github.com/elastic/eui/pull/561)) +- Fixed table cell bugs ([#565](https://github.com/elastic/eui/pull/565)) + - `EuiBasicTable` now supports explicitly setting `truncateText` and `textOnly` on column definitions, and supports passing through unrecognized props to the cell (e.g. `data-test-subj`). + - Updated table cell CSS so that long single-word cell content will break and wrap mid-word. # [`0.0.33`](https://github.com/elastic/eui/tree/v0.0.33) diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js index 9ae61b066be..8c0b922914b 100644 --- a/src-docs/src/views/tables/actions/actions.js +++ b/src-docs/src/views/tables/actions/actions.js @@ -129,10 +129,12 @@ export class Table extends Component { const columns = [{ field: 'firstName', name: 'First Name', + truncateText: true, sortable: true }, { field: 'lastName', - name: 'Last Name' + name: 'Last Name', + truncateText: true, }, { field: 'github', name: 'Github', diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js index 16169eca20c..a342662fcc2 100644 --- a/src-docs/src/views/tables/basic/basic.js +++ b/src-docs/src/views/tables/basic/basic.js @@ -35,18 +35,19 @@ const store = createDataStore(); export const Table = () => { const columns = [{ field: 'firstName', - name: 'First Name' + name: 'First Name', + sortable: true, + 'data-test-subj': 'firstNameCell', }, { field: 'lastName', - name: 'Last Name' + name: 'Last Name', + truncateText: true, + render: (name) => ( + {name} + ) }, { field: 'github', name: 'Github', - render: (username) => ( - - {username} - - ) }, { field: 'dateOfBirth', name: 'Date of Birth', diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js index 6def976ac13..872a562579d 100644 --- a/src-docs/src/views/tables/custom/custom.js +++ b/src-docs/src/views/tables/custom/custom.js @@ -65,10 +65,7 @@ export default class extends Component { health: Healthy, }, { id: 2, - title: { - value: 'Boomerang', - isLink: true, - }, + title: A very long line in an ELEMENT which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis, type: 'user', dateCreated: Tue Dec 01 2016   New!, magnitude: 10, @@ -76,8 +73,8 @@ export default class extends Component { }, { id: 3, title: { - value: 'Celebration', - isLink: true, + value: A very long line in an ELEMENT which will not wrap on narrower screens and instead will become truncated and replaced by an ellipsis, + truncateText: true, }, type: 'user', dateCreated: 'Tue Dec 16 2016', diff --git a/src-docs/src/views/tables/data_store.js b/src-docs/src/views/tables/data_store.js index 8e2f8dfe212..48ade059002 100644 --- a/src-docs/src/views/tables/data_store.js +++ b/src-docs/src/views/tables/data_store.js @@ -35,8 +35,8 @@ const createUsers = (countries) => { return times(20, (index) => { return { id: index, - firstName: random.oneOf(['Martijn', 'Elissa', 'Clinton', 'Igor', 'Karl', 'Drew', 'Honza', 'Rashid', 'Jordan']), - lastName: random.oneOf(['van Groningen', 'Weve', 'Gormley', 'Motov', 'Minarik', 'Raines', 'Král', 'Khan', 'Sissel']), + firstName: random.oneOf(['Very long first name that will wrap or be truncated', 'Another very long first name which will wrap or be truncated', 'Clinton', 'Igor', 'Karl', 'Drew', 'Honza', 'Rashid', 'Jordan']), + lastName: random.oneOf(['Very long last name that will wrap or be truncated', 'Another very long last name which will wrap or be truncated', 'Gormley', 'Motov', 'Minarik', 'Raines', 'Král', 'Khan', 'Sissel']), github: random.oneOf(['martijnvg', 'elissaw', 'clintongormley', 'imotov', 'karmi', 'drewr', 'HonzaKral', 'rashidkpc', 'jordansissel']), dateOfBirth: random.date({ min: new Date(1971, 0, 0), max: new Date(1990, 0, 0) }), nationality: random.oneOf(countries.map(country => country.code)), diff --git a/src-docs/src/views/tables/in_memory/in_memory.js b/src-docs/src/views/tables/in_memory/in_memory.js index 7c79af01daf..5c69ec7326e 100644 --- a/src-docs/src/views/tables/in_memory/in_memory.js +++ b/src-docs/src/views/tables/in_memory/in_memory.js @@ -35,10 +35,12 @@ export const Table = () => { const columns = [{ field: 'firstName', name: 'First Name', - sortable: true + sortable: true, + truncateText: true, }, { field: 'lastName', - name: 'Last Name' + name: 'Last Name', + truncateText: true, }, { field: 'github', name: 'Github', diff --git a/src-docs/src/views/tables/in_memory/in_memory_search.js b/src-docs/src/views/tables/in_memory/in_memory_search.js index ebabdadd16e..3c5889cc32b 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search.js @@ -49,10 +49,12 @@ export class Table extends Component { const columns = [{ field: 'firstName', name: 'First Name', - sortable: true + sortable: true, + truncateText: true, }, { field: 'lastName', - name: 'Last Name' + name: 'Last Name', + truncateText: true, }, { field: 'github', name: 'Github', diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback.js index a0bc358ef23..fbf5132d372 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_callback.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback.js @@ -88,11 +88,13 @@ export class Table extends React.Component { { field: 'firstName', name: 'First Name', - sortable: true + sortable: true, + truncateText: true, }, { field: 'lastName', - name: 'Last Name' + name: 'Last Name', + truncateText: true, }, { field: 'github', diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection.js b/src-docs/src/views/tables/in_memory/in_memory_selection.js index bdc67665c8a..2ccbcc3ad63 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_selection.js +++ b/src-docs/src/views/tables/in_memory/in_memory_selection.js @@ -144,10 +144,12 @@ export class Table extends Component { const columns = [{ field: 'firstName', name: 'First Name', - sortable: true + sortable: true, + truncateText: true, }, { field: 'lastName', - name: 'Last Name' + name: 'Last Name', + truncateText: true, }, { field: 'github', name: 'Github', diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js index 85c0cabc71f..c2824f3e55a 100644 --- a/src-docs/src/views/tables/paginated/paginated.js +++ b/src-docs/src/views/tables/paginated/paginated.js @@ -69,10 +69,12 @@ export class Table extends Component { const columns = [{ field: 'firstName', - name: 'First Name' + name: 'First Name', + truncateText: true, }, { field: 'lastName', - name: 'Last Name' + name: 'Last Name', + truncateText: true, }, { field: 'github', name: 'Github', diff --git a/src-docs/src/views/tables/selection/selection.js b/src-docs/src/views/tables/selection/selection.js index 3cdd583fad3..c381e8b04cf 100644 --- a/src-docs/src/views/tables/selection/selection.js +++ b/src-docs/src/views/tables/selection/selection.js @@ -117,10 +117,12 @@ export class Table extends Component { const columns = [{ field: 'firstName', name: 'First Name', - sortable: true + sortable: true, + truncateText: true, }, { field: 'lastName', - name: 'Last Name' + name: 'Last Name', + truncateText: true, }, { field: 'github', name: 'Github', diff --git a/src-docs/src/views/tables/sorting/sorting.js b/src-docs/src/views/tables/sorting/sorting.js index 9fc851ff8d5..2c9904663bd 100644 --- a/src-docs/src/views/tables/sorting/sorting.js +++ b/src-docs/src/views/tables/sorting/sorting.js @@ -81,10 +81,12 @@ export class Table extends Component { const columns = [{ field: 'firstName', name: 'First Name', - sortable: true + sortable: true, + truncateText: true, }, { field: 'lastName', - name: 'Last Name' + name: 'Last Name', + truncateText: true, }, { field: 'github', name: 'Github', diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js index 812520f7392..4f4e7ab824f 100644 --- a/src/components/basic_table/basic_table.js +++ b/src/components/basic_table/basic_table.js @@ -557,26 +557,56 @@ export class EuiBasicTable extends Component { } renderItemFieldDataCell(itemId, item, column, columnIndex) { - const key = `_data_column_${column.field}_${itemId}_${columnIndex}`; + const { + field, + render, + textOnly, + name, // eslint-ignore-line no-unused-vars + description, // eslint-ignore-line no-unused-vars + dataType, // eslint-ignore-line no-unused-vars + sortable, // eslint-ignore-line no-unused-vars + ...rest + } = column; + + const key = `_data_column_${field}_${itemId}_${columnIndex}`; const align = this.resolveColumnAlign(column); - const textOnly = !column.render; - const value = get(item, column.field); + const value = get(item, field); const contentRenderer = this.resolveContentRenderer(column); const content = contentRenderer(value, item); return ( - + {content} ); } renderItemComputedCell(itemId, item, column, columnIndex) { + const { + field, // eslint-ignore-line no-unused-vars + render, // eslint-ignore-line no-unused-vars + name, // eslint-ignore-line no-unused-vars + description, // eslint-ignore-line no-unused-vars + dataType, // eslint-ignore-line no-unused-vars + sortable, // eslint-ignore-line no-unused-vars + ...rest + } = column; + const key = `_computed_column_${itemId}_${columnIndex}`; const align = this.resolveColumnAlign(column); const contentRenderer = this.resolveContentRenderer(column); const content = contentRenderer(item); return ( - + {content} ); diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index b294fe63435..277adb61e30 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -104,9 +104,14 @@ padding: $euiSizeS; /* 2 */ } + /** + * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing + * the cell. + */ .euiTableCellContent__text { min-width: 0; text-overflow: ellipsis; + word-break: break-word; /* 1 */ } .euiTableCellContent--alignRight { @@ -128,8 +133,13 @@ .euiTableCellContent--overflowingContent { overflow: visible; white-space: normal; + word-break: break-word; + /** + * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing + * the cell. + */ .euiTableCellContent__text { - overflow: visible; + overflow: visible; /* 1 */ } }