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

package/package.json

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

package/src/Components/Button/Button.stories.tsx

@@ -21,6 +21,5 @@ WithProps.args = sortObjectByKey({
   children: 'Button',
   isDanger: false,
   isDisabled: false,
-  isIconOnly: false,
   isLoading: false,
 });

package/src/Components/Button/Button.tsx

@@ -4,9 +4,7 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface ButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';
-  children: React.ReactChild | React.ReactFragment;
   isDanger?: boolean;
-  isIconOnly?: boolean;
   leftIconName?: TypeIconName;
   rightIconName?: TypeIconName;
   size?: 'small' | 'medium';
@@ -17,35 +15,24 @@ export interface ButtonProps extends ChakraButtonProps {
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
 const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
-  const { as, children, isDanger, isDisabled, isIconOnly, leftIconName, rightIconName, size, variant, ...rest } = props;
+  const { as, isDanger, isDisabled, leftIconName, rightIconName, size = 'medium', variant, ...rest } = props;
   const properties: ChakraButtonProps = {
-    as,
+    as: isDisabled ? 'button' : as,
     isDisabled,
     size,
     variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
-  if (isDisabled) {
-    properties.as = 'button';
-  }
+  const iconSize = size === 'medium' ? '24' : '16';
   if (leftIconName) {
-    properties.leftIcon = <Icon name={leftIconName} size={size === 'medium' ? '24' : '16'} />;
+    properties.leftIcon = <Icon name={leftIconName} size={iconSize} />;
   }
   if (rightIconName) {
-    properties.rightIcon = <Icon name={rightIconName} size={size === 'medium' ? '24' : '16'} />;
+    properties.rightIcon = <Icon name={rightIconName} size={iconSize} />;
   }
   if ((properties.leftIcon || properties.rightIcon) && !properties.iconSpacing) {
     properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
   }
-  if (isIconOnly) {
-    properties['aria-label'] = children.toString();
-    properties.iconSpacing = 0;
-    properties.padding = 0;
-    // TODO: Use Tooltip later for this:
-    // properties.title = children.toString();
-  } else {
-    properties.children = children;
-  }
 
   return <ChakraButton {...properties} ref={ref} />;
 });

package/src/Components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../utils/storyUtils';
+import IconButton from './IconButton';
+
+export default {
+  title: 'Components/IconButton',
+  component: IconButton,
+  argTypes: {
+    as: {
+      control: 'inline-radio',
+      options: ['a', 'button'],
+    },
+  },
+} as ComponentMeta<typeof IconButton>;
+
+const Template: ComponentStory<typeof IconButton> = (props) => <IconButton {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...IconButton.defaultProps,
+  'aria-label': 'This is the label',
+  iconName: 'Bitbot',
+  isDanger: false,
+  isDisabled: false,
+  isLoading: false,
+});

package/src/Components/IconButton/IconButton.tsx

