Merge pull request #31 from trendmicro-frontend/fix-style-issue

Fix style issue
trendmicro-frontend · Jan 21, 2020 · 2e11003 · 2e11003
2 parents be19d42 + f89dc3d
commit 2e11003
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "lodash.get": "^4.4.2",
     "prop-types": "^15.5.8",
     "react-custom-scrollbars": "^4.2.1",
-    "styled-components": "^4.4.1"
+    "styled-components": "^5.0.0"
   },
   "devDependencies": {
     "@babel/cli": "~7.6.0",

diff --git a/src/Table.jsx b/src/Table.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import isEqual from 'lodash/isEqual';
 import TableContext from './context';
 import Loader from './Loader';
@@ -129,7 +129,6 @@ class Table extends Component {
         return (
             <TableContext.Provider value={context}>
                 <WrapperStyle
-                    minimalist={minimalist}
                     width={tableWidth}
                     height={tableHeight}
                     {...props}
@@ -144,13 +143,22 @@ class Table extends Component {
                         })
                         : children
                     }
+                    { !minimalist && (
+                        <React.Fragment>
+                            <BorderTop />
+                            <BorderRight />
+                            <BorderBottom />
+                            <BorderLeft />
+                        </React.Fragment>
+                    )}
                 </WrapperStyle>
             </TableContext.Provider>
         );
     }
 }
 
 const WrapperStyle = styled.div`
+    position: relative;
     display: flex;
     flex-direction: column;
     line-height: 20px;
@@ -160,26 +168,45 @@ const WrapperStyle = styled.div`
     *, *:before, *:after {
         box-sizing: inherit;
     }
-
-    ${props => !props.minimalist && css`
-        border-top: 1px solid #ddd;
-        border-bottom: 1px solid #ddd;
-    `}
-
-    ${props => props.minimalist && css`
-        border: 0;
-    `}
 `;
 
 const EmptyBodyStyle = styled.div`
     text-align: center;
     padding: 44px 12px;
     color: #999;
