@bitrise/bitkit 10.23.2 → 10.24.2-alpha-chakra.1

package/package.json

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

package/src/Components/Icons/16x16/History.tsx

@@ -3,10 +3,11 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 const History = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.36668 8.66667C1.7039 12.0234 4.55826 14.6667 8.00002 14.6667C11.6667 14.6667 14.6667 11.6667 14.6667 8C14.6667 4.33333 11.6667 1.33333 8.00002 1.33333C5.37001 1.33333 3.08299 2.87679 2.00002 5.10263L2.00002 3.33333H0.666687V7.33333L4.66669 7.33333V6H3.05803C3.85332 4.05009 5.77296 2.66667 8.00002 2.66667C10.9334 2.66667 13.3334 5.06667 13.3334 8C13.3334 10.9333 10.9334 13.3333 8.00002 13.3333C5.29235 13.3333 3.03911 11.2884 2.70845 8.66667H1.36668ZM8.26675 9.93333L11.0668 8.6L10.4668 7.4L8.66675 8.26667V4.66667H7.33342V9.33333L8.26675 9.93333Z"
       fill="currentColor"
-      d="M1.333 8c0 3.442 2.644 6.296 6 6.633v-1.341C4.712 12.96 2.667 10.708 2.667 8c0-2.933 2.4-5.333 5.333-5.333 2.933 0 5.333 2.4 5.333 5.333 0 2.227-1.383 4.147-3.333 4.942v-1.609H8.667v4h4V14h-1.77c2.226-1.083 3.77-3.37 3.77-6 0-3.667-3-6.667-6.667-6.667S1.333 4.333 1.333 8Z"
     />
-    <path fill="currentColor" d="m11.067 8.6-2.8 1.333-.934-.6V4.667h1.334v3.6l1.8-.867.6 1.2Z" />
   </Icon>
 ));
 

package/src/Components/Icons/24x24/History.tsx

@@ -3,10 +3,11 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 const History = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path
-      d="M2 12c0 5.163 3.965 9.444 9 9.95v-2.013C7.067 19.441 4 16.061 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8c0 3.34-2.075 6.22-5 7.413V17h-2v6h6v-2h-2.654C19.685 19.375 22 15.945 22 12c0-5.5-4.5-10-10-10S2 6.5 2 12Z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.04999 13C2.55581 18.0351 6.83737 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C8.05498 2 4.62445 4.31518 3 7.65394L3 5L1 5V11H7V9L4.58701 9C5.77995 6.07513 8.6594 4 12 4C16.4 4 20 7.6 20 12C20 16.4 16.4 20 12 20C7.93849 20 4.55863 16.9326 4.06264 13H2.04999ZM12.4001 14.9L16.6001 12.9L15.7001 11.1L13.0001 12.4V7H11.0001V14L12.4001 14.9Z"
       fill="currentColor"
     />
-    <path d="m16.6 12.9-4.2 2L11 14V7h2v5.4l2.7-1.3.9 1.8Z" fill="currentColor" />
   </Icon>
 ));
 

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

package/src/Components/Text/Text.tsx

@@ -46,7 +46,7 @@ export interface TextProps extends ChakraTextProps {
   /**
    * Font weight
    */
-  fontWeight?: 'bold' | 'normal';
+  fontWeight?: 'bold' | 'normal' | string[];
   /**
    * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
    */