width attribute for EuiTable cell components (#2452)

* width attribute for table cells * console.warn; accept numbers * console.warn test * CL
elastic · Oct 18, 2019 · 1912146 · 1912146
1 parent fa562a7
commit 1912146
Show file tree

Hide file tree

Showing 16 changed files with 536 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@
 - Added `external` prop to `EuiLink` ([#2442](https://github.com/elastic/eui/pull/2442))
 - Added disabled state to `EuiBadge` ([#2440](https://github.com/elastic/eui/pull/2440))
 
+**Bug fixes**
+
+- Reenabled `width` property for `EuiTable` cell components ([#2452](https://github.com/elastic/eui/pull/2452))
+
 ## [`14.6.0`](https://github.com/elastic/eui/tree/v14.6.0)
 
 - Added new updated `infraApp` and `logsApp` icons. ([#2430](https://github.com/elastic/eui/pull/2430))

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -156,6 +156,11 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       data-test-subj="tableHeaderCell_name_0"
                       role="columnheader"
                       scope="col"
+                      style={
+                        Object {
+                          "width": undefined,
+                        }
+                      }
                     >
                       <div
                         className="euiTableCellContent"
@@ -192,6 +197,11 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                     >
                       <td
                         className="euiTableRowCell"
+                        style={
+                          Object {
+                            "width": undefined,
+                          }
+                        }
                       >
                         <div
                           className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -230,6 +240,11 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                     >
                       <td
                         className="euiTableRowCell"
+                        style={
+                          Object {
+                            "width": undefined,
+                          }
+                        }
                       >
                         <div
                           className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"

diff --git a/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap b/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap
@@ -59,3 +59,71 @@ exports[`EuiTableFooterCell is rendered 1`] = `
   </div>
 </td>
 `;
+
+exports[`EuiTableFooterCell width and style accepts style attribute 1`] = `
+<td
+  class="euiTableFooterCell"
+  style="width:20%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`EuiTableFooterCell width and style accepts width attribute 1`] = `
+<td
+  class="euiTableFooterCell"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`EuiTableFooterCell width and style accepts width attribute as number 1`] = `
+<td
+  class="euiTableFooterCell"
+  style="width:100px"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`EuiTableFooterCell width and style resolves style and width attribute 1`] = `
+<td
+  class="euiTableFooterCell"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
diff --git a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
@@ -67,3 +67,79 @@ exports[`renders EuiTableHeaderCell 1`] = `
   </div>
 </th>
 `;
+
+exports[`width and style accepts style attribute 1`] = `
+<th
+  class="euiTableHeaderCell"
+  role="columnheader"
+  scope="col"
+  style="width:20%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</th>
+`;
+
+exports[`width and style accepts width attribute 1`] = `
+<th
+  class="euiTableHeaderCell"
+  role="columnheader"
+  scope="col"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</th>
+`;
+
+exports[`width and style accepts width attribute as number 1`] = `
+<th
+  class="euiTableHeaderCell"
+  role="columnheader"
+  scope="col"
+  style="width:100px"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</th>
+`;
+
+exports[`width and style resolves style and width attribute 1`] = `
+<th
+  class="euiTableHeaderCell"
+  role="columnheader"
+  scope="col"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</th>
+`;
diff --git a/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap
@@ -12,3 +12,59 @@ exports[`EuiTableHeaderCellCheckbox is rendered 1`] = `
   />
 </th>
 `;
+
+exports[`EuiTableHeaderCellCheckbox width and style accepts style attribute 1`] = `
+<th
+  class="euiTableHeaderCellCheckbox"
+  scope="col"
+  style="width:20%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    Test
+  </div>
+</th>
+`;
+
+exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute 1`] = `
+<th
+  class="euiTableHeaderCellCheckbox"
+  scope="col"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    Test
+  </div>
+</th>
+`;
+
+exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute as number 1`] = `
+<th
+  class="euiTableHeaderCellCheckbox"
+  scope="col"
+  style="width:100px"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    Test
+  </div>
+</th>
+`;
+
+exports[`EuiTableHeaderCellCheckbox width and style resolves style and width attribute 1`] = `
+<th
+  class="euiTableHeaderCellCheckbox"
+  scope="col"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    Test
+  </div>
+</th>
+`;
diff --git a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
@@ -125,3 +125,71 @@ exports[`truncateText is rendered when specified 1`] = `
   </div>
 </td>
 `;
+
+exports[`width and style accepts style attribute 1`] = `
+<td
+  class="euiTableRowCell"
+  style="width:20%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`width and style accepts width attribute 1`] = `
+<td
+  class="euiTableRowCell"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`width and style accepts width attribute as number 1`] = `
+<td
+  class="euiTableRowCell"
+  style="width:100px"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`width and style resolves style and width attribute 1`] = `
+<td
+  class="euiTableRowCell"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
diff --git a/src/components/table/table_footer_cell.test.tsx b/src/components/table/table_footer_cell.test.tsx
@@ -34,4 +34,40 @@ describe('EuiTableFooterCell', () => {
       expect(render(component)).toMatchSnapshot();
     });
   });
+
+  describe('width and style', () => {
+    test('accepts style attribute', () => {
+      const component = (
+        <EuiTableFooterCell style={{ width: '20%' }}>Test</EuiTableFooterCell>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+
+    test('accepts width attribute', () => {
+      const component = (
+        <EuiTableFooterCell width="10%">Test</EuiTableFooterCell>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+
+    test('accepts width attribute as number', () => {
+      const component = (
+        <EuiTableFooterCell width={100}>Test</EuiTableFooterCell>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+
+    test('resolves style and width attribute', () => {
+      const component = (
+        <EuiTableFooterCell width="10%" style={{ width: '20%' }}>
+          Test
+        </EuiTableFooterCell>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+  });
 });