@bitrise/bitkit 10.3.0-alpha-cleanup.2 → 10.3.0

package/package.json

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

package/src/Components/Dialog/Dialog.stories.tsx

@@ -1,7 +1,9 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { Story, ComponentMeta } from '@storybook/react';
 import { useDisclosure } from '@chakra-ui/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
 import Button from '../Button/Button';
+import Link from '../Link/Link';
 import Dialog, { DialogProps } from './Dialog';
 import DialogBody from './DialogBody';
 import DialogFooter from './DialogFooter';
@@ -11,14 +13,19 @@ export default {
   component: Dialog,
 } as ComponentMeta<typeof Dialog>;
 
-const TextContent = () => (
-  <p>
-    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
-    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
-    into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
-    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-    PageMaker including versions of Lorem Ipsum.
-  </p>
+const TextContent = ({ lotsOfContent = false }: { lotsOfContent?: boolean }) => (
+  <>
+    {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <p key={index}>
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
+        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
+        the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
+        release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+        like Aldus PageMaker including versions of Lorem Ipsum.
+      </p>
+    ))}
+  </>
 );
 
 interface StoryType extends DialogProps {
@@ -26,18 +33,24 @@ interface StoryType extends DialogProps {
 }
 
 export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryType) => {
+  const { variant } = props;
   const { isOpen, onClose, onOpen } = useDisclosure();
 
-  return (
-    <>
-      <Button onClick={onOpen}>Open Dialog</Button>
-
-      <Dialog {...props} isOpen={isOpen} onClose={onClose}>
+  const getContent = () => {
+    if (variant === 'empty') {
+      return (
+        <DialogBody padding="0">
+          <TextContent lotsOfContent={lotsOfContent} />
+          <Link as="button" colorScheme="purple" onClick={onClose} marginTop="16">
+            Link or button or anything to close this Dialog with onClick
+          </Link>
+        </DialogBody>
+      );
+    }
+    return (
+      <>
         <DialogBody>
-          {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <TextContent key={index} />
-          ))}
+          <TextContent lotsOfContent={lotsOfContent} />
         </DialogBody>
         <DialogFooter>
           <Button marginRight="auto" variant="tertiary">
@@ -46,6 +59,15 @@ export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryTy
           <Button variant="secondary">Secondary</Button>
           <Button>Primary</Button>
         </DialogFooter>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open Dialog</Button>
+      <Dialog padding={variant === 'empty' ? '16' : '0'} {...props} isOpen={isOpen} onClose={onClose}>
+        {getContent()}
       </Dialog>
     </>
   );

package/src/Components/Dialog/Dialog.tsx

@@ -21,6 +21,7 @@ export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBeh
   scrollBehavior?: 'inside' | 'outside';
   title: string;
   trapFocus?: boolean;
+  variant?: 'default' | 'empty';
 }
 
 const Dialog = ({
@@ -33,6 +34,7 @@ const Dialog = ({
   size,
   title,
   trapFocus,
+  variant,
   ...rest
 }: DialogProps) => {
   const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
@@ -51,14 +53,18 @@ const Dialog = ({
     >
       <ModalOverlay />
       <ModalContent data-testid={dataTestid} {...rest}>
-        <ModalHeader>
-          <Text as="h1" size="5">
-            {title}
-          </Text>
-        </ModalHeader>
-        <ModalCloseButton isDisabled={!isClosable}>
-          <Icon name="CloseSmall" />
-        </ModalCloseButton>
+        {variant !== 'empty' && (
+          <>
+            <ModalHeader>
+              <Text as="h1" size="5">
+                {title}
+              </Text>
+            </ModalHeader>
+            <ModalCloseButton isDisabled={!isClosable}>
+              <Icon name="CloseSmall" />
+            </ModalCloseButton>
+          </>
+        )}
         {children}
       </ModalContent>
     </Modal>
@@ -70,6 +76,7 @@ Dialog.defaultProps = {
   scrollBehavior: 'outside',
   size: 'medium',
   trapFocus: true,
+  variant: 'default',
 } as DialogProps;
 
 export default Dialog;

package/src/Old/Dropdown/Dropdown.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import Placement from '../Placement/Placement';
-import PlacementManager from '../Placement/PlacementManager';
-import PlacementReference from '../Placement/PlacementReference';
 import Text from '../../Components/Text/Text';
-import DropdownButton, { Props as DropdownButtonProps } from './DropdownButton';
-import DropdownMenu from './DropdownMenu';
-import DropdownMenuItem from './DropdownMenuItem';
+import Popover from '../../Components/Popover/Popover';
+import PopoverTrigger from '../../Components/Popover/PopoverTrigger';
+import PopoverContent from '../../Components/Popover/PopoverContent';
+import Button, { ButtonProps } from '../../Components/Button/Button';
 import DropdownMenuItemGroup from './DropdownMenuItemGroup';
-
-const { useState } = React;
+import DropdownMenuItem from './DropdownMenuItem';
+import DropdownMenu from './DropdownMenu';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DropdownValue = any;
@@ -22,7 +20,7 @@ interface OptionGroup {
   options: DropdownValue[];
 }
 
-export interface Props extends DropdownButtonProps {
+export interface Props extends ButtonProps {
   /** Handler for the value that is selected */
   onChange?: (value: DropdownValue) => void;
   /** Array of options that can be selected */
@@ -40,56 +38,63 @@ export interface Props extends DropdownButtonProps {
  */
 const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   const { children, options, onChange, selected, maxHeight, menuClassName, ...rest } = props;
-  const [visible, setVisible] = useState(false);
 
   const handleChange = (value: DropdownValue) => {
     if (onChange) {
       onChange(value);
     }
-    setVisible(false);
   };
 
-  const renderOption = ({ text, value }: Option) => (
-    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value} width="100%">
+  const renderOption = ({ text, value }: Option, onClose: () => void) => (
+    <DropdownMenuItem
+      onClick={() => {
+        handleChange(value);
+        onClose();
+      }}
+      selected={selected === value}
+      width="100%"
+    >
       {text}
     </DropdownMenuItem>
   );
 
   return (
-    <PlacementManager>
-      <PlacementReference>
-        {() => (
-          <DropdownButton
-            {...rest}
-            onClick={() => {
-              setVisible(!visible);
-            }}
-          >
-            <Text hasEllipsis>{children}</Text>
-          </DropdownButton>
-        )}
-      </PlacementReference>
-
-      <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
-        {() => (
-          <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
-            {options.map((option) => (
-              <React.Fragment key={option.text}>
-                {'options' in option ? (
-                  <DropdownMenuItemGroup text={option.text}>
-                    {option.options.map((groupOption) => (
-                      <React.Fragment key={groupOption.value}>{renderOption(groupOption)}</React.Fragment>
-                    ))}
-                  </DropdownMenuItemGroup>
-                ) : (
-                  renderOption(option)
-                )}
-              </React.Fragment>
-            ))}
-          </DropdownMenu>
-        )}
-      </Placement>
-    </PlacementManager>
+    <Popover matchWidth>
+      {({ onClose }) => (
+        <>
+          <PopoverTrigger>
+            <Button
+              width="100%"
+              variant="secondary"
+              rightIconName="ChevronDown"
+              justifyContent="space-between"
+              {...rest}
+            >
+              <Text as="span" hasEllipsis>
+                {children}
+              </Text>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
+              {options.map((option) => (
+                <React.Fragment key={option.text}>
+                  {'options' in option ? (
+                    <DropdownMenuItemGroup text={option.text}>
+                      {option.options.map((groupOption) => (
+                        <React.Fragment key={groupOption.value}>{renderOption(groupOption, onClose)}</React.Fragment>
+                      ))}
+                    </DropdownMenuItemGroup>
+                  ) : (
+                    renderOption(option, onClose)
+                  )}
+                </React.Fragment>
+              ))}
+            </DropdownMenu>
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
   );
 };
 

package/src/Old/Status/Status500.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMediaQuery } from '../hooks';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Image from '../Image/Image';
+import Image from '../../Components/Image/Image';
 import Text from '../../Components/Text/Text';
 
 export type Props = FlexProps;
@@ -32,7 +32,7 @@ const Status500: React.FunctionComponent<Props> = (props: Props) => {
         Everything is under control, we will be back soon. Until then keep refreshing your browser.
       </Text>
 
-      <Image margin="x16" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
+      <Image marginY="64" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
     </Flex>
   );
 };

package/src/old.ts

@@ -18,12 +18,6 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 export type { Props as DropdownProps } from './Old/Dropdown/Dropdown';
 export { default as Dropdown } from './Old/Dropdown/Dropdown';
 
-export type { Props as DropdownButtonProps } from './Old/Dropdown/DropdownButton';
-export { default as DropdownButton } from './Old/Dropdown/DropdownButton';
-
-export type { Props as DropdownMenusProps } from './Old/Dropdown/DropdownMenus';
-export { default as DropdownMenus } from './Old/Dropdown/DropdownMenus';
-
 export type { Props as DropdownMenuProps } from './Old/Dropdown/DropdownMenu';
 export { default as DropdownMenu } from './Old/Dropdown/DropdownMenu';
 
@@ -63,24 +57,6 @@ export { default as Logo } from './Old/Logo/Logo';
 export type { Props as NotificationProps } from './Old/Notification/Notification';
 export { default as Notification } from './Old/Notification/Notification';
 
-export type { Props as PlacementProps } from './Old/Placement/Placement';
-export { default as Placement } from './Old/Placement/Placement';
-
-export type { Props as PlacementAreaProps } from './Old/Placement/PlacementArea';
-export { default as PlacementArea } from './Old/Placement/PlacementArea';
-
-export type { Props as PlacementArrowProps } from './Old/Placement/PlacementArrow';
-export { default as PlacementArrow } from './Old/Placement/PlacementArrow';
-
-export type { Props as PlacementManagerProps } from './Old/Placement/PlacementManager';
-export { default as PlacementManager } from './Old/Placement/PlacementManager';
-
-export type { Props as PlacementReferenceProps } from './Old/Placement/PlacementReference';
-export { default as PlacementReference } from './Old/Placement/PlacementReference';
-
-export type { Props as PortalProps } from './Old/Portal/Portal';
-export { default as Portal } from './Old/Portal/Portal';
-
 export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
 export { default as ProgressBar } from './Old/Progress/ProgressBar';
 
@@ -90,9 +66,6 @@ export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
 export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
 export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';
 
-export type { Props as RadioButtonProps } from './Old/RadioButton/RadioButton';
-export { default as RadioButton } from './Old/RadioButton/RadioButton';
-
 export type { Props as RibbonProps } from './Old/Ribbon/Ribbon';
 export { default as Ribbon } from './Old/Ribbon/Ribbon';
 
@@ -102,9 +75,6 @@ export { default as Skeleton } from './Old/Skeleton/Skeleton';
 export type { Props as SkeletonBoxProps } from './Old/Skeleton/SkeletonBox';
 export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';
 
-export type { Props as Status404Props } from './Old/Status/Status404';
-export { default as Status404 } from './Old/Status/Status404';
-
 export type { Props as Status500Props } from './Old/Status/Status500';
 export { default as Status500 } from './Old/Status/Status500';