Added iconColor to SearchBox, fixed issue #804.

anchorchat · Jul 21, 2017 · 1b270cb · 1b270cb
1 parent 9209910
commit 1b270cb
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/docs/components.json b/docs/components.json
@@ -1311,6 +1311,13 @@
           "value": "{}",
           "computed": false
         }
+      },
+      "iconColor": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
       }
     }
   },
@@ -1593,6 +1600,17 @@
         "required": true,
         "description": "Function to hide the menu"
       },
+      "iconColor": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Category icon color",
+        "defaultValue": {
+          "value": "colors.icons",
+          "computed": true
+        }
+      },
       "color": {
         "type": {
           "name": "string"
@@ -5399,6 +5417,17 @@
           "value": "{}",
           "computed": false
         }
+      },
+      "iconColor": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "The search icon's color",
+        "defaultValue": {
+          "value": "colors.icons",
+          "computed": true
+        }
       }
     }
   },

diff --git a/src/channel-header/styles.js b/src/channel-header/styles.js
@@ -2,7 +2,7 @@ import colors from '../settings/colors';
 
 const styleSheet = {
   root: {
-    background: colors.white,
+    backgroundColor: colors.white,
     borderBottom: `1px solid ${colors.grey}`,
     position: 'relative',
     padding: '8px 56px',

diff --git a/src/search-box/index.jsx b/src/search-box/index.jsx
@@ -5,6 +5,7 @@ import pure from 'recompose/pure';
 import debounce from 'lodash/debounce';
 import IconSearch from '../icons/icon-search';
 import getStyles from './get-styles';
+import colors from '../settings/colors';
 
 const displayName = 'SearchBox';
 
@@ -32,15 +33,18 @@ const propTypes = {
   /** Override the styles of the icon element */
   iconStyle: PropTypes.instanceOf(Object),
   /** Override the styles of the input's placeholder */
-  placeholderStyle: PropTypes.instanceOf(Object)
+  placeholderStyle: PropTypes.instanceOf(Object),
+  /** The search icon's color */
+  iconColor: PropTypes.string
 };
 
 const defaultProps = {
   style: {},
   inputStyle: {},
   iconStyle: {},
   placeholder: 'Search something...',
-  placeholderStyle: {}
+  placeholderStyle: {},
+  iconColor: colors.icons
 };
 
 /** General purpose Search box */
@@ -75,12 +79,13 @@ class SearchBox extends Component {
       changeSearchQuery,
       onChange,
       placeholderStyle,
+      iconColor,
       ...custom
     } = this.props;
 
     return (
       <section style={getStyles.root(style)} {...custom}>
-        <div style={getStyles.icon(iconStyle)}><IconSearch /></div>
+        <div style={getStyles.icon(iconStyle)}><IconSearch color={iconColor} /></div>
         <input
           style={getStyles.input(inputStyle)}
           value={value}