chore(icon button): add ref support to component (#401)

* chore(icon button): add ref support to component

* chore(input): move input props at the end

* Move input props at the end of input provided props, so they can be overwritten

* v2.4.4

Author: burbuli8ra

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

src/components/button/IconButton.js

@@ -1,12 +1,11 @@
-import { Button } from "./button"
+import React, { forwardRef } from "react"
 import Box from "src/components/templates/box"
 import Flex from "src/components/templates/flex"
-
-import React from "react"
 import Tooltip from "src/components/drops/tooltip"
 import { TextSmall } from "src/components/typography"
+import { Button } from "./button"
 
-//this  addition here has been done to be aligned with our current implemetation at cloud-frontend src/components/tooltips/customTooltip.js
+//this  addition here has been done to be aligned with our current implementation at cloud-frontend src/components/tooltips/customTooltip.js
 
 const tooltipBackground = ["neutral", "black"]
 
@@ -16,37 +15,43 @@ const CustomTooltipContent = ({ content }) => (
   </Flex>
 )
 
-const IconButton = ({
-  iconColor = "nodeBadgeColor",
-  flavour = "borderless",
-  icon,
-  disabled,
-  onClick,
-  width = "20px",
-  height = "20px",
-  iconSize,
-  tooltip = "",
-  ...props
-}) => {
-  const isDefaultFlavour = flavour === "default"
-  return (
-    <Tooltip plain animation content={tooltip && <CustomTooltipContent content={tooltip} />}>
-      <Box
-        cursor="pointer"
-        iconWidth={width}
-        iconHeight={height}
-        onClick={onClick}
-        as={Button}
-        flavour={flavour}
-        disabled={disabled}
-        icon={icon}
-        iconColor={isDefaultFlavour ? "white" : iconColor}
-        iconSize={iconSize}
-        neutral={!isDefaultFlavour}
-        {...props}
-      ></Box>
-    </Tooltip>
-  )
-}
+const IconButton = forwardRef(
+  (
+    {
+      iconColor = "nodeBadgeColor",
+      flavour = "borderless",
+      icon,
+      disabled,
+      onClick,
+      width = "20px",
+      height = "20px",
+      iconSize,
+      tooltip = "",
+      ...props
+    },
+    ref
+  ) => {
+    const isDefaultFlavour = flavour === "default"
+    return (
+      <Tooltip plain animation content={tooltip && <CustomTooltipContent content={tooltip} />}>
+        <Box
+          cursor="pointer"
+          iconWidth={width}
+          iconHeight={height}
+          onClick={onClick}
+          as={Button}
+          flavour={flavour}
+          disabled={disabled}
+          icon={icon}
+          iconColor={isDefaultFlavour ? "white" : iconColor}
+          iconSize={iconSize}
+          neutral={!isDefaultFlavour}
+          ref={ref}
+          {...props}
+        />
+      </Tooltip>
+    )
+  }
+)
 
 export default IconButton

src/components/input/input.js

@@ -118,7 +118,6 @@ export const TextInput = ({
         >
           {iconLeft && <LeftIcon icon={iconLeft} />}
           <StyledInput
-            {...props}
             disabled={disabled}
             placeholder={placeholder}
             onBlur={handleBlur}
@@ -130,6 +129,7 @@ export const TextInput = ({
             type="text"
             value={value}
             ref={inputRef}
+            {...props}
           />
           {iconRight && <RightIcon icon={iconRight} />}
           {metaDisplayed && error && <RightIcon icon={<ErrorIcon name="cross_s" />} />}