Breaking change: backgroundColor -> background

Author: ifndefdeadmau5

docs/package.json

@@ -19,21 +19,24 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "css-loader": "^2.1.0",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.10.3",
     "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^2.28.0",
-    "webpack": "2.4.1",
     "react-hot-loader": "next",
+    "style-loader": "^0.23.1",
+    "webpack": "2.4.1",
     "webpack-dev-server": "2.4.3"
   },
   "dependencies": {
     "@material-ui/core": "^1.5.1",
     "@material-ui/icons": "^3.0.1",
     "jss": "^9.8.2",
+    "jss-keyframes": "^0.1.0",
     "jss-preset-default": "^4.5.0",
     "prop-types": "^15.5.8",
     "react": "^16.4.0",

docs/src/App.css

@@ -0,0 +1,20 @@
+#root {
+	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
+	background-size: 400% 400%;
+	-webkit-animation: Gradient 15s ease infinite;
+	-moz-animation: Gradient 15s ease infinite;
+	animation: Gradient 15s ease infinite;
+}
+
+@keyframes Gradient {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
+}
+

docs/src/App.js

@@ -1,15 +1,18 @@
 import React, { Component } from 'react';
-import MdAdd from '@material-ui/icons/add';
-import MdClose from '@material-ui/icons/clear';
-import MdFavorite from '@material-ui/icons/favorite';
 import { FloatingMenu, MainButton, ChildButton } from 'react-floating-button-menu';
+import MdAdd from '@material-ui/icons/Add';
+import MdClose from '@material-ui/icons/Clear';
+import MdEdit from '@material-ui/icons/Edit';
+import MdStar from '@material-ui/icons/Star';
+import MdFavorite from '@material-ui/icons/Favorite';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
+import './App.css';
 
 const styles = theme => ({
   root: {
@@ -19,6 +22,7 @@ const styles = theme => ({
     flexDirection: 'column',
     width: '100%',
     height: '100vh',
+    color: '#fff',
   },
   paper: {
     width: '100%',
@@ -38,6 +42,7 @@ const styles = theme => ({
   },
 });
 
+
 class App extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -77,24 +82,24 @@ class App extends Component {
             <MainButton
               iconResting={<MdAdd style={{ fontSize: 20 }} nativeColor="white" />}
               iconActive={<MdClose style={{ fontSize: 20 }} nativeColor="white" />}
-              backgroundColor="black"
+              background="linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
               onClick={() => this.setState({ isOpen: !this.state.isOpen })}
               size={56}
             />
             <ChildButton
-              icon={<MdFavorite style={{ fontSize: 20 }} nativeColor="black" />}
-              backgroundColor="white"
+              icon={<MdEdit style={{ fontSize: 20 }} nativeColor="white" />}
+              background="linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
               size={40}
               onClick={() => console.log('First button clicked')}
             />
             <ChildButton
-              icon={<MdFavorite style={{ fontSize: 20 }} nativeColor="black" />}
-              backgroundColor="white"
+              icon={<MdFavorite style={{ fontSize: 20 }} nativeColor="white" />}
+              background="linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
               size={40}
             />
             <ChildButton
-              icon={<MdFavorite style={{ fontSize: 20 }} nativeColor="black" />}
-              backgroundColor="white"
+              icon={<MdStar style={{ fontSize: 20 }} nativeColor="white" />}
+              background="linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
               size={40}
             />
           </FloatingMenu>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-floating-button-menu",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A Customizable Material floating button menu implementation made with styled-component & react",
   "devDependencies": {
     "babel-core": "^6.24.1",

src/ChildButton.js

@@ -4,8 +4,8 @@ import styled from 'styled-jss';
 import PropTypes from 'prop-types';
 
 const Wrapper = styled('li')(
-  ({ isOpen, slideSpeed, backgroundColor, size, iconColor, spacing, direction }) => ({
-    backgroundColor,
+  ({ isOpen, slideSpeed, background, size, iconColor, spacing, direction }) => ({
+    background,
     display: 'flex',
     border: 'none',
     borderRadius: '50%',

src/MainButton.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import styled from 'styled-jss';
 import PropTypes from 'prop-types';
 
-const Wrapper = styled('a')(({ backgroundColor, size, iconColor }) => ({
+const Wrapper = styled('a')(({ background, size, iconColor }) => ({
   color: iconColor,
   display: 'flex',
   border: 'none',
@@ -18,7 +18,7 @@ const Wrapper = styled('a')(({ backgroundColor, size, iconColor }) => ({
   alignItems: 'center',
   width: size,
   height: size,
-  backgroundColor,
+  background,
 }));
 
 const IconWrapper = styled('div')(({ isOpen }) => ({