@bitrise/bitkit 10.20.0 → 10.20.1

package/package.json

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

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -114,8 +114,8 @@ export const Default: ComponentStoryFn<typeof Dropdown> = (args) => {
 export const InsideDialog = () => {
   return (
     <Provider>
-      <Dialog isOpen isClosable>
-        <DialogBody>
+      <Dialog isOpen isClosable title="Dropdown inside Dialog">
+        <DialogBody paddingBottom="24">
           <Dropdown search={false}>
             <DropdownOption value="x">Test Opt1</DropdownOption>
           </Dropdown>

package/src/Old/DatePicker/DatePickerGrid.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import Grid, { Props as GridProps } from '../Grid/Grid';
+import Box, { BoxProps } from '../../Components/Box/Box';
 
-type Props = GridProps;
+type Props = BoxProps;
 
 const DatePickerGrid: React.FunctionComponent<Props> = (props: Props) => {
-  return <Grid {...props} className="DatePicker__grid" gapVertical="x1" repeat="7" repeatWidth="3rem" />;
+  return (
+    <Box display="grid" {...props} gridTemplateColumns="repeat(7, 3rem)" gridAutoRows="max-content" gridRowGap="4" />
+  );
 };
 
 export default DatePickerGrid;

package/src/Old/DatePicker/DatePickerMonth.tsx

@@ -57,7 +57,7 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
         </Flex>
       </Flex>
 
-      <DatePickerGrid margin="x1">
+      <DatePickerGrid marginY="4">
         {daysOfTheWeek.map((day) => (
           <Text textAlign="center" key={day} paddingY="16" size="2" color="neutral.70" textTransform="uppercase">
             {day}
@@ -65,7 +65,7 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
         ))}
       </DatePickerGrid>
 
-      <DatePickerGrid paddingVertical="x2">
+      <DatePickerGrid borderTop="1px solid" borderTopColor="neutral.93" paddingY="8">
         {Array.from({ length: daysCount }).map((_, i) => (
           <DatePickerDay
             dateSelectableFrom={dateSelectableFrom}

package/src/Old/Placement/Placement.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Placement as TypePlacement } from '@popperjs/core';
 import { Props as BaseProps } from '../Base/Base';
-import { ModalContext } from '../Modal/ModalContext';
 import PlacementPopper from './PlacementPopper';
 import './Placement.css';
 
@@ -63,13 +62,9 @@ export interface Props extends BaseProps {
  * and PlacementReference. If the target is an existing reference element
  * it can be used by iteself by using the referenceElement prop.
  */
-const Placement: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <ModalContext.Consumer>
-      {({ modalElement }) => <PlacementPopper {...props} closeElement={modalElement} isInsideModal={!!modalElement} />}
-    </ModalContext.Consumer>
-  );
-};
+const Placement: React.FunctionComponent<Props> = (props: Props) => (
+  <PlacementPopper {...props} closeElement={null} isInsideModal={false} />
+);
 
 Placement.defaultProps = {
   flip: true,

package/src/Old/Progress/ProgressBitbot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Props as BaseProps } from '../Base/Base';
-import Text from '../Text/Text';
+import Text from '../../Components/Text/Text';
 
 export interface Props extends BaseProps {
   /**
@@ -62,7 +62,7 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
   const { content, size, ...rest } = props;
 
   return (
-    <Text {...rest} align="middle">
+    <Text {...rest} textAlign="center">
       <svg fill="currentColor" height={size} viewBox="0 0 24 24" width={size}>
         <g fill="currentColor" fillRule="evenodd" stroke="none" strokeWidth="1">
           <path d={dot0}>
@@ -159,7 +159,7 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
       </svg>
 
       {content && (
-        <Text align="middle" letterSpacing="x5" size="1" uppercase>
+        <Text textAlign="center" size="1" textTransform="uppercase">
           {content}
         </Text>
       )}

package/src/old.ts

@@ -27,9 +27,6 @@ export { default as DropdownMenuItemGroup } from './Old/Dropdown/DropdownMenuIte
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';
 
-export type { Props as GridProps } from './Old/Grid/Grid';
-export { default as Grid } from './Old/Grid/Grid';
-
 export type { Props as InputProps } from './Old/Input/Input';
 export { default as Input } from './Old/Input/Input';
 
@@ -45,9 +42,6 @@ export { default as InputInlineHelp } from './Old/Input/InputInlineHelp';
 export type { Props as InputLabelProps } from './Old/Input/InputLabel';
 export { default as InputLabel } from './Old/Input/InputLabel';
 
-export type { Props as LogoProps } from './Old/Logo/Logo';
-export { default as Logo } from './Old/Logo/Logo';
-
 export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
 export { default as ProgressBar } from './Old/Progress/ProgressBar';
 
@@ -63,31 +57,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 Status500Props } from './Old/Status/Status500';
-export { default as Status500 } from './Old/Status/Status500';
-
-export type { Props as OldTableProps } from './Old/Table/Table';
-export { default as OldTable } from './Old/Table/Table';
-
-export type { Props as OldTableBodyProps } from './Old/Table/TableBody';
-export { default as OldTableBody } from './Old/Table/TableBody';
-
-export type { Props as OldTableCellProps } from './Old/Table/TableCell';
-export { default as OldTableCell } from './Old/Table/TableCell';
-
-export type { Props as OldTableHeaderProps } from './Old/Table/TableHeader';
-export { default as OldTableHeader } from './Old/Table/TableHeader';
-
-export type { Props as OldTableHeaderCellProps } from './Old/Table/TableHeaderCell';
-export type { TypeTableSort } from './Old/Table/TableHeaderCell';
-export { default as OldTableHeaderCell } from './Old/Table/TableHeaderCell';
-
-export type { Props as OldTableHeaderRowProps } from './Old/Table/TableHeaderRow';
-export { default as OldTableHeaderRow } from './Old/Table/TableHeaderRow';
-
-export type { Props as OldTableRowProps } from './Old/Table/TableRow';
-export { default as OldTableRow } from './Old/Table/TableRow';
-
 export type { Props as VisibilityProps } from './Old/Visibility/Visibility';
 export { default as Visibility } from './Old/Visibility/Visibility';