@bitrise/bitkit 12.73.1 → 12.73.3

package/package.json

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

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

@@ -1,8 +1,7 @@
 import { rem } from '../../utils/utils';
-import { TableProps } from './Table';
 
 const Tabletheme = {
-  baseStyle: ({ disableRowHover, isFixed }: TableProps) => {
+  baseStyle: () => {
     return {
       caption: {
         textAlign: 'left',
@@ -12,24 +11,30 @@ const Tabletheme = {
         fontSize: '4',
         lineHeight: '1.75rem',
         fontWeight: 'bold',
-        color: 'purple.10',
+        color: 'pal.purple.10',
       },
       captionDescription: {
         marginTop: '4',
-        color: 'neutral.30',
+        color: 'pal.neutral.30',
       },
       table: {
         fontVariantNumeric: 'lining-nums tabular-nums',
         borderCollapse: 'separate',
         borderRadius: '4',
         border: '1px solid',
-        borderColor: 'neutral.93',
+        borderColor: 'pal.neutral.93',
         width: '100%',
         borderSpacing: 0,
-        tableLayout: isFixed ? 'fixed' : 'auto',
+        '&:not(.disable-row-hover)': {
+          tr: {
+            _hover: {
+              td: { backgroundColor: 'pal.neutral.95' },
+            },
+          },
+        },
       },
       thead: {
-        backgroundColor: 'neutral.93',
+        backgroundColor: 'pal.neutral.93',
         borderTopLeftRadius: '4',
         borderTopRightRadius: '4',
       },
@@ -55,34 +60,27 @@ const Tabletheme = {
         fontWeight: 'bold',
         textAlign: 'left',
         _hover: {
-          backgroundColor: 'neutral.90',
+          backgroundColor: 'pal.neutral.90',
         },
       },
       sortIcon: {
         path: {
-          fill: 'neutral.80',
+          fill: 'pal.neutral.80',
         },
         '[aria-sort="none"]:hover & path': {
-          fill: 'purple.10',
+          fill: 'pal.purple.10',
         },
         '[aria-sort="ascending"] & path:first-of-type': {
-          fill: 'purple.10',
+          fill: 'pal.purple.10',
         },
         '[aria-sort="descending"] & path:last-of-type': {
-          fill: 'purple.10',
-        },
-      },
-      tbody: {
-        tr: {
-          _hover: {
-            td: { backgroundColor: !disableRowHover && 'neutral.95' },
-          },
+          fill: 'pal.purple.10',
         },
       },
       td: {
-        backgroundColor: 'neutral.100',
+        backgroundColor: 'pal.neutral.100',
         borderTop: '1px solid',
-        borderColor: 'neutral.93',
+        borderColor: 'pal.neutral.93',
         height: rem(65),
         paddingX: '16',
         paddingY: '8',

package/src/Components/Table/Table.tsx

@@ -1,9 +1,9 @@
 import { Table as ChakraTable, TableProps as ChakraTableProps, forwardRef } from '@chakra-ui/react';
 
 export interface TableProps extends ChakraTableProps {
+  disableRowHover?: boolean;
   isFixed?: boolean;
   variant?: 'borderless' | 'default';
-  disableRowHover?: boolean;
 }
 
 /**
@@ -11,7 +11,14 @@ export interface TableProps extends ChakraTableProps {
  */
 const Table = forwardRef<TableProps, 'table'>((props, ref) => {
   const { disableRowHover, isFixed, ...rest } = props;
-  return <ChakraTable {...rest} ref={ref} />;
+  return (
+    <ChakraTable
+      layout={isFixed ? 'fixed' : 'auto'}
+      className={disableRowHover ? 'disable-row-hover' : undefined}
+      {...rest}
+      ref={ref}
+    />
+  );
 });
 
 export default Table;

package/src/Components/Table/TableIconButton.tsx

@@ -7,17 +7,17 @@ const TableIconButton = forwardRef<TableIconButtonProps, 'button'>((props, ref)
   const { isDanger } = props;
   return (
     <IconButton
-      color={isDanger ? undefined : 'purple.10'}
+      color={isDanger ? undefined : 'pal.purple.10'}
       iconSize="24"
       size="small"
       isDanger={isDanger}
       variant="tertiary"
       ref={ref}
       _active={{
-        backgroundColor: 'neutral.80',
+        backgroundColor: 'pal.neutral.80',
       }}
       _hover={{
-        backgroundColor: 'neutral.90',
+        backgroundColor: 'pal.neutral.90',
       }}
       {...props}
     />

package/src/Components/Table/TablePagination.tsx

@@ -54,11 +54,11 @@ const TablePagination = ({
                 ))}
               </Dropdown>
             </Box>
-            <Divider orientation="vertical" height="3rem" color="neutral.90" />
+            <Divider orientation="vertical" height="3rem" color="pal.neutral.90" />
             <Text as="span" marginRight="auto">
               {itemsStartIndex}-{itemsEndIndex} of {totalCount} items
             </Text>
-            <Divider orientation="vertical" height="3rem" color="neutral.90" />
+            <Divider orientation="vertical" height="3rem" color="pal.neutral.90" />
             <Box display="flex" gap="0.5rem" alignItems="center">
               <Dropdown
                 onChange={({ target }) => setPage(Number(target.value))}

package/src/Components/Tooltip/Tooltip.tsx

@@ -1,13 +1,20 @@
-import { Tooltip as ChakraTooltip, TooltipProps as ChakraTooltipProps, forwardRef, chakra } from '@chakra-ui/react';
+import {
+  Tooltip as ChakraTooltip,
+  TooltipProps as ChakraTooltipProps,
+  forwardRef,
+  chakra,
+  BoxProps,
+} from '@chakra-ui/react';
 
 export interface TooltipProps extends Omit<ChakraTooltipProps, 'shouldWrapChildren'> {
   shouldWrapChildren?: boolean | 'block';
+  wrapperProps?: BoxProps;
 }
 /**
  * A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.
  */
 const Tooltip = forwardRef<TooltipProps, 'div'>((props, ref) => {
-  const { children, shouldWrapChildren, ...rest } = props;
+  const { children, shouldWrapChildren, wrapperProps = {}, ...rest } = props;
   const properties: ChakraTooltipProps = {
     bg: 'neutral.10',
     children,
@@ -18,7 +25,7 @@ const Tooltip = forwardRef<TooltipProps, 'div'>((props, ref) => {
   };
   if (shouldWrapChildren) {
     properties.children = (
-      <chakra.span display={shouldWrapChildren === 'block' ? 'block' : 'inline-block'} tabIndex={0}>
+      <chakra.span sx={wrapperProps} display={shouldWrapChildren === 'block' ? 'block' : 'inline-block'} tabIndex={0}>
         {children}
       </chakra.span>
     );