Feat/change styles icon button (#392)

* fix styles at icon button

* add customTooltipFor IconButton

* fix typo

* make tooltip optional

Author: AlexNti

src/components/button/IconButton.js

@@ -1,34 +1,51 @@
 import { Button } from "./button"
 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"
+
+//this  addition here has been done to be aligned with our current implemetation at cloud-frontend src/components/tooltips/customTooltip.js
+
+const tooltipBackground = ["neutral", "black"]
+
+const CustomTooltipContent = ({ content }) => (
+  <Flex padding={[1.5, 2]} margin={[2]} background={tooltipBackground} round={1} alignSelf="start">
+    <TextSmall color="bright">{content}</TextSmall>
+  </Flex>
+)
 
 const IconButton = ({
   iconColor = "nodeBadgeColor",
   flavour = "borderless",
   icon,
   disabled,
   onClick,
-  width = "16px",
-  height = "18px",
+  width = "20px",
+  height = "20px",
   iconSize,
+  tooltip = "",
   ...props
 }) => {
   const isDefaultFlavour = flavour === "default"
   return (
-    <Box
-      cursor="pointer"
-      sx={{ width, height }}
-      onClick={onClick}
-      as={Button}
-      flavour={flavour}
-      disabled={disabled}
-      icon={icon}
-      iconColor={isDefaultFlavour ? "white" : iconColor}
-      iconSize={iconSize}
-      neutral={!isDefaultFlavour}
-      {...props}
-    ></Box>
+    <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>
   )
 }
 

src/components/button/button.js

@@ -16,6 +16,8 @@ export const Button = forwardRef(
       textTransform = "firstLetter",
       iconColor,
       iconSize,
+      iconWidth,
+      iconHeight,
       ...rest
     },
     ref
@@ -38,6 +40,8 @@ export const Button = forwardRef(
             className={iconColor ? "button-icon__color" : "button-icon"}
             title={icon}
             name={icon}
+            width={iconWidth}
+            height={iconHeight}
           />
         </Flex>
       )}

src/components/button/button.stories.js

@@ -5,7 +5,7 @@ import styled from "styled-components"
 import { action } from "@storybook/addon-actions"
 import { text, boolean, select } from "@storybook/addon-knobs"
 import { readmeCleanup } from "utils/readme"
-import { Button } from "."
+import { Button, IconButton } from "."
 import readme from "./README.md"
 import { iconsList } from "src/components/icon"
 
@@ -91,3 +91,9 @@ buttonStory.add(
   ),
   subData
 )
+
+buttonStory.add(
+  "Icon Button",
+  () => <IconButton cursor="pointer" icon="chevron_left" iconSize="small" tooltip="Previous" />,
+  subData
+)

src/components/button/index.d.ts

@@ -41,7 +41,7 @@ export interface ButtonWrapperProps extends ButtonProps, MarginProps, PaddingPro
 type IconButtonProps = Pick<
   ButtonWrapperProps,
   "iconColor" | "flavour" | "icon" | "disabled" | "onClick" | "iconSize"
-> & { width?: string; height?: string }
+> & { width?: string; height?: string; tooltip?: string }
 
 declare const Button: FC<ButtonWrapperProps>
 declare const IconButton: FC<IconButtonProps>