@bitrise/bitkit 10.23.2 → 10.24.0

package/package.json

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

package/src/Components/Table/Table.stories.tsx

@@ -96,6 +96,61 @@ SortableColumns.args = {
   ),
 };
 
+export const ColumnsWithTooltip = Template.bind({});
+ColumnsWithTooltip.args = {
+  children: (
+    <>
+      <TableCaption description="You have to implelement the logic">Columns with tooltip</TableCaption>
+      <Thead>
+        <Tr>
+          <Th>Name</Th>
+          <Th
+            isSortable
+            tooltip={{
+              label:
+                'How long successful builds typically take to run. We calculate this using the 50th percentile aggregation.',
+            }}
+          >
+            Typical build time (P50)
+          </Th>
+          <Th
+            isSortable
+            sortedBy="descending"
+            tooltip={{
+              label:
+                'How long slowest successful builds take to run. We calculate this using the 90th percentile aggregation.',
+            }}
+          >
+            Typical build time (P90)
+          </Th>
+          <Th
+            isSortable
+            tooltip={{ label: 'The total amount of time spent running builds of this app during the selected period.' }}
+          >
+            Build usage
+          </Th>
+          <Th isSortable tooltip={{ label: 'The total number of builds during the selected period.' }}>
+            Build count
+          </Th>
+          <Th isSortable tooltip={{ label: 'The percentage of completed builds that passed.' }}>
+            Success rate
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr>
+          <Td>bitrise-website</Td>
+          <Td>3m 36s</Td>
+          <Td>4m 10s</Td>
+          <Td>2d 13h 13s</Td>
+          <Td>21,433</Td>
+          <Td>54.43%</Td>
+        </Tr>
+      </Tbody>
+    </>
+  ),
+};
+
 const onRowClick = () => {};
 
 export const ClickableRows = Template.bind({});

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

@@ -53,10 +53,16 @@ const Tabletheme: SystemStyleObject = {
       textAlign: 'left',
       whiteSpace: 'nowrap',
     },
+    tooltipContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 4,
+    },
     sortButton: {
       display: 'flex',
       gap: '8',
       alignItems: 'center',
+      justifyContent: 'space-between',
       width: '100%',
       paddingX: '16',
       paddingY: '12',

package/src/Components/Table/Th.tsx

@@ -7,21 +7,34 @@ import {
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
 import Icon from '../Icon/Icon';
+import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface TableColumnHeaderProps extends ChakraTableColumnHeaderProps {
   isSortable?: boolean;
   onSortClick?: (sortDirection?: AriaAttributes['aria-sort']) => void;
   sortedBy?: AriaAttributes['aria-sort'];
+  tooltip?: Omit<TooltipProps, 'children'>;
 }
 
 const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
-  const { children, isSortable, onSortClick, sortedBy, ...rest } = props;
+  const { children, isSortable, onSortClick, sortedBy, tooltip, ...rest } = props;
   const css = useTableStyles();
   const properties: ChakraTableColumnHeaderProps = {
     children,
     ...rest,
   };
 
+  if (tooltip) {
+    properties.children = (
+      <Box sx={css.tooltipContainer}>
+        {children}
+        <Tooltip {...tooltip}>
+          <Icon color="neutral.50" name="Support" size="16" />
+        </Tooltip>
+      </Box>
+    );
+  }
+
   if (isSortable) {
     const onClick = () => {
       if (onSortClick) {
@@ -32,7 +45,7 @@ const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
     properties['aria-sort'] = sortedBy || 'none';
     properties.children = (
       <Box as="button" onClick={onClick} sx={css.sortButton}>
-        {children}
+        {properties.children}
         <Icon name="Sort" sx={css.sortIcon} />
       </Box>
     );