Drop container icon props (#575)

* Allow drop container icon props

* v5.0.58

Author: kapantzak

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.0.57",
+  "version": "5.0.58",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/drops/container.js

@@ -1,33 +1,49 @@
-import React from "react"
+import React, { Fragment } from "react"
 import Flex from "@/components/templates/flex"
 import { Text } from "@/components/typography"
 import { Icon } from "@/components/icon"
 
 const rotateMap = { right: 1, bottom: 2, left: 3 }
+const iconAlignmentProps = { alignSelf: "center" }
 
-const Container = ({ children, align, margin = [1], background = "tooltip", ref, ...rest }) => (
-  <Flex
-    ref={ref}
-    column={align === "top"}
-    columnReverse={align === "bottom"}
-    rowReverse={align === "right"}
-    margin={margin}
-  >
-    <Flex background={background} padding={[1, 2]} round column {...rest}>
-      {typeof children === "string" ? <Text color="tooltipText">{children}</Text> : children}
+const Container = ({
+  children,
+  align,
+  margin = [1],
+  background = "tooltip",
+  ref,
+  iconContainerProps = {},
+  ...rest
+}) => {
+  const hasIconContainerProps = !!Object.keys(iconContainerProps)
+  const IconContainer = hasIconContainerProps ? Flex : Fragment
+
+  return (
+    <Flex
+      ref={ref}
+      column={align === "top"}
+      columnReverse={align === "bottom"}
+      rowReverse={align === "right"}
+      margin={margin}
+    >
+      <Flex background={background} padding={[1, 2]} round column {...rest}>
+        {typeof children === "string" ? <Text color="tooltipText">{children}</Text> : children}
+      </Flex>
+      {align && (
+        <IconContainer {...iconAlignmentProps} {...iconContainerProps}>
+          <Icon
+            name="triangle"
+            color={background}
+            rotate={rotateMap[align]}
+            height="8px"
+            width="8px"
+            data-testid="drop-arrow"
+            {...(hasIconContainerProps ? {} : iconAlignmentProps)}
+          />
+        </IconContainer>
+      )}
     </Flex>
-    {align && (
-      <Icon
-        name="triangle"
-        alignSelf="center"
-        color={background}
-        rotate={rotateMap[align]}
-        height="8px"
-        width="8px"
-        data-testid="drop-arrow"
-      />
-    )}
-  </Flex>
-)
+  )
+}
 
 export default Container