Change wrapText off by default to truncateText off by default (#133)

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 = <EuiLink href="">{cell.value}</EuiLink>;
-        } else if (cell.isWrapped) {
+        } else if (cell.truncateText) {
           child = cell.value;
         } else {
           child = cell;
@@ -192,7 +192,7 @@ export default class extends Component {
           <EuiTableRowCell
             key={column.id}
             align={column.alignment}
-            wrapText={cell && cell.isWrapped}
+            truncateText={cell && cell.truncateText}
           >
             {child}
           </EuiTableRowCell>

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 = <EuiLink href="">{cell.value}</EuiLink>;
-        } else if (cell.isWrapped) {
+        } else if (cell.truncateText) {
           child = cell.value;
         } else {
           child = cell;
@@ -415,7 +415,7 @@ export default class extends Component {
           <EuiTableRowCell
             key={column.id}
             align={column.alignment}
-            wrapText={cell && cell.isWrapped}
+            truncateText={cell && cell.truncateText}
             textOnly={cell ? cell.textOnly : true}
           >
             {child}

src-docs/src/views/table/table_example.js

@@ -34,7 +34,7 @@ export default props => (
         <p>
           This example has sortable headers which respond to mouse
           interaction and exhibit the desired behavior, and selectable rows. You can apply
-          the <EuiCode>wrapText</EuiCode> prop to cells to wrap their text, or set
+          the <EuiCode>truncateText</EuiCode> prop to cells to enforce a single-line behavior and truncate their contents, or set
           the <EuiCode>textOnly</EuiCode> prop to <EuiCode>false</EuiCode> if they contain
           overflowing content like popovers.
         </p>

src/components/table/__snapshots__/table_row_cell.test.js.snap

@@ -46,12 +46,50 @@ exports[`renders EuiTableRowCell 1`] = `
 </td>
 `;
 
-exports[`wrapText is rendered when specified 1`] = `
+exports[`textOnly defaults to true 1`] = `
 <td
   class="euiTableRowCell"
 >
   <div
-    class="euiTableCellContent euiTableCellContent--wrapText"
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    />
+  </div>
+</td>
+`;
+
+exports[`textOnly is rendered when specified 1`] = `
+<td
+  class="euiTableRowCell"
+>
+  <div
+    class="euiTableCellContent euiTableCellContent--overflowingContent"
+  />
+</td>
+`;
+
+exports[`truncateText defaults to false 1`] = `
+<td
+  class="euiTableRowCell"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    />
+  </div>
+</td>
+`;
+
+exports[`truncateText is rendered when specified 1`] = `
+<td
+  class="euiTableRowCell"
+>
+  <div
+    class="euiTableCellContent euiTableCellContent--truncateText"
   >
     <span
       class="euiTableCellContent__text"

src/components/table/_table.scss

@@ -102,13 +102,11 @@
  */
 .euiTableCellContent {
   display: flex;
-  align-items: center;
+  align-items: center; /* 1 */
   padding: $euiTableCellPadding; /* 2 */
-  white-space: nowrap; /* 3 */
 }
 
   .euiTableCellContent__text {
-    overflow: hidden;
     min-width: 0;
     text-overflow: ellipsis;
   }
@@ -117,11 +115,11 @@
   justify-content: flex-end;
 }
 
-.euiTableCellContent--wrapText {
-  white-space: normal;
+.euiTableCellContent--truncateText {
+  white-space: nowrap; /* 3 */
 
   .euiTableCellContent__text {
-    overflow: visible;
+    overflow: hidden;
   }
 }
 

src/components/table/table_row_cell.js

@@ -16,16 +16,16 @@ export const EuiTableRowCell = ({
   align,
   children,
   className,
-  wrapText,
+  truncateText,
   textOnly,
   ...rest
 }) => {
   const classes = classNames('euiTableRowCell', className);
 
   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,

src/components/table/table_row_cell.test.js

@@ -38,10 +38,36 @@ describe('align', () => {
   });
 });
 
-describe('wrapText', () => {
+describe('textOnly', () => {
+  test('defaults to true', () => {
+    const component = (
+      <EuiTableRowCell />
+    );
+
+    expect(render(component)).toMatchSnapshot();
+  });
+
+  test('is rendered when specified', () => {
+    const component = (
+      <EuiTableRowCell textOnly={false} />
+    );
+
+    expect(render(component)).toMatchSnapshot();
+  });
+});
+
+describe('truncateText', () => {
+  test('defaults to false', () => {
+    const component = (
+      <EuiTableRowCell />
+    );
+
+    expect(render(component)).toMatchSnapshot();
+  });
+
   test('is rendered when specified', () => {
     const component = (
-      <EuiTableRowCell wrapText={true} />
+      <EuiTableRowCell truncateText={true} />
     );
 
     expect(render(component)).toMatchSnapshot();