@bitrise/bitkit 12.54.0 → 12.55.1

package/package.json

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

package/src/Components/DefinitionTooltip/DefinitionTooltip.theme.ts

@@ -13,6 +13,7 @@ const DefinitionTooltipTheme = defineMultiStyleConfig({
     trigger: {
       borderBottom: '1px dotted',
       borderBottomColor: 'neutral.60',
+      display: 'inline-block',
       width: 'fit-content',
       fontWeight: 'inherit',
       _hover: {

package/src/Components/DefinitionTooltip/DefinitionTooltip.tsx

@@ -2,22 +2,23 @@ import { useMultiStyleConfig } from '@chakra-ui/react';
 import Popover, { PopoverProps } from '../Popover/Popover';
 import PopoverContent from '../Popover/PopoverContent';
 import PopoverTrigger from '../Popover/PopoverTrigger';
-import Box from '../Box/Box';
+import Box, { BoxProps } from '../Box/Box';
 
 export interface DefinitionTooltipProps extends Omit<PopoverProps, 'children'> {
   children: string;
   label: string;
+  triggerProps?: BoxProps;
 }
 
 const DefinitionTooltip = (props: DefinitionTooltipProps) => {
-  const { children, label, ...rest } = props;
+  const { children, label, triggerProps, ...rest } = props;
 
   const style = useMultiStyleConfig('DefinitionTooltip');
 
   return (
     <Popover placement="top" variant="dark" withArrow {...rest}>
       <PopoverTrigger>
-        <Box as="button" __css={style.trigger}>
+        <Box as="span" role="button" tabIndex={0} __css={style.trigger} {...triggerProps}>
           {children}
         </Box>
       </PopoverTrigger>

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

@@ -63,13 +63,20 @@ const Tabletheme: SystemStyleObject = {
       '[aria-sort="none"]:hover & path': {
         fill: 'purple.10',
       },
-      '[aria-sort="ascending"] & path:first-child': {
+      '[aria-sort="ascending"] & path:first-of-type': {
         fill: 'purple.10',
       },
-      '[aria-sort="descending"] & path:last-child': {
+      '[aria-sort="descending"] & path:last-of-type': {
         fill: 'purple.10',
       },
     },
+    tbody: {
+      tr: {
+        _hover: {
+          td: { backgroundColor: 'neutral.95' },
+        },
+      },
+    },
     td: {
       backgroundColor: 'neutral.100',
       borderTop: '1px solid',
@@ -78,9 +85,6 @@ const Tabletheme: SystemStyleObject = {
       paddingX: '16',
       paddingY: '8',
       textAlign: 'left',
-      _groupHover: {
-        backgroundColor: 'neutral.95',
-      },
     },
     expandTd: {
       borderBottomColor: 'transparent',

package/src/Components/Table/TableIconButton.tsx

@@ -13,6 +13,12 @@ const TableIconButton = forwardRef<TableIconButtonProps, 'button'>((props, ref)
       isDanger={isDanger}
       variant="tertiary"
       ref={ref}
+      _active={{
+        backgroundColor: 'neutral.80',
+      }}
+      _hover={{
+        backgroundColor: 'neutral.90',
+      }}
       {...props}
     />
   );

package/src/Components/Table/TablePagination.tsx

@@ -1,3 +1,4 @@
+import { Tfoot } from '@chakra-ui/react';
 import Box from '../Box/Box';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import Divider from '../Divider/Divider';
@@ -34,67 +35,69 @@ const TablePagination = ({
   const itemsEndIndex = Math.min(page * perPage, totalCount);
 
   return (
-    <Tr>
-      <Td colSpan={colSpan}>
-        <Box display="flex" gap="1rem" alignItems="center">
-          <Box display="flex" gap="0.5rem" alignItems="center">
-            <Text>Items per page:</Text>
-            <Dropdown
-              onChange={({ target }) => setPerPage(Number(target.value))}
-              value={perPage.toString()}
-              search={false}
-              width="auto"
-            >
-              {itemsPerPageOptions.map((perPageOption) => (
-                <DropdownOption key={perPageOption} value={perPageOption.toString()}>
-                  {perPageOption}
-                </DropdownOption>
-              ))}
-            </Dropdown>
-          </Box>
-          <Divider orientation="vertical" height="3rem" color="neutral.90" />
-          <Text marginRight="auto">
-            {itemsStartIndex}-{itemsEndIndex} of {totalCount} items
-          </Text>
-          <Divider orientation="vertical" height="3rem" color="neutral.90" />
-          <Box display="flex" gap="0.5rem" alignItems="center">
-            <Dropdown
-              onChange={({ target }) => setPage(Number(target.value))}
-              value={page.toString()}
-              search={false}
-              width="auto"
-            >
-              {[...Array(pageCount)].map((_, index) => {
-                const pageOption = index + 1;
-
-                return (
-                  <DropdownOption key={pageOption} value={pageOption.toString()}>
-                    {pageOption}
+    <Tfoot>
+      <Tr>
+        <Td colSpan={colSpan}>
+          <Box display="flex" gap="1rem" alignItems="center">
+            <Box display="flex" gap="0.5rem" alignItems="center">
+              <Text>Items per page:</Text>
+              <Dropdown
+                onChange={({ target }) => setPerPage(Number(target.value))}
+                value={perPage.toString()}
+                search={false}
+                width="auto"
+              >
+                {itemsPerPageOptions.map((perPageOption) => (
+                  <DropdownOption key={perPageOption} value={perPageOption.toString()}>
+                    {perPageOption}
                   </DropdownOption>
-                );
-              })}
-            </Dropdown>
-            <Text>of {pageCount} pages</Text>
+                ))}
+              </Dropdown>
+            </Box>
+            <Divider orientation="vertical" height="3rem" color="neutral.90" />
+            <Text as="span" marginRight="auto">
+              {itemsStartIndex}-{itemsEndIndex} of {totalCount} items
+            </Text>
+            <Divider orientation="vertical" height="3rem" color="neutral.90" />
+            <Box display="flex" gap="0.5rem" alignItems="center">
+              <Dropdown
+                onChange={({ target }) => setPage(Number(target.value))}
+                value={page.toString()}
+                search={false}
+                width="auto"
+              >
+                {[...Array(pageCount)].map((_, index) => {
+                  const pageOption = index + 1;
+
+                  return (
+                    <DropdownOption key={pageOption} value={pageOption.toString()}>
+                      {pageOption}
+                    </DropdownOption>
+                  );
+                })}
+              </Dropdown>
+              <Text as="span">of {pageCount} pages</Text>
+            </Box>
+            <ButtonGroup>
+              <IconButton
+                iconName="ChevronLeft"
+                variant="secondary"
+                onClick={() => setPage(page - 1)}
+                aria-label="Previous page"
+                isDisabled={page === 1}
+              />
+              <IconButton
+                iconName="ChevronRight"
+                variant="secondary"
+                onClick={() => setPage(page + 1)}
+                aria-label="Next page"
+                isDisabled={page === pageCount}
+              />
+            </ButtonGroup>
           </Box>
-          <ButtonGroup>
-            <IconButton
-              iconName="ChevronLeft"
-              variant="secondary"
-              onClick={() => setPage(page - 1)}
-              aria-label="Previous page"
-              isDisabled={page === 1}
-            />
-            <IconButton
-              iconName="ChevronRight"
-              variant="secondary"
-              onClick={() => setPage(page + 1)}
-              aria-label="Next page"
-              isDisabled={page === pageCount}
-            />
-          </ButtonGroup>
-        </Box>
-      </Td>
-    </Tr>
+        </Td>
+      </Tr>
+    </Tfoot>
   );
 };
 

package/src/Components/Table/Th.tsx

@@ -7,14 +7,14 @@ import {
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
 import Icon from '../Icon/Icon';
-import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
+import DefinitionTooltip, { DefinitionTooltipProps } from '../DefinitionTooltip/DefinitionTooltip';
 
 export interface TableColumnHeaderProps extends ChakraTableColumnHeaderProps {
   isNumeric?: boolean;
   isSortable?: boolean;
   onSortClick?: (sortDirection?: AriaAttributes['aria-sort']) => void;
   sortedBy?: AriaAttributes['aria-sort'];
-  tooltip?: Omit<TooltipProps, 'children'>;
+  tooltip?: Omit<DefinitionTooltipProps, 'children'>;
 }
 
 const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
@@ -25,15 +25,16 @@ const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
     ...rest,
   };
 
-  if (tooltip) {
-    properties.children = (
-      <Box sx={css.tooltipContainer}>
-        {children}
-        <Tooltip {...tooltip}>
-          <Icon color="neutral.50" name="Support" size="16" />
-        </Tooltip>
-      </Box>
-    );
+  if (children && tooltip) {
+    if (typeof children === 'string') {
+      properties.children = (
+        <DefinitionTooltip trigger="hover" {...tooltip}>
+          {children}
+        </DefinitionTooltip>
+      );
+    } else {
+      console.error('If you want to use tooltip on Th, the children should be string.');
+    }
   }
 
   if (isSortable) {

package/src/Components/Table/Tr.tsx

@@ -24,10 +24,10 @@ type ExpandableProps = ChakraTableRowProps & {
   onExpandedChanged?(isExpanded: boolean): void;
 };
 
-export type TableRowProps = RowProps & (NonExpandableProps | ExpandableProps) & { visualHover?: boolean };
+export type TableRowProps = RowProps & (NonExpandableProps | ExpandableProps);
 
 const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
-  const { children, defaultIsExpanded, onExpandedChanged, expandableContent, onClick, visualHover, ...rest } = props;
+  const { children, defaultIsExpanded, onExpandedChanged, expandableContent, onClick, ...rest } = props;
 
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: defaultIsExpanded });
   const css = useTableStyles();
@@ -46,7 +46,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
     const colSpan = Children.count(children) + 1;
     return (
       <>
-        <ChakraTr role={visualHover ? 'group' : undefined} {...properties} ref={ref}>
+        <ChakraTr {...properties} ref={ref}>
           <Td sx={css.expandTd}>
             <TableIconButton
               iconName="ChevronDown"
@@ -80,7 +80,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
     );
   }
   return (
-    <ChakraTr role={visualHover ? 'group' : undefined} {...properties} ref={ref}>
+    <ChakraTr {...properties} ref={ref}>
       {children}
     </ChakraTr>
   );