Merge pull request #70 from jbetancur/enhancement-themeing-3

theme changes

Author: jbetancur

README.md

@@ -355,11 +355,7 @@ class MyComponent extends Component {
 ```
 
 ## Theming
-Under Development
-
-The curent default Theme is very "material". Near term plans are to have 3 built-in prop selectable themes (none, bootstrap, material).
-
-You can override or replace the current theme using the `customTheme` prop
+You can override or replace the default theme using the `customTheme` prop. Internally, this just deep merges your theme with the default theme.
 
 For Example:
 
@@ -384,21 +380,18 @@ class MyComponent extends Component {
 );
 ```
 
-Refer to [Default Theme](https://github.com/jbetancur/react-data-table-component/blob/master/src/themes/default.js) for reference
+Refer to [Default Theme](https://github.com/jbetancur/react-data-table-component/blob/master/src/themes/default.js) for reference and avaiilable properties to override
 
 
 ### Theme Resources
 * [SVG Encoder](https://codepen.io/yoksel/details/JDqvs)
 
-
 # Development
 
 ## Setup
-
 Install the latest [Node JS LTS](https://nodejs.org/) and [Yarn](https://yarnpkg.com) and simply run ```yarn``` or ```yarn install``` command in the root and stories directory.
 
 ## Installing Flow Types
-
 Install flowtypes using the package script:
 ```sh
 yarn flow-typed
@@ -407,7 +400,6 @@ yarn flow-typed
 > It is advised to run the script whenever NPM packages are installed.
 
 ## Local development
-
 During development,
 ```sh
 # watch and build new source changes
@@ -417,7 +409,6 @@ yarn storybook
 ```
 
 ## Including NPM packages
-
 This project uses two package.json structure.
 
 ### Library dependencies -- <root_dir>/package.json
@@ -435,13 +426,11 @@ yarn add [package-name]
 ```
 
 ## Static Types
-
 ```sh
 yarn flow # performs type checking on files
 ```
 
 ## Lint
-
 ```sh
 yarn lint # runs linter to detect any style issues (css & js)
 yarn lint:css # lint only css
@@ -450,14 +439,12 @@ yarn lint:js --fix # tries to fix js lint issues
 ```
 
 ## Test
-
 ```sh
 yarn test # runs functional/unit tests using Jest
 yarn test --coverage # with coverage
 ```
 
 ## Build
-
 ```sh
 yarn build # builds sources at src/
 ```

src/DataTable/ContextMenu.js

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { DataTableConsumer } from './DataTableContext';
 
 const Title = styled.div`
-  color: ${props => props.theme.header.contextMenu.fontColor};
-  font-size: ${props => props.theme.header.contextMenu.fontSize};
+  color: ${props => props.theme.contextMenu.fontColor};
+  font-size: ${props => props.theme.contextMenu.fontSize};
   font-weight: 400;
 `;
 
@@ -14,10 +14,10 @@ const ContextMenuStyle = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: ${props => props.theme.header.contextMenu.backgroundColor};
+  background-color: ${props => props.theme.contextMenu.backgroundColor};
   z-index: 1;
   transform: ${props => (props.visible ? 'translate3d(0, 0, 0)' : 'translate3d(0, -100%, 0)')};
-  transition-duration: ${props => props.theme.header.contextMenu.transitionTime};
+  transition-duration: ${props => props.theme.contextMenu.transitionTime};
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   transition-delay: 0;
   will-change: transform;

src/DataTable/ExpanderRow.js

@@ -11,6 +11,7 @@ const renderChildren = (children, data) => {
 const ExpanderRowStyle = styled.div`
   width: 100%;
   box-sizing: border-box;
+  color: ${props => props.theme.expander.fontColor};
   background-color: ${props => props.theme.expander.backgroundColor};
 `;
 

src/DataTable/TableRow.js

@@ -8,14 +8,18 @@ import TableCellExpander from './TableCellExpander';
 import ExpanderRow from './ExpanderRow';
 
 const defaultRowsCSS = css`
-  border-top: ${props => props.theme.rows.borderWidth} solid ${props => props.theme.rows.borderColor};
+  border-top-style: solid;
+  border-top-width: ${props => props.theme.rows.borderWidth};
+  border-top-color: ${props => props.theme.rows.borderColor};
 `;
 
 const spacedRowsCSS = css`
   margin-top: ${props => props.theme.rows.spacingMargin || 0};
   margin-bottom: ${props => props.theme.rows.spacingMargin || 0};
   border-radius: ${props => props.theme.rows.spacingBorderRadius || 0};
-  border: ${props => props.theme.rows.borderWidth} solid ${props => props.theme.rows.borderColor};
+  border-style: solid;
+  border-width: ${props => props.theme.rows.borderWidth};
+  border-color: ${props => props.theme.rows.borderColor};
   ${props => props.theme.rows.spacingShadow && `box-shadow: ${props.theme.rows.spacingShadow}`};
 `;
 
@@ -28,7 +32,7 @@ const stripedCSS = css`
 const hightlightCSS = css`
   &:hover {
     color: ${props => props.theme.rows.hoverFontColor};
-    background-color: ${props => props.theme.rows.hoverColor};
+    background-color: ${props => props.theme.rows.hoverBackgroundColor};
     transition-duration: 0.15s;
     transition-property: background-color;
   }

src/DataTable/__tests__/__snapshots__/DataTable.test.js.snap

@@ -130,7 +130,9 @@ exports[`Pagination should render correctly if pagination is enabled 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -843,7 +845,9 @@ exports[`expandableRows should render correctly when expandableRows is true 1`]
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -1267,6 +1271,7 @@ exports[`expandableRows should render correctly when expandableRows is true and
 .c18 {
   width: 100%;
   box-sizing: border-box;
+  color: rgba(0,0,0,.87);
   background-color: transparent;
 }
 
@@ -1276,7 +1281,9 @@ exports[`expandableRows should render correctly when expandableRows is true and
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -1813,7 +1820,9 @@ exports[`progress/nodata should render correctly when progressPending is true 1`
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -2189,7 +2198,9 @@ exports[`prop changes should update state if the data prop changes 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -2546,7 +2557,9 @@ exports[`selectableRows should render correctly when selectableRows is true 1`]
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -2978,7 +2991,9 @@ exports[`selectableRows should render correctly when selectableRows is true and
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -3410,7 +3425,9 @@ exports[`selectableRows should render correctly when selectableRows is true and
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -3844,7 +3861,9 @@ exports[`selectableRows should render correctly when selectableRows is true and
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -4417,7 +4436,9 @@ exports[`should render correctly if the keyField is overriden 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -4754,7 +4775,9 @@ exports[`should render correctly with columns/data 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -5108,7 +5131,9 @@ exports[`should render without a header if noHeader is true 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -5392,7 +5417,9 @@ exports[`sorting should render correctly when a column is sorted 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }
@@ -5761,7 +5788,9 @@ exports[`sorting should render correctly with a default sort field 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: 100%;
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
   background-color: transparent;
   color: rgba(0,0,0,.87);
 }

src/DataTable/__tests__/__snapshots__/ExpanderRow.test.js.snap

@@ -4,6 +4,7 @@ exports[`<ExpanderRow /> should render correctly 1`] = `
 .c0 {
   width: 100%;
   box-sizing: border-box;
+  color: rgba(0,0,0,.87);
   background-color: transparent;
 }
 
@@ -16,6 +17,7 @@ exports[`<ExpanderRow /> with children should render correctly and have a data p
 .c0 {
   width: 100%;
   box-sizing: border-box;
+  color: rgba(0,0,0,.87);
   background-color: transparent;
 }
 
@@ -34,6 +36,7 @@ exports[`<ExpanderRow numColumns /> should render correctly 1`] = `
 .c0 {
   width: 100%;
   box-sizing: border-box;
+  color: rgba(0,0,0,.87);
   background-color: transparent;
 }