@bitrise/bitkit 12.53.0 → 12.55.0

package/package.json

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

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -2,6 +2,7 @@ import { ComponentProps } from 'react';
 import ReactMarkdown, { Components } from 'react-markdown';
 
 import List from '../List/List';
+import Link from '../Link/Link';
 import ListItem from '../List/ListItem';
 import Box from '../Box/Box';
 import Divider from '../Divider/Divider';
@@ -9,6 +10,7 @@ import Text from '../Text/Text';
 import CodeBlock from '../CodeBlock/CodeBlock';
 
 const defaultComponents: Components = {
+  a: ({ node, ...props }) => <Link colorScheme="purple" isUnderlined target="_blank" {...props} />,
   h1: ({ node, ...props }) => <Text as="h1" size="6" {...props} />,
   h2: ({ node, ...props }) => <Text as="h2" size="5" {...props} />,
   h3: ({ node, ...props }) => <Text as="h3" size="4" fontWeight="bold" {...props} />,

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

@@ -70,6 +70,13 @@ const Tabletheme: SystemStyleObject = {
         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,15 @@ 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 {
+  children?: string;
   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,14 +26,11 @@ const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
     ...rest,
   };
 
-  if (tooltip) {
+  if (children && tooltip) {
     properties.children = (
-      <Box sx={css.tooltipContainer}>
+      <DefinitionTooltip trigger="hover" {...tooltip}>
         {children}
-        <Tooltip {...tooltip}>
-          <Icon color="neutral.50" name="Support" size="16" />
-        </Tooltip>
-      </Box>
+      </DefinitionTooltip>
     );
   }
 

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>
   );