@bitrise/bitkit 9.20.0 → 9.21.0-alpha-chakra.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.20.0",
+  "version": "9.21.0-alpha-chakra.3",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconButton as ChakraIconButton, IconButtonProps as ChakraIconButtonProps, forwardRef } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../Icon/Icon';
+import Tooltip from '../Tooltip/Tooltip';
 
 export interface IconButtonProps extends ChakraIconButtonProps {
   as?: 'a' | 'button';
@@ -8,6 +9,7 @@ export interface IconButtonProps extends ChakraIconButtonProps {
   isDanger?: boolean;
   label?: string;
   size?: 'small' | 'medium';
+  tooltipCloseDelay?: number;
   variant?: 'primary' | 'secondary' | 'tertiary';
 }
 
@@ -15,22 +17,25 @@ export interface IconButtonProps extends ChakraIconButtonProps {
  * IconButton composes the `Button` component except that it renders only an icon.
  */
 const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
-  const { as, iconName, isDanger, isDisabled, label, variant, ...rest } = props;
+  const { as, iconName, isDanger, isDisabled, label, tooltipCloseDelay, variant, ...rest } = props;
   const properties: ChakraIconButtonProps = {
     as: isDisabled ? 'button' : as,
     icon: <Icon name={iconName} />,
     isDisabled,
-    // TODO: Use Tooltip
-    title: label || rest['aria-label'],
     variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
-  return <ChakraIconButton {...properties} ref={ref} />;
+  return (
+    <Tooltip closeDelay={tooltipCloseDelay} label={label || rest['aria-label']} shouldWrapChildren={isDisabled}>
+      <ChakraIconButton {...properties} ref={ref} />
+    </Tooltip>
+  );
 });
 
 IconButton.defaultProps = {
   as: 'button',
   size: 'medium',
+  tooltipCloseDelay: 0,
   variant: 'primary',
 } as IconButtonProps;
 

package/src/Components/Tooltip/Tooltip.theme.ts

@@ -0,0 +1,16 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const TooltipTheme: SystemStyleObject = {
+  baseStyle: {
+    bg: 'neutral.10',
+    color: 'neutral.95',
+    fontSize: '2',
+    lineHeight: '2',
+    paddingX: '12',
+    paddingY: '8',
+    borderRadius: '8',
+    boxShadow: 'tooltip',
+  },
+};
+
+export default TooltipTheme;

package/src/Components/Tooltip/Tooltip.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Tooltip as ChakraTooltip, TooltipProps as ChakraTooltipProps, forwardRef, chakra } from '@chakra-ui/react';
+
+export interface TooltipProps extends ChakraTooltipProps {
+  shouldWrapChildren?: boolean;
+}
+/**
+ * A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.
+ */
+const Tooltip = forwardRef<TooltipProps, 'div'>((props, ref) => {
+  const { children, shouldWrapChildren, ...rest } = props;
+  const properties: ChakraTooltipProps = {
+    bg: 'neutral.10',
+    children,
+    hasArrow: true,
+    placement: 'top',
+    ...rest,
+  };
+  if (shouldWrapChildren) {
+    properties.children = (
+      <chakra.span display="inline-block" tabIndex={0}>
+        {children}
+      </chakra.span>
+    );
+  }
+  return <ChakraTooltip {...properties} ref={ref} />;
+});
+
+export default Tooltip;

package/src/Foundations/Shadows/Shadows.ts

@@ -4,6 +4,7 @@ const shadows = {
   large: '0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08)',
   inner: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset',
   outline: '0 0 0 3px #C289E6',
+  tooltip: '0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)',
   none: 'none',
 };
 

package/src/index.ts

@@ -62,3 +62,6 @@ export { default as Badge } from './Components/Badge/Badge';
 
 export type { IconButtonProps } from './Components/IconButton/IconButton';
 export { default as IconButton } from './Components/IconButton/IconButton';
+
+export type { TooltipProps } from './Components/Tooltip/Tooltip';
+export { default as Tooltip } from './Components/Tooltip/Tooltip';

package/src/old.ts

@@ -225,9 +225,6 @@ export { default as Textarea } from './Old/Textarea/Textarea';
 export type { Props as ToggleProps } from './Old/Toggle/Toggle';
 export { default as Toggle } from './Old/Toggle/Toggle';
 
-export type { Props as TooltipProps } from './Old/Tooltip/Tooltip';
-export { default as Tooltip } from './Old/Tooltip/Tooltip';
-
 export type { Props as VisibilityProps } from './Old/Visibility/Visibility';
 export { default as Visibility } from './Old/Visibility/Visibility';
 

package/src/theme.ts

@@ -7,6 +7,7 @@ import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
+import Tooltip from './Components/Tooltip/Tooltip.theme';
 
 import colors from './Foundations/Colors/Colors';
 import radii from './Foundations/Radii/Radii';
@@ -57,6 +58,7 @@ const theme = {
     Menu,
     Tabs,
     Text,
+    Tooltip,
   },
 };