@@ -0,0 +1,42 @@
+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';
+  iconName: TypeIconName;
+  isDanger?: boolean;
+  label?: string;
+  size?: 'small' | 'medium';
+  tooltipCloseDelay?: number;
+  variant?: 'primary' | 'secondary' | 'tertiary';
+}
+
+/**
+ * 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, tooltipCloseDelay, variant, ...rest } = props;
+  const properties: ChakraIconButtonProps = {
+    as: isDisabled ? 'button' : as,
+    icon: <Icon name={iconName} />,
+    isDisabled,
+    variant: isDanger ? `${variant}--danger` : variant,
+    ...rest,
+  };
+  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;
+
+export default IconButton;

package/src/Components/Icons/16x16/BuildstatusLoadingAnimated.tsx

@@ -4,7 +4,7 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 const BuildstatusLoadingAnimated = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <circle cx={8} cy={8} r={7} stroke="currentColor" strokeWidth={1.1} strokeDasharray={48} fill="none">
-      <animate attributeName="stroke-dashoffset" from={48} to={-48} dur="3.5s" repeatCount="indefinite" />
+      <animate attributeName="stroke-dashoffset" from={96} to={0} dur="3.5s" repeatCount="indefinite" />
       <animateTransform
         attributeName="transform"
         type="rotate"
@@ -15,7 +15,7 @@ const BuildstatusLoadingAnimated = forwardRef<IconProps, 'svg'>((props, ref) =>
       />
     </circle>
     <circle cx={8} cy={8} r={4} stroke="currentColor" strokeWidth={1.1} strokeDasharray={48} fill="none">
-      <animate attributeName="stroke-dashoffset" from={48} to={-48} dur="3.5s" repeatCount="indefinite" />
+      <animate attributeName="stroke-dashoffset" from={96} to={0} dur="3.5s" repeatCount="indefinite" />
       <animateTransform
         attributeName="transform"
         type="rotate"

package/src/Components/Icons/24x24/BuildstatusLoadingAnimated.tsx

@@ -4,7 +4,7 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 const BuildstatusLoadingAnimated = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <circle cx={12} cy={12} r={11} stroke="currentColor" strokeWidth={2} strokeDasharray={48} fill="none">
-      <animate attributeName="stroke-dashoffset" from={48} to={-48} dur="3.5s" repeatCount="indefinite" />
+      <animate attributeName="stroke-dashoffset" from={96} to={0} dur="3.5s" repeatCount="indefinite" />
       <animateTransform
         attributeName="transform"
         type="rotate"
@@ -15,7 +15,7 @@ const BuildstatusLoadingAnimated = forwardRef<IconProps, 'svg'>((props, ref) =>
       />
     </circle>
     <circle cx={12} cy={12} r={6} stroke="currentColor" strokeWidth={2} strokeDasharray={48} fill="none">
-      <animate attributeName="stroke-dashoffset" from={48} to={-48} dur="3.5s" repeatCount="indefinite" />
+      <animate attributeName="stroke-dashoffset" from={96} to={0} dur="3.5s" repeatCount="indefinite" />
       <animateTransform
         attributeName="transform"
         type="rotate"

package/src/Components/Menu/Menu.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Box, ButtonGroup, HStack, MenuButton, MenuList, useMenuItem, useStyleConfig } from '@chakra-ui/react';
 import Button from '../Button/Button';
+import IconButton from '../IconButton/IconButton';
 import Menu from './Menu';
 import MenuItem from './MenuItem';
 
@@ -29,9 +30,7 @@ export const WithButton: ComponentStory<typeof Menu> = () => (
 
 export const WithIconButton: ComponentStory<typeof Menu> = () => (
   <Menu>
-    <MenuButton as={Button} isIconOnly leftIconName="AddonsTuorqouise">
-      Open menu
-    </MenuButton>
+    <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" aria-label="Open menu" />
     <List />
   </Menu>
 );
@@ -41,9 +40,7 @@ export const WithButtonGroup: ComponentStory<typeof Menu> = () => (
     <ButtonGroup isAttached>
       <Button>Button</Button>
       <Menu>
-        <MenuButton as={Button} isIconOnly leftIconName="AddonsTuorqouise">
-          Open menu
-        </MenuButton>
+        <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" aria-label="Open menu" />
         <List />
       </Menu>
     </ButtonGroup>

package/src/Components/OverflowMenu/OverflowMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MenuButton, MenuList, MenuListProps } from '@chakra-ui/react';
-import Button from '../Button/Button';
+import IconButton from '../IconButton/IconButton';
 import Menu from '../Menu/Menu';
 
 export interface OverflowMenuProps {
@@ -11,9 +11,7 @@ export interface OverflowMenuProps {
 const OverflowMenu = ({ children, triggerLabel }: OverflowMenuProps) => {
   return (
     <Menu isLazy>
-      <MenuButton as={Button} leftIconName="MoreVertical" isIconOnly size="small" variant="tertiary">
-        {triggerLabel}
-      </MenuButton>
+      <MenuButton aria-label={triggerLabel} as={IconButton} iconName="MoreVertical" size="small" variant="tertiary" />
       <MenuList>{children}</MenuList>
     </Menu>
   );

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,28 @@
+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,
+    ...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/Old/Icon/tsx/IconsBuildstatusLoadingAnimated.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 const SvgIconsBuildstatusLoadingAnimated = (props: React.SVGProps<SVGSVGElement>) => (
   <svg {...props} fill="none" viewBox="0 0 24 24">
     <circle cx={12} cy={12} r={11} stroke="currentColor" strokeWidth={2} strokeDasharray={48}>
-      <animate attributeName="stroke-dashoffset" from={48} to={-48} dur="3.5s" repeatCount="indefinite" />
+      <animate attributeName="stroke-dashoffset" from={96} to={0} dur="3.5s" repeatCount="indefinite" />
       <animateTransform
         attributeName="transform"
         type="rotate"
@@ -15,7 +15,7 @@ const SvgIconsBuildstatusLoadingAnimated = (props: React.SVGProps<SVGSVGElement>
       />
     </circle>
     <circle cx={12} cy={12} r={6} stroke="currentColor" strokeWidth={2} strokeDasharray={48}>
-      <animate attributeName="stroke-dashoffset" from={48} to={-48} dur="3.5s" repeatCount="indefinite" />
+      <animate attributeName="stroke-dashoffset" from={96} to={0} dur="3.5s" repeatCount="indefinite" />
       <animateTransform
         attributeName="transform"
         type="rotate"

package/src/index.ts

@@ -59,3 +59,6 @@ export { default as TabPanel } from './Components/Tabs/TabPanel';
 
 export type { BadgeProps } from './Components/Badge/Badge';
 export { default as Badge } from './Components/Badge/Badge';
+
+export type { IconButtonProps } from './Components/IconButton/IconButton';
+export { default as IconButton } from './Components/IconButton/IconButton';

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,
   },
 };