@bitrise/bitkit 9.18.1 → 9.20.0-alpha-chakra.1

package/package.json

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

package/src/Components/Badge/Badge.stories.tsx

@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Badge from './Badge';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+} as ComponentMeta<typeof Badge>;
+
+export const WithProps: ComponentStory<typeof Badge> = (props) => <Badge {...props} />;
+WithProps.args = {
+  children: 'Coming soon',
+  ...Badge.defaultProps,
+};

package/src/Components/Badge/Badge.theme.ts

@@ -0,0 +1,15 @@
+const BadgeTheme = {
+  baseStyle: {
+    display: 'inline-block',
+    paddingX: '8',
+    paddingY: '3',
+    fontSize: '1',
+    lineHeight: '1',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    borderRadius: '4',
+    cursor: 'default',
+  },
+};
+
+export default BadgeTheme;

package/src/Components/Badge/Badge.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
+
+export type BadgeProps = ChakraBadgeProps;
+
+/**
+ * Badges are used to highlight an item's status for quick recognition.
+ */
+const Badge = (props: BadgeProps) => {
+  return <ChakraBadge {...props} />;
+};
+
+Badge.defaultProps = {
+  color: 'neutral.100',
+  backgroundColor: 'purple.40',
+} as BadgeProps;
+
+export default Badge;

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

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

package/src/Components/Button/Button.tsx

@@ -4,7 +4,9 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface ButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';
+  children: string;
   isDanger?: boolean;
+  isIconOnly?: boolean;
   leftIconName?: TypeIconName;
   rightIconName?: TypeIconName;
   size?: 'small' | 'medium';
@@ -15,17 +17,14 @@ 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, isDanger, isDisabled, leftIconName, rightIconName, size, variant, ...rest } = props;
+  const { as, children, isDanger, isDisabled, isIconOnly, leftIconName, rightIconName, size, variant, ...rest } = props;
   const properties: ChakraButtonProps = {
-    as,
+    as: isDisabled ? 'button' : as,
     isDisabled,
     size,
     variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
-  if (isDisabled) {
-    properties.as = 'button';
-  }
   if (leftIconName) {
     properties.leftIcon = <Icon name={leftIconName} />;
   }
@@ -35,6 +34,15 @@ const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
   if ((properties.leftIcon || properties.rightIcon) && !properties.iconSpacing) {
     properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
   }
+  if (isIconOnly) {
+    properties['aria-label'] = children;
+    properties.iconSpacing = 0;
+    properties.padding = 0;
+    // TODO: Use Tooltip later for this:
+    properties.title = children;
+  } else {
+    properties.children = children;
+  }
 
   return <ChakraButton {...properties} ref={ref} />;
 });

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

@@ -1,7 +1,6 @@
 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';
 
@@ -30,7 +29,9 @@ export const WithButton: ComponentStory<typeof Menu> = () => (
 
 export const WithIconButton: ComponentStory<typeof Menu> = () => (
   <Menu>
-    <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" aria-label="Open menu" />
+    <MenuButton as={Button} isIconOnly leftIconName="AddonsTuorqouise">
+      Open menu
+    </MenuButton>
     <List />
   </Menu>
 );
@@ -40,7 +41,9 @@ export const WithButtonGroup: ComponentStory<typeof Menu> = () => (
     <ButtonGroup isAttached>
       <Button>Button</Button>
       <Menu>
-        <MenuButton as={IconButton} iconName="AddOnsColorTuorqouise" aria-label="Open menu" />
+        <MenuButton as={Button} isIconOnly leftIconName="AddonsTuorqouise">
+          Open menu
+        </MenuButton>
         <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 IconButton from '../IconButton/IconButton';
+import Button from '../Button/Button';
 import Menu from '../Menu/Menu';
 
 export interface OverflowMenuProps {
@@ -11,7 +11,9 @@ export interface OverflowMenuProps {
 const OverflowMenu = ({ children, triggerLabel }: OverflowMenuProps) => {
   return (
     <Menu isLazy>
-      <MenuButton aria-label={triggerLabel} as={IconButton} iconName="MoreVertical" size="small" variant="tertiary" />
+      <MenuButton as={Button} leftIconName="MoreVertical" isIconOnly size="small" variant="tertiary">
+        {triggerLabel}
+      </MenuButton>
       <MenuList>{children}</MenuList>
     </Menu>
   );

package/src/Old/AddonBeam/AddonBeam.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { TypeIconName } from '../Icon/tsx';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Hamburger from '../Hamburger/Hamburger';
-import Badge from '../Badge/Badge';
 import Icon from '../Icon/Icon';
 import Link from '../Link/Link';
 import Image from '../Image/Image';
@@ -83,14 +82,6 @@ const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
             by Bitrise
           </Text>
         </Flex>
-
-        {isBeta && (
-          <Flex>
-            <Badge backgroundColor="yellow.80" textColor="purple.10">
-              BETA
-            </Badge>
-          </Flex>
-        )}
       </Flex>
 
       {!isInResponsiveView && appName && (

package/src/index.ts

@@ -56,3 +56,6 @@ export { default as TabPanels } from './Components/Tabs/TabPanels';
 
 export type { TabPanelProps } from './Components/Tabs/TabPanel';
 export { default as TabPanel } from './Components/Tabs/TabPanel';
+
+export type { BadgeProps } from './Components/Badge/Badge';
+export { default as Badge } from './Components/Badge/Badge';

package/src/old.ts

@@ -37,9 +37,6 @@ export { default as AppLayoutSidebar } from './Old/AppLayout/AppLayoutSidebar';
 export type { Props as AvatarProps } from './Old/Avatar/Avatar';
 export { default as Avatar } from './Old/Avatar/Avatar';
 
-export type { Props as BadgeProps } from './Old/Badge/Badge';
-export { default as Badge } from './Old/Badge/Badge';
-
 export type { Props as BaseProps } from './Old/Base/Base';
 export type { TypeBorderRadius } from './Old/Base/Base';
 export type { TypeColors } from './Old/Base/Base';

package/src/theme.ts

@@ -1,3 +1,4 @@
+import Badge from './Components/Badge/Badge.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
 import ColorButton from './Components/ColorButton/ColorButton.theme';
@@ -47,6 +48,7 @@ const theme = {
     },
   },
   components: {
+    Badge,
     Button,
     Card,
     ColorButton,