@bitrise/bitkit 12.29.1 → 12.30.0

package/package.json

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

package/src/Components/Card/Card.tsx

@@ -11,7 +11,7 @@ export interface CardProps extends BoxProps {
 }
 
 /**
- * Basic container element with default box shadow and border radius. Use with `CardContent` to add padding.
+ * Basic container element with default box shadow and border radius.
  */
 const Card = forwardRef<CardProps, 'div'>((props, ref) => {
   const { withBorder, variant, ...rest } = props;

package/src/Components/Provider/Provider.tsx

@@ -1,8 +1,23 @@
-import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
 import theme from '../../theme';
 
-const Provider = ({ children }: ChakraProviderProps) => {
-  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
+type ProviderProps = {
+  children: ReactNode;
+  toastOffset?: string;
+};
+
+const Provider = ({ children, toastOffset }: ProviderProps) => {
+  return (
+    <ChakraProvider
+      theme={theme}
+      toastOptions={{
+        defaultOptions: toastOffset ? { containerStyle: { transform: `translateY(${toastOffset})` } } : undefined,
+      }}
+    >
+      {children}
+    </ChakraProvider>
+  );
 };
 
 export default Provider;

package/src/Components/Table/Table.theme.ts

@@ -1,13 +1,5 @@
 import type { SystemStyleObject } from '@chakra-ui/theme-tools';
-
-export const separatorStyle: SystemStyleObject = {
-  backgroundColor: 'neutral.93',
-  color: 'neutral.50',
-  fontSize: '1',
-  fontWeight: 'bold',
-  lineHeight: '1rem',
-  textTransform: 'uppercase',
-};
+import { rem } from '../../utils/utils';
 
 const Tabletheme: SystemStyleObject = {
   baseStyle: {
@@ -33,7 +25,6 @@ const Tabletheme: SystemStyleObject = {
       borderColor: 'neutral.93',
       width: '100%',
       borderSpacing: 0,
-      borderBottom: 0,
     },
     thead: {
       backgroundColor: 'neutral.93',
@@ -56,7 +47,6 @@ const Tabletheme: SystemStyleObject = {
       display: 'flex',
       gap: '8',
       alignItems: 'center',
-      justifyContent: 'space-between',
       width: '100%',
       paddingX: '16',
       paddingY: '12',
@@ -82,10 +72,11 @@ const Tabletheme: SystemStyleObject = {
     },
     td: {
       backgroundColor: 'neutral.100',
-      borderBottom: '1px solid',
+      borderTop: '1px solid',
       borderColor: 'neutral.93',
+      height: rem(65),
       paddingX: '16',
-      paddingY: '12',
+      paddingY: '8',
       textAlign: 'left',
     },
     expandTd: {
@@ -94,6 +85,22 @@ const Tabletheme: SystemStyleObject = {
       paddingRight: 0,
     },
   },
+  variants: {
+    borderless: {
+      thead: {
+        backgroundColor: 'transparent',
+      },
+      table: {
+        border: 'none',
+      },
+      th: {
+        paddingX: '12',
+      },
+      td: {
+        paddingX: '12',
+      },
+    },
+  },
 };
 
 export default Tabletheme;

package/src/Components/Table/Table.tsx

@@ -2,6 +2,7 @@ import { Table as ChakraTable, TableProps as ChakraTableProps, forwardRef } from
 
 export interface TableProps extends ChakraTableProps {
   isFixed?: boolean;
+  variant: 'borderless' | 'default';
 }
 
 /**

package/src/Components/Table/Td.tsx

@@ -1,22 +1,11 @@
 import { Td as ChakraTd, TableCellProps as ChakraTableCellProps, forwardRef } from '@chakra-ui/react';
-import { separatorStyle } from './Table.theme';
 
 export interface TableCellProps extends ChakraTableCellProps {
   variant?: 'default' | 'separator';
 }
 
-const VARIANTS = {
-  default: {},
-  separator: separatorStyle,
-};
-
 const Td = forwardRef<TableCellProps, 'td'>((props, ref) => {
-  const { variant, ...rest } = props;
-  const properties: ChakraTableCellProps = {
-    sx: VARIANTS[variant || 'default'],
-    ...rest,
-  };
-  return <ChakraTd role="cell" {...properties} ref={ref} />;
+  return <ChakraTd role="cell" {...props} ref={ref} />;
 });
 
 export default Td;

package/src/Components/Table/Th.tsx

@@ -10,6 +10,7 @@ import Icon from '../Icon/Icon';
 import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface TableColumnHeaderProps extends ChakraTableColumnHeaderProps {
+  isNumeric?: boolean;
   isSortable?: boolean;
   onSortClick?: (sortDirection?: AriaAttributes['aria-sort']) => void;
   sortedBy?: AriaAttributes['aria-sort'];
@@ -17,7 +18,7 @@ export interface TableColumnHeaderProps extends ChakraTableColumnHeaderProps {
 }
 
 const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
-  const { children, isSortable, onSortClick, sortedBy, tooltip, ...rest } = props;
+  const { children, isNumeric, isSortable, onSortClick, sortedBy, tooltip, ...rest } = props;
   const css = useTableStyles();
   const properties: ChakraTableColumnHeaderProps = {
     children,
@@ -44,7 +45,14 @@ const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
     properties.padding = '0';
     properties['aria-sort'] = sortedBy || 'none';
     properties.children = (
-      <Box as="button" onClick={onClick} sx={css.sortButton}>
+      <Box
+        as="button"
+        onClick={onClick}
+        __css={{
+          ...css.sortButton,
+          flexDirection: isNumeric ? 'row-reverse' : 'row',
+        }}
+      >
         {properties.children}
         <Icon name="Sort" sx={css.sortIcon} />
       </Box>

package/src/Components/Toast/Toast.tsx

@@ -5,7 +5,7 @@ import Notification, { ActionProps, NotificationAction, NotificationProps } from
 
 export interface ToastOptions {
   title: string;
-  description: React.ReactNode;
+  description?: React.ReactNode;
   status: NotificationProps['status'];
   action?: ActionProps;
   duration?: UseToastOptions['duration'];
@@ -24,7 +24,7 @@ const useToast = () => {
     toast({
       isClosable: opts.isClosable,
       duration: opts.duration,
-      position: opts.position || 'bottom',
+      position: opts.position || 'top-right',
       render: ({ onClose }) => (
         <Notification
           boxShadow="large"
@@ -34,7 +34,7 @@ const useToast = () => {
         >
           <Box display="flex" flexDirection="column">
             <AlertTitle>{opts.title}</AlertTitle>
-            <AlertDescription>{opts.description}</AlertDescription>
+            {opts.description && <AlertDescription>{opts.description}</AlertDescription>}
             {!opts.action && timestamp && <AlertDescription marginTop="8">{timestamp}</AlertDescription>}
             {opts.action && <NotificationAction alignSelf="start" marginTop="8" marginBottom="4" {...opts.action} />}
           </Box>

package/src/index.ts

@@ -29,9 +29,6 @@ export { default as ButtonGroup } from './Components/ButtonGroup/ButtonGroup';
 export type { CardProps } from './Components/Card/Card';
 export { default as Card } from './Components/Card/Card';
 
-export type { CardContentProps } from './Components/Card/CardContent';
-export { default as CardContent } from './Components/Card/CardContent';
-
 export type { TextProps } from './Components/Text/Text';
 export { default as Text } from './Components/Text/Text';
 

package/src/Components/Card/CardContent.tsx

@@ -1,14 +0,0 @@
-import Box, { BoxProps } from '../Box/Box';
-
-export type CardContentProps = BoxProps;
-
-/**
- * Basic container element with default box shadow, border radius and padding.
- */
-const CardContent = (props: CardContentProps) => {
-  return <Box {...props} />;
-};
-
-CardContent.defaultProps = {} as CardContentProps;
-
-export default CardContent;