search and text field can get icons

mondaycom · Mar 22, 2021 · bb0c790 · bb0c790
1 parent 720cd08
commit bb0c790
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.0.109",
+  "version": "0.0.110",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx
@@ -38,7 +38,7 @@ const Icon = forwardRef(
       return null;
     }
 
-    if (iconType === ICON_TYPES.SVG) {
+    if (iconType === ICON_TYPES.SVG || typeof icon === "function") {
       const IconComponent = icon;
       return (
         <IconComponent

diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx
@@ -87,8 +87,8 @@ Search.sizes = SIZES;
 Search.types = TYPES;
 
 Search.propTypes = {
-  secondaryIconName: PropTypes.string,
-  iconName: PropTypes.string,
+  secondaryIconName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  iconName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   onChange: PropTypes.func,
   autoFocus: PropTypes.bool,
   underline: PropTypes.bool,

diff --git a/src/components/Search/__stories__/search.stories.js b/src/components/Search/__stories__/search.stories.js
@@ -6,6 +6,8 @@ import SearchStoryLine from "./SearchStoryLine";
 import { FlexLayout } from "../../storybook-helpers";
 import Search from "../Search";
 import { withPerformance } from "storybook-addon-performance";
+import { CloseSmall } from "../../Icon/Icons";
+import SearchIcon from "../../Icon/Icons/components/Search";
 
 export const Sandbox = () => {
   return (
@@ -43,8 +45,8 @@ export const Sizes = () => {
           <Search
             className=""
             inputAriaLabel="Search for content"
-            iconName="fa-search"
-            secondaryIconName="fa-close"
+            iconName={SearchIcon}
+            secondaryIconName={CloseSmall}
             id="size_1"
             placeholder="Placeholder text goes here"
             size={Search.sizes.SMALL}
@@ -58,8 +60,8 @@ export const Sizes = () => {
           <Search
             className=""
             inputAriaLabel="Search for content"
-            iconName="fa-search"
-            secondaryIconName="fa-close"
+            iconName={SearchIcon}
+            secondaryIconName={CloseSmall}
             id="size_2"
             placeholder="Placeholder text goes here"
             size={Search.sizes.MEDIUM}
@@ -73,8 +75,8 @@ export const Sizes = () => {
           <Search
             className=""
             inputAriaLabel="Search for content"
-            iconName="fa-search"
-            secondaryIconName="fa-close"
+            iconName={SearchIcon}
+            secondaryIconName={CloseSmall}
             id="size_3"
             placeholder="Placeholder text goes here"
             size={Search.sizes.LARGE}
@@ -95,8 +97,8 @@ export const States = () => {
           <Search
             className=""
             inputAriaLabel="Search for content"
-            iconName="fa-search"
-            secondaryIconName="fa-close"
+            iconName={SearchIcon}
+            secondaryIconName={CloseSmall}
             id="states_1"
             placeholder="Placeholder text goes here"
             size={Search.sizes.MEDIUM}
@@ -110,8 +112,8 @@ export const States = () => {
           <Search
             className="input-component__input--hover"
             inputAriaLabel="Search for content"
-            iconName="fa-search"
-            secondaryIconName="fa-close"
+            iconName={SearchIcon}
+            secondaryIconName={CloseSmall}
             id="states_1"
             placeholder="Placeholder text goes here"
             size={Search.sizes.MEDIUM}
@@ -124,8 +126,8 @@ export const States = () => {
         <SearchStoryLine title="Filled">
           <Search
             inputAriaLabel="Search for content"
-            iconName="fa-search"
-            secondaryIconName="fa-close"
+            iconName={SearchIcon}
+            secondaryIconName={CloseSmall}
             id="states_1"
             placeholder="Placeholder text goes here"
             size={Search.sizes.MEDIUM}
@@ -139,8 +141,8 @@ export const States = () => {
           <Search
             className="input-component__input--active"
             inputAriaLabel="Search for content"
-            iconName="fa-search"
-            secondaryIconName="fa-close"
+            iconName={SearchIcon}
+            secondaryIconName={CloseSmall}
             id="states_1"
             placeholder="Placeholder text goes here"
             size={Search.sizes.MEDIUM}
@@ -154,8 +156,8 @@ export const States = () => {
           <Search
             className="input-component__input--active"
             inputAriaLabel="Search for content"
-            iconName="fa-search"
-            secondaryIconName="fa-close"
+            iconName={SearchIcon}
+            secondaryIconName={CloseSmall}
             id="states_1"
             placeholder="Placeholder text goes here"
             size={Search.sizes.MEDIUM}

diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx
@@ -153,6 +153,7 @@ const TextField = forwardRef(
                 iconLabel={iconsNames.primary}
                 iconType={Icon.type.ICON_FONT}
                 ignoreFocusStyle
+                iconSize={size === TextField.sizes.SMALL ? "16px" : "18px"}
               />
             </div>
             <div
@@ -171,6 +172,7 @@ const TextField = forwardRef(
                 iconLabel={iconsNames.secondary}
                 iconType={Icon.type.ICON_FONT}
                 ignoreFocusStyle
+                iconSize={size === TextField.sizes.SMALL ? "16px" : "18px"}
               />
             </div>
           </div>
@@ -213,8 +215,8 @@ TextField.propTypes = {
   disabled: PropTypes.bool,
   readonly: PropTypes.bool,
   setRef: PropTypes.func,
-  iconName: PropTypes.string,
-  secondaryIconName: PropTypes.string,
+  iconName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  secondaryIconName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   id: PropTypes.string,
   title: PropTypes.string,
   /** SIZES is exposed on the component itself */
@@ -228,7 +230,7 @@ TextField.propTypes = {
   wrapperClassName: PropTypes.string,
   onIconClick: PropTypes.func,
   clearOnIconClick: PropTypes.bool,
-  labelIconName: PropTypes.string,
+  labelIconName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   showCharCount: PropTypes.bool,
   inputAriaLabel: PropTypes.string,
   /**  Icon names labels for a11y */