remove requirement of thead and tbody

OfficeDev · Jun 16, 2018 · c112654 · c112654
1 parent cd15964
commit c112654
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 24 deletions.
diff --git a/gh-pages/src/examples/table.example.jsx b/gh-pages/src/examples/table.example.jsx
@@ -32,25 +32,15 @@ class TableExample extends React.Component {
         <PanelBody>
           <div style={styles.section}>Single Column</div>
           <Table>
-            <THead>
-              <Tr><Th>col1</Th></Tr>
-            </THead>
-            <TBody>
-              <Tr><Td>a</Td></Tr>
-              <Tr><Td>1</Td></Tr>
-            </TBody>
+            <Tr><Th>col1</Th></Tr>
+            <Tr><Td>a</Td></Tr>
+            <Tr><Td>1</Td></Tr>
           </Table>
           <div style={styles.section}>Multiple Columns</div>
           <Table>
-            <THead>
-              <Tr>
-                <Th>col1</Th><Th style={{flex: `0 0 ${rem(3.8)}`}}>col2</Th>
-              </Tr>
-            </THead>
-            <TBody>
-              <Tr><Td>a</Td><Td style={{flex: `0 0 ${rem(3.8)}`, textAlign: 'center'}}>b</Td></Tr>
-              <Tr><Td>1</Td><Td style={{flex: `0 0 ${rem(3.8)}`, textAlign: 'center'}}>2</Td></Tr>
-            </TBody>
+            <Tr><Th>col1</Th><Th style={{flex: `0 0 ${rem(3.8)}`}}>col2</Th></Tr>
+            <Tr><Td>a</Td><Td style={{flex: `0 0 ${rem(3.8)}`, textAlign: 'center'}}>b</Td></Tr>
+            <Tr><Td>1</Td><Td style={{flex: `0 0 ${rem(3.8)}`, textAlign: 'center'}}>2</Td></Tr>
           </Table>
         </PanelBody>
         <PanelFooter>

diff --git a/msteams-ui-components-react/package.json b/msteams-ui-components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "msteams-ui-components-react",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "repository": {
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "mousetrap": "^1.6.1",
-    "msteams-ui-styles-core": "^0.7.1",
+    "msteams-ui-styles-core": "^0.7.2",
     "msteams-ui-icons-react": "^0.3.0"
   }
 }
diff --git a/msteams-ui-components-react/yarn.lock b/msteams-ui-components-react/yarn.lock
@@ -1918,9 +1918,9 @@ msteams-ui-icons-react@^0.3.0:
   dependencies:
     msteams-ui-icons-core "^0.3.0"
 
-msteams-ui-styles-core@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/msteams-ui-styles-core/-/msteams-ui-styles-core-0.7.1.tgz#1f971ed57b824925c66ce1410dde5487db37e87d"
+msteams-ui-styles-core@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/msteams-ui-styles-core/-/msteams-ui-styles-core-0.7.2.tgz#7cfa5e79c24f4a4b8003a0f92dce55e35572d89a"
   dependencies:
     msteams-ui-icons-core "^0.3.0"
 

diff --git a/msteams-ui-styles-core/package.json b/msteams-ui-styles-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "msteams-ui-styles-core",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "repository": {

diff --git a/msteams-ui-styles-core/src/components/table.ts b/msteams-ui-styles-core/src/components/table.ts
@@ -42,18 +42,17 @@ function base(c: IContext, colors: ITableColors) {
       display: 'flex',
       flexFlow: 'column nowrap',
       flex: '1 1 auto',
-      backgroundColor: colors.head.background,
     }),
     tbody: css(names.tbody, {
       display: 'flex',
       flexFlow: 'column nowrap',
       flex: '1 1 auto',
-      backgroundColor: colors.body.background,
     }),
     tr: css(names.tr, {
       flex: '1 1 auto',
       overflow: 'hidden',
       display: 'flex',
+      flexFlow: 'column nowrap',
       borderBottom: `${colors.row.border} ${rem(0.2)} solid`,
       $nest: {
         '&:last-child': {
@@ -71,6 +70,7 @@ function base(c: IContext, colors: ITableColors) {
       paddingRight: rem(1.6),
       paddingTop: rem(1.4),
       paddingBottom: rem(0.6),
+      backgroundColor: colors.head.background,
       $nest: {
         '&:last-child:not(:only-child)': {
           paddingLeft: 0,
@@ -86,6 +86,7 @@ function base(c: IContext, colors: ITableColors) {
       paddingRight: rem(1.6),
       paddingTop: rem(1.4),
       paddingBottom: rem(1.4),
+      backgroundColor: colors.body.background,
       $nest: {
         '&:last-child:not(:only-child)': {
           paddingLeft: 0,