Fix/Tooltip: Add support for different sizes.

src/dataDisplay/Tooltip/index.stories.tsx

@@ -28,7 +28,15 @@ export const CustomColor = (): React.ReactElement => {
 
 export const CustomColorAndArrow = (): React.ReactElement => {
   return (
-    <Tooltip title="Some text" backgroundColor="white" placement="left" arrow>
+    <Tooltip title="Some text" backgroundColor="primary" placement="left" arrow>
+      <span>hover me</span>
+    </Tooltip>
+  );
+};
+
+export const CustomSize = (): React.ReactElement => {
+  return (
+    <Tooltip title="Some text" backgroundColor="white" size="lg" arrow>
       <span>hover me</span>
     </Tooltip>
   );

src/dataDisplay/Tooltip/index.tsx

@@ -1,16 +1,57 @@
 import React, { ReactElement } from 'react';
-import MUITooltip, { TooltipProps } from '@material-ui/core/Tooltip';
+import MUITooltip, {
+  TooltipProps as TooltipPropsMui,
+} from '@material-ui/core/Tooltip';
 import { withStyles } from '@material-ui/core/styles';
 import { rgba } from 'polished';
 
-import theme, { ThemeColors } from '../../theme';
+import theme, { ThemeColors, ThemeTooltipSize } from '../../theme';
 
-type TooltipColors = {
+type TooltipProps = {
+  size?: ThemeTooltipSize;
   backgroundColor?: ThemeColors;
   textColor?: ThemeColors;
+  padding?: string;
+  border?: string;
 };
 
-const customTooltip = ({ backgroundColor, textColor }: TooltipColors) =>
+const getPaddingBySize = (size: ThemeTooltipSize): string => {
+  switch (size) {
+    case 'lg':
+      return '8px 16px';
+    default:
+      return '4px 8px';
+  }
+};
+
+const getBorderBySize = (size: ThemeTooltipSize): string => {
+  switch (size) {
+    case 'lg':
+      return 'none';
+    default:
+      return `1px solid ${theme.colors.separator}`;
+  }
+};
+
+const getFontInfoBySize = (
+  size: ThemeTooltipSize
+): {
+  fontSize: string;
+  lineHeight: string;
+} => {
+  switch (size) {
+    case 'lg':
+      return theme.text.size.lg;
+    default:
+      return theme.text.size.md;
+  }
+};
+
+const customTooltip = ({
+  backgroundColor,
+  textColor,
+  size = 'md',
+}: TooltipProps) =>
   withStyles(() => ({
     popper: {
       zIndex: 2001,
@@ -19,38 +60,46 @@ const customTooltip = ({ backgroundColor, textColor }: TooltipColors) =>
       backgroundColor: backgroundColor
         ? (theme.colors[backgroundColor] as string)
         : theme.colors.overlay.color,
-      boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`,
-      border: 'none',
+      boxShadow: `1px 2px 10px ${rgba(theme.colors.shadow.color, 0.18)}`,
+      border: getBorderBySize(size),
       color: textColor
         ? (theme.colors[textColor] as string)
         : theme.colors.text,
+      borderRadius: '4px',
+      fontFamily: theme.fonts.fontFamily,
+      padding: getPaddingBySize(size),
+      fontSize: getFontInfoBySize(size).fontSize,
+      lineHeight: getFontInfoBySize(size).lineHeight,
     },
     arrow: {
       color: backgroundColor
         ? (theme.colors[backgroundColor] as string)
         : theme.colors.overlay.color,
       border: 'none',
+
       '&::before': {
-        boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`,
+        boxShadow: `1px 2px 10px ${rgba(theme.colors.shadow.color, 0.18)}`,
       },
     },
   }))(MUITooltip);
 
 type Props = {
   title: string;
   children: ReactElement;
-} & TooltipColors;
+} & TooltipProps;
 
 export const Tooltip = ({
   title,
   backgroundColor,
   textColor,
   children,
+  size,
   ...rest
-}: Props & TooltipProps): ReactElement => {
+}: Props & TooltipPropsMui): ReactElement => {
   const StyledTooltip = customTooltip({
     backgroundColor,
     textColor,
+    size,
   });
 
   return (

src/theme.ts

@@ -125,17 +125,24 @@ const theme = {
       },
     },
   },
+  tooltip: {
+    size: {
+      md: '',
+      lg: '',
+    },
+  },
 };
 
 export type Theme = typeof theme;
 
+export type ThemeButtonSize = keyof Theme['buttons']['size'];
 export type ThemeColors = keyof Theme['colors'];
+export type ThemeIdenticonSize = keyof Theme['identicon']['size'];
 export type ThemeIconSize = keyof Theme['icons']['size'];
+export type ThemeLoaderSize = keyof Theme['loader']['size'];
+export type ThemeStatusDotSize = keyof Theme['statusDot']['size'];
 export type ThemeTextSize = keyof Theme['text']['size'];
 export type ThemeTitleSize = keyof Theme['title']['size'];
-export type ThemeStatusDotSize = keyof Theme['statusDot']['size'];
-export type ThemeLoaderSize = keyof Theme['loader']['size'];
-export type ThemeButtonSize = keyof Theme['buttons']['size'];
-export type ThemeIdenticonSize = keyof Theme['identicon']['size'];
+export type ThemeTooltipSize = keyof Theme['tooltip']['size'];
 
 export default theme;