+`;
+
+const VerticalLine = styled.div`
+    border: none;
+    border-left: 1px solid #ddd;
+    height: 100%;
+    width: 1px;
+`;
 
-    ${props => !props.minimalist && css`
-        border-left: 1px solid #ddd;
-        border-right: 1px solid #ddd;
-    `}
+const HorizontalLine = styled.div`
+    border: none;
+    border-top: 1px solid #ddd;
+    height: 1px;
+    width: 100%;
+`;
+
+const BorderTop = styled(HorizontalLine)`
+    position: absolute;
+    top: 0;
+`;
+const BorderRight = styled(VerticalLine)`
+    position: absolute;
+    top: 0;
+    right: 0;
+`;
+const BorderBottom = styled(HorizontalLine)`
+    position: absolute;
+    bottom: 0;
+`;
+const BorderLeft = styled(VerticalLine)`
+    position: absolute;
+    top: 0;
+    left: 0;
 `;
 
 export default Table;
diff --git a/src/TableCell.jsx b/src/TableCell.jsx
@@ -36,9 +36,6 @@ const CellStyle = styled.div`
     ${props => !props.minimalist && css`
         border-right: 1px solid #ddd;
         border-bottom: 1px solid #ddd;
-        &:first-child {
-            border-left: 1px solid #ddd;
-        }
     `}
 
     ${props => props.minimalist && css`

diff --git a/src/TableHeaderCell.jsx b/src/TableHeaderCell.jsx
@@ -39,9 +39,6 @@ const HeaderCellStyle = styled.div`
         background-color: #EEEEEE;
         border-right: 1px solid #ddd;
         border-bottom: 2px solid #ccc;
-        &:first-child {
-            border-left: 1px solid #ddd;
-        }
     `}
 
     ${props => props.minimalist && css`

diff --git a/src/TableTemplate.jsx b/src/TableTemplate.jsx
@@ -120,15 +120,13 @@ class TableTemplate extends Component {
             columns,
             ...props
         } = this.props;
-        const isNoData = (data.length === 0) && !loading;
 
         return (
             <TableWrapper
                 columns={columns}
                 data={data}
                 minimalist={minimalist}
                 height={height}
-                isNoData={isNoData}
                 width={width}
                 {...props}
             >

diff --git a/styleguide/examples/Expand.jsx b/styleguide/examples/Expand.jsx
@@ -187,9 +187,8 @@ const StyledTableRow = styled(TableRow)`
 `;
 
 const ExpandedRowStyle = styled.div`
-    border: 1px solid #ddd;
-    border-top-width: 0;
     padding: 16px 16px 16px 52px;
+    border-bottom: 1px solid #ddd;
     &:last-child {
         border-bottom-width: 0;
     }

diff --git a/styleguide/examples/FixedColumns.jsx b/styleguide/examples/FixedColumns.jsx
@@ -161,6 +161,9 @@ class Selection extends Component {
                 checked={isChecked}
                 indeterminate={isIndeterminate}
                 onClick={this.handleHeaderCheckbox}
+                inputStyle={{
+                    margin: 0
+                }}
             />
         );
     };
@@ -171,6 +174,9 @@ class Selection extends Component {
             <Checkbox
                 checked={checked}
                 onClick={this.handleRowCheckbox}
+                inputStyle={{
+                    margin: 0
+                }}
             />
         );
     };
@@ -249,13 +255,13 @@ class Selection extends Component {
                                                             const { width: cellWidth, render } = cell;
                                                             const cellValue = _get(rowData, cell.dataKey);
                                                             return (
-                                                                <TableCell
+                                                                <StyledTableCell
                                                                     key={key}
                                                                     className="td"
                                                                     width={cellWidth}
                                                                 >
                                                                     { typeof render === 'function' ? render(cellValue, rowData) : cellValue }
-                                                                </TableCell>
+                                                                </StyledTableCell>
                                                             );
                                                         })
                                                     }
@@ -340,13 +346,13 @@ class Selection extends Component {
                                                         const { width: cellWidth } = cell;
                                                         const cellValue = _get(rowData, cell.dataKey);
                                                         return (
-                                                            <TableCell
+                                                            <StyledTableCell
                                                                 key={key}
                                                                 className="td"
                                                                 width={cellWidth}
                                                             >
                                                                 { cellValue }
-                                                            </TableCell>
+                                                            </StyledTableCell>
                                                         );
                                                     })
                                                 }
@@ -388,12 +394,19 @@ const ShadowStyle = styled.div`
     display: none;
 `;
 
+const StyledTableCell = styled(TableCell)``;
+
 const StyledTableRow = styled(TableRow)`
-    ${props => props.active && css`
-        background-color: #fcf8da;
-    `}
     ${props => props.hover && css`
-        background-color: #e6f4fc;
+        ${StyledTableCell} {
+            background-color: #e6f4fc;
+        }
+    `}
+
+    ${props => props.active && css`
+        ${StyledTableCell} {
+            background-color: #fcf8da;
+        }
     `}
 `;
 

diff --git a/styleguide/examples/NoDataCustom.md b/styleguide/examples/NoDataCustom.md
@@ -22,8 +22,6 @@ const columns = [
                 textAlign: 'center',
                 fontSize: 24,
                 padding: 50,
-                borderLeft: '1px solid #ddd',
-                borderRight: '1px solid #ddd',
             }}
         >
             ~ No data to display ~

diff --git a/styleguide/examples/Selection.jsx b/styleguide/examples/Selection.jsx
@@ -95,6 +95,9 @@ class Selection extends Component {
                 checked={isChecked}
                 indeterminate={isIndeterminate}
                 onClick={this.handleHeaderCheckbox}
+                inputStyle={{
+                    margin: 0
+                }}
             />
         );
     };
@@ -105,6 +108,9 @@ class Selection extends Component {
             <Checkbox
                 checked={checked}
                 onClick={this.handleRowCheckbox}
+                inputStyle={{
+                    margin: 0
+                }}
             />
         );
     };