@bitrise/bitkit 12.29.2 → 12.30.0

package/package.json

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

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>