@bitrise/bitkit 9.3.0-alpha.1 → 9.3.0-alpha.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.3.0-alpha.1",
+  "version": "9.3.0-alpha.4",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",

package/site/components/Documentation/Components/SectionButton2.tsx

@@ -9,12 +9,15 @@
   } from '@bitrise/bitkit';
   import CodeBlock from '../../CodeBlock/CodeBlock';
   import Section from '../../Section/Section';
-  import SectionSubTitle from '../../Section/SectionSubTitle';
   import Button2 from '../../../../src/Button2/Button2';
 
   const SectionButtons = () => {
     const [selectedTab, setSelectedTab] = React.useState(1);
 
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+    console.log({ buttonRef });
+
     return (
       <Section>
         <Tabs gap="x6" margin="x8">
@@ -35,16 +38,16 @@
         <>
           <Base margin="x12">
             <Buttons alignChildrenVertical="end" margin="x3">
-              <Button2 size="small">Primary</Button2>
+              <Button2 as="a" href="https://www.bitrise.io" onClick={ (e) => console.log(e) } size="small" target="_blank">Primary</Button2>
               <Button2 disabled size="small" variant="primary">Disabled</Button2>
-              <Button2 size="medium" variant="primary">Primary</Button2>
+              <Button2 size="medium" type="submit" variant="primary">Primary</Button2>
               <Button2 disabled size="medium" variant="primary">Disabled</Button2>
             </Buttons>
 
             <Buttons alignChildrenVertical="end" margin="x3">
-              <Button2 size="small" variant="secondary">Secondary</Button2>
+              <Button2 onClick={ () => alert('onClick') } size="small" variant="secondary">Secondary</Button2>
               <Button2 disabled size="small" variant="secondary">Disabled</Button2>
-              <Button2 size="medium" variant="secondary">Secondary</Button2>
+              <Button2 ref={ buttonRef } size="medium" variant="secondary">Secondary buttonRef</Button2>
               <Button2 disabled size="medium" variant="secondary">Disabled</Button2>
             </Buttons>
 

package/site/components/Documentation/Components/SectionButtons.tsx

@@ -281,8 +281,7 @@ const SectionButtons = () => {
                 text: 'Log out',
               },
             ] }>
-          <Icon name="Bitbot" />
-          <Text>Account</Text>
+          Account
         </ButtonWithDropdown>
       </Flex>
       ) }

package/src/Button2/Button2.tsx

@@ -1,29 +1,25 @@
 /* eslint-disable object-shorthand */
 import * as React from 'react';
-import { Button as ChakraButton, ButtonProps } from '@chakra-ui/react';
+import { Button as ChakraButton, ButtonProps, forwardRef } from '@chakra-ui/react';
 
 interface Props extends Pick<ButtonProps, 'as' | 'disabled' | 'leftIcon' | 'rightIcon' |'sx'> {
     children: ButtonProps['children'];
-    /**
-     * Allows the Button to fill the container space rather than shrinking
-     * down to the content
-     */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary';
-    /**
-     * Sets the size of the Button. Small allows the Button to fit
-     * into smaller spaces, while large will help the button stand
-     * out on a page with lots of space.
-     */
+    href?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    ref?: any;
     size?: 'small' | 'medium';
-}
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    type?: ButtonProps['type'];
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary';
+  }
 
-const Button2 = (props: Props) => {
+const Button2 = forwardRef((props: Props, ref) => {
   const defaults = {
     size: 'medium',
     variant: 'primary',
   };
   const iconSpacing = props.size === 'medium' ? '10px' : '6px';
-  return <ChakraButton iconSpacing={ iconSpacing } { ...defaults } { ...props } />;
-};
+  return <ChakraButton iconSpacing={ iconSpacing } ref={ ref } { ...defaults } { ...props } />;
+});
 
 export default Button2;

package/src/ButtonWithDropdown/ButtonWithDropdown.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
-    Button,
-    ButtonProps,
+    Button2,
     DropdownMenu,
     DropdownMenuItem,
     DropdownMenuItemProps,
@@ -12,6 +11,7 @@ import {
     PlacementReference,
     } from '@bitrise/bitkit';
 
+import { ButtonProps } from '@chakra-ui/react';
 export interface ItemProps extends DropdownMenuItemProps {
     component?: string;
     disabled?: boolean;
@@ -22,7 +22,7 @@ export interface ItemProps extends DropdownMenuItemProps {
 
 export interface Props {
     buttonProps?: ButtonProps;
-    children?: React.ReactElement | React.ReactNodeArray;
+    children?: React.ReactNode | undefined;
     dropdownWidth?: string;
     items: ItemProps[];
     placementProps?: PlacementProps;
@@ -41,16 +41,16 @@ const ButtonWithDropdown = ({
     <PlacementManager>
       <PlacementReference>
         { ({ ref }) => (
-          <Button innerRef={ ref } onClick={ () => setVisible(true) } { ...buttonProps }>
+          /* @ts-ignore */
+          <Button2 onClick={ () => setVisible(!visible) } ref={ ref } rightIcon={ <Icon name="ChevronDown" /> } { ...buttonProps }>
             { children }
-            <Icon name="ChevronDown" />
-          </Button>
+          </Button2>
         ) }
       </PlacementReference>
       { !buttonProps.disabled && (
         <Placement
             disableMargin="left-right"
-            onClose={ () => setVisible(false) }
+            // onClose={ () => setVisible(false) }
             placement="bottom-end"
             visible={ visible }
             { ...placementProps }>