Table: add bottom border to each row (apart from last item) (#1200)

Request from design - add a bottom border to each row in a Table ### Before ![Screen Shot 2020-09-09 at 9 15 11 AM](https://user-images.githubusercontent.com/127199/92626752-34461d00-f27f-11ea-896c-da78c0da3122.png) ### After ![Screen Shot 2020-09-09 at 9 18 23 AM](https://user-images.githubusercontent.com/127199/92626759-36a87700-f27f-11ea-8317-1647fcad37fa.png) ## Test Plan - Test in `<Table />` docs
pinterest · Sep 9, 2020 · 2397ea4 · 2397ea4
1 parent 15147b8
commit 2397ea4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/docs/src/Table.doc.js b/docs/src/Table.doc.js
@@ -81,6 +81,28 @@ card(
         <Text>December 3, 1992</Text>
       </Table.Cell>
     </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Text>Hermione Granger</Text>
+      </Table.Cell>
+      <Table.Cell>
+        <Text>Gryffindor</Text>
+      </Table.Cell>
+      <Table.Cell>
+        <Text>September 19, 1979</Text>
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Text>Neville Longbottom</Text>
+      </Table.Cell>
+      <Table.Cell>
+        <Text>Gryffindor</Text>
+      </Table.Cell>
+      <Table.Cell>
+        <Text>July 30, 1980</Text>
+      </Table.Cell>
+    </Table.Row>
   </Table.Body>
 </Table>
 `}

diff --git a/packages/gestalt/src/Table.css b/packages/gestalt/src/Table.css
@@ -30,3 +30,7 @@
 .thead tr:last-child th {
   border-bottom: 1px solid var(--g-colorGray150);
 }
+
+.tbody tr:not(:last-child) td {
+  border-bottom: 1px solid var(--g-colorGray150);
+}
diff --git a/packages/gestalt/src/Table.css.flow b/packages/gestalt/src/Table.css.flow
@@ -3,6 +3,7 @@
 declare module.exports: {|
   +'sticky': string,
   +'table': string,
+  +'tbody': string,
   +'td': string,
   +'th': string,
   +'thead': string,

diff --git a/packages/gestalt/src/TableBody.js b/packages/gestalt/src/TableBody.js
@@ -1,10 +1,11 @@
 // @flow strict
 import React, { type Node } from 'react';
+import styles from './Table.css';
 
 type Props = {|
   children: Node,
 |};
 
 export default function TableBody(props: Props): Node {
-  return <tbody>{props.children}</tbody>;
+  return <tbody className={styles.tbody}>{props.children}</tbody>;
 }
diff --git a/packages/gestalt/src/__snapshots__/TableBody.test.js.snap b/packages/gestalt/src/__snapshots__/TableBody.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<tbody>
+<tbody
+  className="tbody"
+>
   <div>
     rows
   </div>