diff --git a/src-docs/src/views/table/compressed.js b/src-docs/src/views/table/compressed.js index 501dd1eeed8..ab12572ad61 100644 --- a/src-docs/src/views/table/compressed.js +++ b/src-docs/src/views/table/compressed.js @@ -33,15 +33,15 @@ export default class extends Component { this.items = [{ id: 0, - title: 'A very long line which will not wrap on narrower screens and instead will become truncated and replaced by an ellipsis', + title: 'A very long line which will wrap on narrower screens and NOT become truncated using an ellipsis', type: 'user', dateCreated: 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', magnitude: 1, }, { id: 1, title: { - value: 'A very long line which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis', - isWrapped: true, + value: 'A very long line which will not wrap on narrower screens and instead will become truncated using an ellipsis', + truncateText: true, }, type: 'user', dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)', @@ -182,7 +182,7 @@ export default class extends Component { child = column.cellProvider(cell); } else if (cell.isLink) { child = {cell.value}; - } else if (cell.isWrapped) { + } else if (cell.truncateText) { child = cell.value; } else { child = cell; @@ -192,7 +192,7 @@ export default class extends Component { {child} diff --git a/src-docs/src/views/table/table.js b/src-docs/src/views/table/table.js index 8892150dd35..818f8bdf617 100644 --- a/src-docs/src/views/table/table.js +++ b/src-docs/src/views/table/table.js @@ -43,15 +43,15 @@ export default class extends Component { this.items = [{ id: 0, - title: 'A very long line which will not wrap on narrower screens and instead will become truncated and replaced by an ellipsis', + title: 'A very long line which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis', type: 'user', dateCreated: 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', magnitude: 1, }, { id: 1, title: { - value: 'A very long line which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis', - isWrapped: true, + value: 'A very long line which will not wrap on narrower screens and instead will become truncated and replaced by an ellipsis', + truncateText: true, }, type: 'user', dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)', @@ -405,7 +405,7 @@ export default class extends Component { child = column.cellProvider(cell); } else if (cell.isLink) { child = {cell.value}; - } else if (cell.isWrapped) { + } else if (cell.truncateText) { child = cell.value; } else { child = cell; @@ -415,7 +415,7 @@ export default class extends Component { {child} diff --git a/src-docs/src/views/table/table_example.js b/src-docs/src/views/table/table_example.js index 284cda26fe0..f5fc865ded6 100644 --- a/src-docs/src/views/table/table_example.js +++ b/src-docs/src/views/table/table_example.js @@ -34,7 +34,7 @@ export default props => (

This example has sortable headers which respond to mouse interaction and exhibit the desired behavior, and selectable rows. You can apply - the wrapText prop to cells to wrap their text, or set + the truncateText prop to cells to enforce a single-line behavior and truncate their contents, or set the textOnly prop to false if they contain overflowing content like popovers.

diff --git a/src/components/table/__snapshots__/table_row_cell.test.js.snap b/src/components/table/__snapshots__/table_row_cell.test.js.snap index 36f54970c54..bad727f71c9 100644 --- a/src/components/table/__snapshots__/table_row_cell.test.js.snap +++ b/src/components/table/__snapshots__/table_row_cell.test.js.snap @@ -46,12 +46,50 @@ exports[`renders EuiTableRowCell 1`] = ` `; -exports[`wrapText is rendered when specified 1`] = ` +exports[`textOnly defaults to true 1`] = `
+ +
+ +`; + +exports[`textOnly is rendered when specified 1`] = ` + +
+ +`; + +exports[`truncateText defaults to false 1`] = ` + +
+ +
+ +`; + +exports[`truncateText is rendered when specified 1`] = ` + +
{ @@ -24,8 +24,8 @@ export const EuiTableRowCell = ({ const contentClasses = classNames('euiTableCellContent', className, { 'euiTableCellContent--alignRight': align === RIGHT_ALIGNMENT, - 'euiTableCellContent--wrapText': wrapText, - // We're doing this rigamarole instead of creating kuiTabelRowCell--textOnly for BWC + 'euiTableCellContent--truncateText': truncateText, + // We're doing this rigamarole instead of creating `euiTableRowCell--textOnly` for BWC // purposes for the time-being. 'euiTableCellContent--overflowingContent': !textOnly, }); @@ -45,7 +45,7 @@ export const EuiTableRowCell = ({ EuiTableRowCell.propTypes = { align: PropTypes.oneOf(ALIGNMENT), - wrapText: PropTypes.bool, + truncateText: PropTypes.bool, children: PropTypes.node, className: PropTypes.string, textOnly: PropTypes.bool, diff --git a/src/components/table/table_row_cell.test.js b/src/components/table/table_row_cell.test.js index 39eb533fb69..136db7d3f5a 100644 --- a/src/components/table/table_row_cell.test.js +++ b/src/components/table/table_row_cell.test.js @@ -38,10 +38,36 @@ describe('align', () => { }); }); -describe('wrapText', () => { +describe('textOnly', () => { + test('defaults to true', () => { + const component = ( + + ); + + expect(render(component)).toMatchSnapshot(); + }); + + test('is rendered when specified', () => { + const component = ( + + ); + + expect(render(component)).toMatchSnapshot(); + }); +}); + +describe('truncateText', () => { + test('defaults to false', () => { + const component = ( + + ); + + expect(render(component)).toMatchSnapshot(); + }); + test('is rendered when specified', () => { const component = ( - + ); expect(render(component)).toMatchSnapshot();